WelcomeScreen_Example

Set links to units and styles files in the <head> tag:

<script src="../Build/PP.js"></script>
<script src="../Build/PP.Metabase.js"></script>
<script src="../Build/PP.App.js"></script>
<script src="../Resources/resources.ru.js"></script>
<link href="../Build/PP.App.css" rel="stylesheet" />
<link href="../Build/PP.Metabase.css" rel="stylesheet" />
<link href="../Build/PP.css" rel="stylesheet" />

Create the script in the <body> tag that creates a welcome screen with the wscreen identifier containing random number of elements:

    <script type="text/javascript">
        //path to resources folder
        PP.resourceManager.setRootResourcesFolder("../resources/");
        //determine the current culture
        PP.setCurrentCulture(PP.Cultures.ru);
        PP.ImagePath = "../build/img/App/";
        // Create a welcome screen
        var wscreen = new PP.Ui.WelcomeScreen;
        // Add the last opened document
        wscreen.addLastDocument("OLAP", PP.Ui.WelcomeScreen.ToolType.OLAP_ANALYSIS, "ObjectId");
        // Add actions
        wscreen.addActions([

        PP.Ui.WelcomeScreen.ActionType.NewDocument,
        PP.Ui.WelcomeScreen.ActionType.OpenDocument
        ], true);
        // List of tools
        adTools = [{
            ResourceKey: "welcomeScreenOLAP",
            ColumnIndex: 1,
            Type: PP.Ui.WelcomeScreen.ToolType.OLAP_ANALYSIS,
            Data: { ModuleType: PP.App.ModuleType.Olap },
        }, {
            ResourceKey: "welcomeScreenReportConstructor",
            ColumnIndex: 2,
            Type: PP.Ui.WelcomeScreen.ToolType.REPORT_DESIGNER,
            Data: { ModuleType: PP.App.ModuleType.Reporter },
        }];

        // Add tools
        wscreen.addToolItems(adTools);
        // Render welcome screen
        wscreen.showCenter();
        // Determine events
        wscreen.ActionSelected.add(function (sender, args) {
        alert("ActionSelected event");
        console.log(args);
        });
        wscreen.DocumentSelected.add(function (sender, args) {
        alert("DocumentSelected event");
        console.log(args);
        });

        wscreen.Exit.add(function (sender, args) {
        alert("Exit event");
        console.log(args);
        });
        wscreen.ToolChanged.add(function (sender, args) {
        alert("ToolChanged event");
        console.log(args);
        });
        wscreen.ToolSelected.add(function (sender, args) {
        alert("ToolSelected event");
        console.log(args);
        });
    </script>

After executing the example the welcome screen is rendered. On interacting with elements the window with event name is displayed, and the console displays event arguments.