Example of Creating the DimSelectionDialog Component

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:

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:

&lt;script text=&quot;text/javascript&quot;&gt;
    var expressBox, eaxMdService, eaxAnalyzer;
    PP.ImagePath = &quot;build/img/&quot;;
    PP.ScriptPath = &quot;build/&quot;;
     function Ready()   {
        // Specify path to icons folder and to root folder with resources files
        var IMAGE_PATH = &quot;build/img/&quot;; 
        PP.resourceManager.setRootResourcesFolder(&quot;resources/&quot;);
        // Determine language settings for resources
        PP.setCurrentCulture(PP.Cultures.ru);
        // Create a  repository connection
        var metabase = new PP.Mb.Metabase({
            PPServiceUrl: &quot;PPService.axd?action=proxy&quot;,
            Id: &quot;Repository&quot;,
            UserCreds: {
                UserName: &quot;User&quot;,
                Password: &quot;Password&quot;
            }
        });
        // 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({ &quot;Source&quot;: eaxAnalyzer, &quot;Service&quot;: eaxMdService, &quot;ParentNode&quot;: 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: &quot;DimSelectionDialog&quot;,
             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);
    };
    &lt;/script&gt;

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:

DimSelectionDialog