Executing the example requires an express report with the 65760 key containing a dimension with the 10152 key. To get dimension keys, use the EaxAnalyzer.getDims method. Create an HTML page and execute the following operations:
1. Add links to JS and CSS files in the <head> tag:
PP.js.
PP.Metabase.js.
PP.App.js.
PP.Express.js.
resources.ru.js.
PP.css.
PP.App.css.
PP.Express.css.
PP.Metabase.css.
2. Also, specify a style for elements:
<style type="text/css"> body, html { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } </style>
3. Add a script that creates a component for displaying and changing the current selection:
<script text="text/javascript"> var expressBox, eaxMdService, eaxAnalyzer; PP.ImagePath = "build/img/"; PP.ScriptPath = "build/"; function Ready() { // Specify path to icons folder and to root folder with resources files var IMAGE_PATH = "build/img/"; PP.resourceManager.setRootResourcesFolder("resources/"); // Determine language settings for resources PP.setCurrentCulture(PP.Cultures.ru); // Create a repository connection var metabase = new PP.Mb.Metabase({ PPServiceUrl: "PPService.axd?action=proxy", Id: "Repository", UserCreds: { UserName: "User", Password: "Password" } }); // Open repository connection metabase.open(); // Create a service for working with express reports eaxMdService = new PP.Exp.EaxMdService({ Metabase: metabase }); // Open express report with the 65760 key eaxAnalyzer = eaxMdService.editDocument(65760); var moduleObject = new PP.App.EaxModuleObject({ "Source": eaxAnalyzer, "Service": eaxMdService, "ParentNode": document.body }); expressBox = moduleObject.getReportBox(); window.onresize(); }; // Add function for changing express report selection function openDialog() { // Create the DimSelectionDialog component dimSelectionDialog = new PP.Exp.Ui.DimSelectionDialog({ ResourceKey: "DimSelectionDialog", Source: eaxAnalyzer, Width: 430, Height: 420 }); // Display component with the 10152 dimension key dimSelectionDialog.show(10152); // Refresh component dimSelectionDialog.refreshAll(); } var idTime; // Add a function for changing sizes of the ExpressBox container when page sizes are changed window.onresize = function updateSize() { if (idTime) clearTimeout(idTime); idTime = setTimeout(function () { if (expressBox) { expressBox.setWidth(document.body.offsetWidth - 5); expressBox.setHeight(document.body.offsetHeight - 5); } idTime = null; }, 100); }; </script>
4. In the <body> tag specify name of the function for loading express report as value of the onLoad attribute. Inside the tag add a button, clicking which creates a component for changing selection:
<body onselectstart="return false" class="PPNoSelect" onload="Ready()"> <input type="button" value="Create a dialog box" onclick="openDialog()" /> </body>
5. After the </html> tag insert a code that sets styles corresponding to client's operating system for the document.body node:
<script type="text/javascript"> PP.initOS(document.body); </script>
After executing the example, clicking the Create a Dialog Box button places the DimSelectionDialog component on the HTML page:
See also: