To execute the example, create an HTML page, and in the HEAD tag add links to the following JS and CSS files:
PP.js.
PP.Metabase.js.
PP.Express.js.
PP.TS.js.
PP.css.
PP.Express.css.
PP.Metabase.css.
PP.TS.css.
A workbook with the 5183 key must be available.
In the SCRIPT tag add the following script:
// Set locale for resources PP.setCurrentCulture(PP.Cultures.ru); // Declare constants var KEY = 5183; //document key var IMG_PATH = "build/img/"; //path to icons folder // Declare variables var waiter, metabase, tsService, wbk, workbookBox, metabase, waiter;
//Function for getting handler functions //As a parameter, it takes auxiliary function displayed in the console //on handler call. //For example, this can be the string with class and event names function onDummyActionFactory(actionCaption) { return function (sender, args) { console.log(actionCaption); console.log(sender); console.log(args); } }
function Ready() //body loading event handler { // Create progress bar waiter = new PP.Ui.Waiter(); // Create repository connection metabase = new PP.Mb.Metabase({ Id: "Warehouse", UserCreds: { UserName: "user", Password: "password" }, StartRequest: function () { waiter.show(); }, EndRequest: function () { waiter.hide(); }, Error: function (sender, args) { alert(args.ResponseText); } });
// Open repository connection metabase.open(); // Create service for for working with time series tsService = new PP.TS.TSService({ Metabase: metabase }); // Open document wbk = tsService.editDocument(KEY, onFirstOpened); // Document open event handler function onFirstOpened(sender, args) { //Get initial display settings for breadcrumb var xml = wbk.getActiveSheet().getWbkMetadata().attrsTreeOptions.its.it[0].hierAttrs; //Get metadata hierarchy var hierarchy = wbk.getHier();
//Create component for displaying and managing workbook attributes that is based //on the PP.Ui.Breadcrumb component var metaAttributeBreadCrumb = new PP.TS.Ui.MetaAttributeBreadCrumb({ ParentNode: "example", //parent DOM node Options: new PP.TS.MetaAttrBrCrOptionParser({ XML: xml }), //Initial display //settings Hierarchy: hierarchy, //source Width: 500, //width Height: 100, //height ImagePath: IMG_PATH, //path to icons folder IsRTL: false // indicates whether text is directed from right to left ItemsCaptionType: PP.TS.BreadcrumbItemCaptionType.SelectedNames // Label type for breadcrumb element }); } };
In the <body> tag as the value of the onLoad attribute specify name of the function executed after page body loading is finished:
<body onload="Ready()"> <div id='example'> </body>
At the end of the document insert a code that sets styles to the document.body node corresponding to client's operating system:
<script type="text/javascript"> PP.initOS(document.body); </script>
After executing the example the MetaAttributeBreadCrumb component is added to the HTML page. This component looks as follows:
If several elements are selected for the breadcrumb factor, the corresponding text in brackets will contain names of the first and the last elements, as well as the total number of selected items. For example, the Country factor will have the following text:
Country(American Samoa..Angolaa(2))
See also: