Example of the ReportBox Component Layout

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

1. Add references to the following JS and CSS files in the HEAD tag:

2. Add the following script in the SCRIPT tag:

<script type="text/javascript">
    var prxReport, reportBox, prxMbService;
    function renderReport() {
       PP.ImagePath = "../build/img/";
       PP.ScriptPath = "../build/"; // path to builds
       PP.CSSPath = "../build/";
       PP.resourceManager.setRootResourcesFolder("../resources/"); //path to resources folder
       PP.resourceManager.setResourceList(['PP', 'Metabase', 'Regular', 'VisualizerMaster']);
       PP.setCurrentCulture(PP.Cultures.ru); //language settings for resources
       var waiter = new PP.Ui.Waiter(); //establish repository connection
       metabase = new PP.Mb.Metabase({
           PPServiceUrl: "PPService.axd",
           Id: "WAREHOUSE",
           UserCreds: { UserName: "user", Password: "password" },
          //the Waiter component is displayed at the beginning of the repository request
           StartRequest: function () {
               waiter.show();
           },
           //the Waiter component is hidden after repository request is finished
           EndRequest: function () {
               waiter.hide();
               //all requests are deleted from cache after request is finished
               metabase.clearCache();
           },
        //in case of error, error message is displayed
        Error: function (sender, args) {
            alert(args.ResponseText);
        }
      });
     metabase.open(); //open repository
     prxMbService = new PP.Prx.PrxMdService({ Metabase: metabase }); //create a service for working with regular reports
     prxReport = prxMbService.open(3275); // open regular report by key;
     var imgPath = "../build/img/"; // path to icons folder
     // create the ReportBox component
     reportBox = new PP.Prx.Ui.ReportBox({
         Source: prxReport,
         Service: prxMbService,
         ParentNode:document.body,
         ImagePath: imgPath,
     });
    };
</script>

NOTE. The ReportBox component with subscriptions to events of the Report main menu is implemented by means of the PP.App.init component or the PP.Application.PrxModuleObject constructor.

Replace strings of ReportBox component creation in the script to use PP.App.init:

PP.App.init(PP.App.ModuleType.Reporter, { Metabase: {IsMbOpened: true}, Module: {
    Source : prxReport,
    Service : prxMbService,
    },
    ParentNode: document.body });

To use PP.App.PrxModuleObject:

var moduleObject = new PP.App.PrxModuleObject({"Source":prxReport, "Service": prxMbService, "ParentNode":document.body});
reportBox = moduleObject.getReportBox();

3. In the BODY tag add the following code:

<body  onload="renderReport()">
</body>

After executing the example a ReportBox that looks as follows is placed in the HTML page:

See also:

ReportBox