Example of Creating the WorkbookBox Component

Executing the example requires a workbook with the 66642 key. Create an HTML page and execute the following operations:

1. Add links to JS and CSS files in the <head> tag:

2. Add a script for displaying a workbook:

<script text="text/javascript">
    PP.resourceManager.setRootResourcesFolder("../resources/");
    PP.setCurrentCulture(PP.Cultures.ru);
    var metabase, source, tsService, settings, workbookBox, metabase, waiter;
    var viewMode = false;
    try {
        PP.resourceManager.ResourcesLoaded.add(function () { PP.setCurrentCulture(PP.getCurrentCulture()); });
    }
    catch (e) { }
    PP.ImagePath = "../build/img/";
    PP.ScriptPath = "../build/";
    PP.CSSPath = "../build/";
    function Ready() {
        // Create loading indicator
        waiter = new PP.Ui.Waiter();
        // Create connection with repository
        metabase = new PP.Mb.Metabase({
            PPServiceUrl: "PPService.axd?action=proxy",
            Id: "p7repository",
            UserCreds: { UserName: "sa", Password: "Qwerty1" },
            StartRequest: function () { waiter.show(); },
            EndRequest: function () { waiter.hide(); },
            Error: function (sender, args) { alert(args.ResponseText); }
        });
        // Open repository connection
        metabase.open();
        // Create service to work with time series
        tsService = new PP.TS.TSService({ Metabase: metabase });
        // Create event handler of document opening
        var onFirstOpened = function (sender, args) {
            // Create class instance of of workbook display
            workbookBox = new PP.TS.Ui.WorkbookBox({
                ImagePath: "../build/img/", // Path to the image folder
                ParentNode: "WorkbookBox", // The DOM parent node
                Source: wbk, // Data source (workbook which data is displayed in the component)
                Service: tsService, // Service to work with time series
                // Set width and height
                Width: (document.documentElement.clientWidth - 0),
                Height: (document.documentElement.clientHeight - 20)
            });
        };
        // Open workbook with the key 66642
        wbk = tsService.editDocument(66642, onFirstOpened);
    };
</script>

3. In the <body> tag, as a value of the onLoad attribute, specify name of the function for workbook loading:

<body onselectstart="return false" class="PPNoSelect" onload="Ready()" style="margin: 0px">
    <div id="WorkbookBox"></div>
    <div id="params"></div>
</body>

After executing the example the HTML page will contain a workbook that looks as follows:

See also:

DHTML Components