Show contents 

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

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: "prognozplatform",
                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