Example of Creating the HtmlExportDialog Component

To execute the example, create an HTML page and execute the following operations:

1. Add links to the following CSS files: PP.css, PP.Express.css, PP.Metabase.css.

Also add links to the following JS files: PP.js, PP.Metabase.js, PP.Express.js, and resources.ru.js.

2. In the <head> tag specify style for the elements:

<style type="text/css">
body, html
{
    height: 100%;
    width: 100%; 
    margin: 0;
    padding: 0;
    overflow: hidden;
} 
</style>

3. Then in the <head> tag add a script that creates a dialog box to export an express report to an HTML file:

<script type="text/javascript">
    var metabase, eaxAnalyzer, eaxMbService, settings, expressBox, waiter, saveAsD, openD;
    var IMAGE_PATH = "../Debug/img/";
    var info, eax;
    function Ready() {    
        // Set locale for resources
        PP.setCurrentCulture(PP.Cultures.ru)    
        // Specify path to the root folder containing resources files
        PP.resourceManager.setRootResourcesFolder("../resources/");    
        waiter = new PP.Ui.Waiter();    
        // Create repository connection
        metabase = new PP.Mb.Metabase({        
            ExportUrl: "PPService.axd?action=export",
            ImportUrl: "PPService.axd?action=import",
            PPServiceUrl: "PPService.axd?action=proxy",
            Id: "WAREHOUSE",
            UserCreds: {
                UserName: "user",
                Password: "password"
            },
            StartRequest: function () {            
                // On requesting metadata show component of the PP.Ui.Waiter type
                 waiter.show();        
            },
            EndRequest: function () {            
                // After requesting metadata hide component of the PP.Ui.Waiter type
                waiter.hide();        
            },
            Error: function (sender, args) {            
                // In case of error display error description
                alert(args.ResponseText);        
            }    
        });    
        // Open repository connection
        metabase.open();    
        // Create a service for working with express reports
        eaxMbService = new PP.Exp.EaxMdService({
            Metabase: metabase
        });    
        // Open express report with the 108 key 
        eaxAnalyzer = eaxMbService.editDocument(108);
    }
    // Function for creating and displaying export dialog into HTML file
    function showExpDialog() {    
        //Create export dialog
        htmlExpDialog = new PP.Exp.Ui.HtmlExportDialog({        
            CaptionIcon: "html.png"    
        });    
        // Handle OK button click event
        htmlExpDialog.OkButtonClicked.add(showExpDialogOkClick);    
        // Display dialog
        htmlExpDialog.show();
    }
    // OK button event handler
    function showExpDialogOkClick(sender, args) {    
        alert('Export to HTML (row height autofit - ' + args.exportData.autoHeight + ')');    
        // Export to HTML
        eaxMbService.Export(eaxAnalyzer, args);
    }
</script>

4. In the <body> tag as the value of the onLoad attribute specify name of the function that loads an express report document, inside the tag place the button clicking which creates an export dialog box:

<body onselectstart="return False" class="PPNoSelect" onload="Ready()">
    <!-- Button, which clicking creates a dialog for export to XLS -->
    <input type="button" value="Open export dialog" onclick="showExpDialog()" />
</body>

5. 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 clicking the Call Export Dialog button places the HtmlExportDialog component in the HTML page:

Clicking the OK button shows a dialog box that saves a file exported to HTML.

See also:

HtmlExportDialog