Example of the RibbonView Component Layout

Create the HTML page and perform the following steps to execute an example:

1. In the HEAD tag add links to the following JS and CSS files:

2. Add the following script in the SCRIPT tag:

	    var metabase, prxReport, prxMbService, ribbon;
	    function renderReport() {
	        metabase = new PP.Mb.Metabase(//Create metabase
		{
		    PPServiceUrl: "PPService.axd?action=proxy",
		    Id: "PPRepository"
		});
	        metabase.open();//Open metabase
	        prxMbService = new PP.Prx.PrxMdService({ Metabase: metabase });//Create service for working with regular reports
	        prxReport = prxMbService.open(731737);//Open report from the metabase
	        ribbon = new PP.Prx.Ui.RibbonView(
		{
		    ParentNode: "ribbon",
		    Source: prxReport,//Source report
		    ImagePath: "PP_img/"//Path to the images folder
		});
	    }

3. In the BODY tag add the following code:

<body onselectstart="return false" onload="renderReport()" style="height: 100%;">

    <div id="controlBar" style="height: 800px;">

    </div>

</body>

After executing the example the HTML page will contain the RibbonView component that looks as follows:

Tool ribbon commands are unavailable as the report is not opened. If the component is created as a part of ReportBox (default), after opening the report the buttons become active.