Example of Creating the NavigatorBox 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:

        var navbox;
        function onLoad()
        {
            PP.resourceManager.setRootResourcesFolder("Scripts/resources/");
            PP.setCurrentCulture(PP.Cultures.ru);
            mb = new PP.Mb.Metabase(
            {
                PPServiceUrl: "PPService.axd?action=proxy",
                Id: "WAREHOUSE",
                UserCreds: {
                    UserName: "user",
                    Password: "password"
                }
            });
            mb.open();
            navbox = new PP.Mb.Ui.NavigatorBox(
            {
                Metabase: mb,
                ParentNode: document.getElementById("div1"),
                Width: 700,
                Height: 400,
                //Multiple selection in the list of objects is enabled
                ObjectListMultiSelect: true,
                //Path to images folder
                ImagePath: "PP_img/",
                //On opening the context menu for element from tree of folders, a message with selected folder key appears
                FolderTreeContextMenu: function (sender, args)
                {
                    alert(navbox.getSelectedFolderTreeObject()[0].getKey())
                },
                //filter for container objects is set: only folders are displayed in the folder tree
                FolderTreeFilter: [0],
                //object name contains its name and identifier
                ObjectListDisplayMode: PP.Mb.Ui.MetabaseDisplayMode.Both,
                //list of objects contains objects of the following types: standard cubes, workbooks, express reports and regular reports
                ObjectListFilters: [1281, 2827, 2561, 2562],
                //menu for columns is hidden, that is, it is not available to hide columns
                HideObjectListColumnsMenu: true,
                //on loading a list of objects columns are fit to contents
                ObjectListObjectsLoaded: function (sender, args)
                {
                    navbox.adjustColumnsWidthByContent()
                },
                ObjectListSelectionChanged: function (sender, args)
                {
                     console.debug("Selection of element is changed")
                 }
            });
        }

In the BODY tag add:

<body onload="onLoad();">

   <div id = "div1"></div>

</body>

After executing the example the NavigatorBox component is located on the HTML page:

See also:

NavigatorBox