Show contents 

Working with Repository > Components > MetabaseTreeList > Example of Creating the MetabaseTreeList Component

Example of Creating the MetabaseTreeList Component

To execute the example. in the HEAD tag of the HTML page add links to the following JS and CSS files:

In the SCRIPT tag add the following script:

        //function that will be executed on page load
        function onLoad() {
            //create a repository connection
            mb = new PP.Mb.Metabase({
                Id: "PPRepository",
                UserCreds: new PP.Mb.UserCreds({
                    UserName: "user",
                    Password: "password"
                })
            });
            mb.open();
            //create
            list1 = new PP.Mb.Ui.MetabaseTreeList({
                //root folder key
                RootKey: 96773,
                //only standard cubes are displayed in the tree
                Filter: [PP.Mb.MetabaseObjectClass.KE_CLASS_STDCUBE],
                //set repository, from where to take data
                Metabase: mb,
                //object identifiers are displayed in tree nodes
                DisplayMode: PP.Mb.Ui.MetabaseDisplayMode.Both,
                ParentNode: document.getElementById("mtl"),
                //columns with object attributes are displayed
                ShowAttributes: true,
                Width: 700,
                Height: 400,
                //path to images folder
                ImagePath: "PP_img/",
                //it is not available to deselect all elements
                EmptySelection: false,
                //multiple selection is enabled
                MultiSelect: true,
                //empty folders are hidden
                ShowEmptyFolder: false,
                //after loading of nodes column width is fit to contents and folders with the 96776 and 96778 keys are expanded
                NodesLoaded: onNodesLoaded
            });
            function onNodesLoaded() {
                list1.adjustColumnsWidthByContent();
                list1.setExpandedKeys([96776, 96778]);
            }
        }

In the BODY tag add the onload attribute and div element with the identifier mtl:

<body onload="onLoad();">

    <div id = "mtl"></div>

 </body>

After executing the example the HTML page will contain the MetabaseTreeList component that looks as follows:

See also:

MetabaseTreeList