Example of Creating the MetaAttributeBreadCrumb Component

To execute the example, create an HTML page, and in the HEAD tag add links to the following JS and CSS files:

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:

DHTML Components