Example of creating the NavBreadcrumb component

To execute the example, in the HEAD tag of the HTML page specify links to the following CSS and JS files:
In the <body> tag as the value of the onLoad attribute specify name of the function executed after page body loading is finished:
At the end of the document insert a code that sets styles of the document.body node, which correspond to client's operating system:
<script type="text/javascript">
		//Resources folder
        PP.resourceManager.setRootResourcesFolder("../resources/");
        //List of used resources
        PP.resourceManager.setResourceList(['PP', 'Metabase', 'Ts', 'Express', 'TabSheetMaster', 'ChartMaster', 'TreeChartMaster', 'MapMaster', 'GaugeMaster']);
        // Determine language settings for resources
		PP.setCurrentCulture(PP.Cultures.ru);		
		// Declare constants
		var KEY = 1334; //document key
		var IMG_PATH = "../build/img/";  //path to icons folder		
		// Declare variables
		var waiter, metabase, hieService, hier, attrId, navBreadcrumb, navBreadcrumbItem;		
		//Function for getting handler functions
		//It gets additional information output to the console as a parameter on calling a handler.
		//This can be, for example, a row containing event and class name
		function onDummyActionFactory(actionCaption){
			return function (sender, args){
				console.log(actionCaption);
				console.log(sender);
				console.log(args);
			};
		}		
		function Ready(){ //body loading event handler
			// Create loading progress bar
			waiter = new PP.Ui.Waiter();
			// Create a 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 a service to work with time series database hierarchy
			hieService = new PP.TS.HieService({ Metabase: metabase });
			// Sends a request to open workbook hierarchy by the KEY key of indicators directory
			hier = hieService.openFromRubKey(KEY, null, onHieOpened);
			//operation execution end handler
			function onHieOpened(sender, args)
			{
				console.log("Get hierarchy attributes")
				attrs = hier.getAttributes();
				console.log("Get identifier by index of the 0 attribute");
				attrId = attrs[0].id;
				console.log(attrId);				
				// Create a component class instance to display and manage workbook attributes
				navBreadcrumb = new PP.TS.Ui.NavBreadcrumb({
					ImagePath: IMG_PATH, //path to folder with icons
					Source: hier, //source(view property)
					Width: 302, //height
					Height: 500, //width
					ParentNode: "example" //DOM parent node
				});
				// Get hierarchy			
				console.log("Refresh entire component according to metadata");
				navBreadcrumb.refreshAll();
				console.log("Refresh selection in dimension trees of all attributes");
				navBreadcrumb.refreshSelections();
				console.log("Refresh element label of the NavBreadcrumb component according to attribute");
				navBreadcrumb.updateItemContent(attrId);				
				// Connect view event handlers
				navBreadcrumb.AltHierarchyChanged.add(onDummyActionFactory("Event of view of changing dimension alternative hierarchy on server occurred"));
				navBreadcrumb.AttributeFilterChanged.add(onDummyActionFactory("Event of view of enabling or disabling filter in attribute occurred"));
				navBreadcrumb.AttributeSortChanged.add(onDummyActionFactory("Event of view of changing sorting in dimension tree occurred"));
				navBreadcrumb.DimSelectionChanged.add(onDummyActionFactory("Event if view of changing dimension selection on server occurred"));
				navBreadcrumb.RequestMetadata.add(onDummyActionFactory("Event of view of metadata query occurred"));
				navBreadcrumb.RequestSelectedItemsChanged.add(onDummyActionFactory("Event of view of mixing attributes in the NavBreadcrumb component occurred"));
				navBreadcrumb.TreeNameAttrChanged.add(onDummyActionFactory("Event of view of changing level name attribute occurred"));				
				console.log("Add a new component to display and manage workbook attributes");
				addNewItem();
			}
		}		
		// Function of adding a new component to display and manage workbook attributes
		function addNewItem()
		{			
			// Class implementing panels with attribute dimension tree
			// in the component to display and manage workbook attributes
			navBreadcrumbItem = new PP.TS.Ui.NavBreadcrumbItem({
				Source: hier.getDim(hier.getAttributes()[0].k), //source (dimension)
				ViewType: PP.Ui.NavigationItem,
				Title: "New element", //title
				Tag: hier.getAttributes()[0].id,
				OwnerMaster: navBreadcrumb,
				ImageList: navBreadcrumb._ImageList
			});
			//add a panel to wizard
			navBreadcrumb.addMasterPanel(navBreadcrumbItem);
			//expand panel
			navBreadcrumbItem.expand();			
			console.log("Get index of the position, in which dimension is located");
			var iPos = navBreadcrumbItem.getIndexPosition();
			console.log(iPos);			
			console.log("Get whether attribute is selected");
			var isSelected = navBreadcrumbItem.getSelected();
			console.log(isSelected);			
			
		}
	</script>
After executing the example the NavBreadcrumb component is placed in the HTML page. This component looks as follows: