PP.TS.Ui.ParametersPanel(settings);
settings. JSON object that contains values of component properties.
The ParametersPanel constructor creates an instance of the ParametersPanel class.
To execute the example, create an HTML page and perform the following operations:
1. Add links to the following CSS files:
PP.css.
PP.Express.css.
PP.TS.css.
PP.Metabase.css.
Add links to the following JS files:
PP.js.
PP.Metabase.js.
PP.TabSheet.js.
PP.Express.js.
PP.TS.js..
The workbook with the 5183 key should also be available.
2. In the SCRIPT tag add the following script:
<script type="text/javascript"> // Determine language settings for resources PP.setCurrentCulture(PP.Cultures.ru); // Declare constants var KEY = 5183; //document key // Declare variables var waiter, metabase, tsService, wbk, parametersPanel, navbar; //Function for getting handler functions //Gets additional information as a parameter that is displayed to the console on calling the handler. //It can be, for example, a string containing 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 loading indicator waiter = new PP.Ui.Waiter(); // Create repository connection metabase = new PP.Mb.Metabase( { Id: "pmart_ms", UserCreds: { UserName: "sa", Password: "H88cp229" }, StartRequest: function () { waiter.show(); }, EndRequest: function () { waiter.hide(); }, Error: function (sender, args) { alert(args.ResponseText); } }); // Open repository connection metabase.open(); // Create a service for working with time series tsService = new PP.TS.TSService({ Metabase: metabase }); tsService.openDocument(KEY, onFirstOpened); // Document open event handler function onFirstOpened(sender, args) { wbk = args.Workbook; //workbook // Create instance of parameters panel class parametersPanel = new PP.TS.Ui.ParametersPanel({ Source: wbk, //data source //properties panel group identifier GroupName: PP.TS.Ui.PropertyGroups.Parameters, ResourceKey: "WorkbookPropertyParameters", //resource key ViewType: PP.Ui.NavigationItem, IsHeaderControlVisible: false, ControlChanged: PP.Delegate(onDummyActionFactory("outputSerieWizardView ControlChanged"), this) }); navbar = new PP.Ui.NavigationBar({ ParentNode: "example", Width: 400, Height: 800, VisibleAreaHeight: 810, ShowBorders: true, IsAlwaysExpanded: false }); navbar.addItem(parametersPanel); console.log("Set workbook, which data is displayed in component"); var value = args.Workbook; parametersPanel.setSource(value); } } </script>
3. In the <body> tag as the value of the onLoad attribute, specify name of the function executed after page body loading is completed:
<body onselectstart="return false" class="PPNoSelect" onload="Ready()" style="margin: 0px"> <div id='example'></div> </body>
4. At the end of the document insert a code that sets styles corresponding to client's operating system, to the document.body node:
<script type="text/javascript"> PP.initOS(document.body); </script>
After executing the example an instance of the ParametersPanel class instance is placed on the HTML page. Data of the workbook with specified key is set for this instance.
See also: