PP.TS.Ui.AggregationWizardView (settings);
settings. JSON object that contains values of component properties.
The AggregationWizardView constructor creates an instance of the AggregationWizardView class.
To execute the example, in the HEAD tag of the HTML page specify links to the following JS files:
PP.js.
PP.Metabase.js.
PP.Express.js..
PP.TS.js.
Add the following code to ensure that the example is displayed correctly in different browsers:
<script type="text/javascript"> if (window.devicePixelRatio == 2) // Retina PP.scriptManager.loadStyles(["../build/PP.retina.css", "../build/PP.App.retina.css", "../build/PP.Express.retina.css", "../build/PP.TS.retina.css", "../build/PP.Metabase.retina.css"]); else if (PP.IsIE && PP.IEVer < 8) // Old IE PP.scriptManager.loadStyles(["../build/PP.css", "../build/PP.App.css", "../build/PP.Express.css", "../build/PP.TS.css", "../build/PP.Metabase.css", "../build/PP_IE7.css"]); else // All other PP.scriptManager.loadStyles(["../build/PP.css", "../build/PP.App.css", "../build/PP.Express.css", "../build/PP.TS.css", "../build/PP.Metabase.css"]); </script>
The workbook with the 5183 key should also be available.
In the <body> tag as the value of the onLoad attribute specify name of the function executed after page body loading is finished:
<body onselectstart="return false" class="PPNoSelect" onload="Ready()"> <div class="PPSlidePanel LeftSided PPWorkbookSlide PPC"> <div class="PPNavigationBar PPC PPTSNavBread" style="width: 302px;height: 400px;"> <div class="Layout"> <div class="PPNavItm PPC"> <div class="PPNavItemView"> <div class="PPScrollBox PPC"> <div class="PPScrollContent"> <div class="PPNavItemContent"> <div class="PPPanelContent" id='example' style="width: 250px;height: 400px;"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body>
At the end of the document insert code to set styles to the document.body node, which correspond to the client's operating system:
<script type="text/javascript"> PP.initOS(document.body); </script>
In the SCRIPT tag add the following script:
<script type="text/javascript"> // Determine language settings for resources PP.setCurrentCulture(PP.Cultures.ru); // Declare variables var ctrl; function Ready() //body load event handler { waiter = new PP.Ui.Waiter(); 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(); var tsService = new PP.TS.TSService({ Metabase: metabase }); var key = 5183; var wbk; tsService.openDocument(key, onFirstOpened); function onFirstOpened(sender, args) { var wbk = args.Workbook; //Create a view instance of aggregation parameter panel ctrl = new PP.TS.Ui.AggregationWizardView({ Source: wbk, IsRTL: False }); //Add "example" to DOM node ctrl.addToNode("example"); console.log("Set state of the AggregationWizardView component"); var tsMethod =({interpolate:{type: "Repeat"}}); ctrl.setCurrentState(tsMethod); console.log("Output the current state to the console"); var currentState = ctrl.getCurrentState(); console.log(currentState); console.log("Get aggregation type by time"); var methodType = ctrl.getMethodType(tsMethod); console.log(methodType); } } </script>
After executing the example the HTML page will contain the aggregation parameters panel, that looks as follows:
The browser console will show JSON object that contains state of the AggregationWizardView component, and type of time aggregation.
See also: