Creating a Minimalist Page Builder

Context

Displaying a page in a client-side page builder includes the following basic steps:

Procedure

  1. Load the required scripts for SAPUI5 and SAP NetWeaver user interface services.
  2. Determine the name of the page to be displayed.
  3. Initialize the sap.ui2.srvc.PageBuildingService facade for the page building services (PBS).
  4. Create a page object wrapper using sap.ui2.srvc.Factory (based on the the PBS facade) and tell the wrapper to load its data.
  5. Loop over the page's CHIP instances:
    1. Get a SAPUI5 control for each CHIP's UI.
    2. Arrange these SAPUI5 controls on a Web page.

Results

You can find a complete example below. The single steps are described in detail in the following topics.

<!DOCTYPE html>
<!-- Copyright (c) 2012 SAP AG, All Rights Reserved -->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>A Minimalist Page Builder</title>

    <script src="/sap/public/bc/ui2/shell-api/sap/ui2/shell/shell.js"></script>

    <script id="sap-ui-bootstrap"
      src="/sap/public/bc/ui5_ui5/resources/sap-ui-core.js"
      data-sap-ui-evt-oninit="main();"
      data-sap-ui-libs="sap.ui.commons"
      data-sap-ui-theme="sap_goldreflection">
    </script>
  
    <script type="text/javascript">
      "use strict";
      /*global alert, jQuery, sap, window */

      function defaultError(sText) {
        alert(sText);
      }

      function onTitleChange(oTitle, oChipInstance) { 
        oTitle.setText(oChipInstance.getTitle()); 
      } 

      function onSuccess(oLayout, oPage) {
        var aChipInstances = oPage.getChipInstances(),
          i,
          n,
          oChipInstance,
          oTitle,
        for (i = 0, n = aChipInstances.length; i < n; i += 1) {
          oChipInstance = aChipInstances[i];
          oTitle = new sap.ui.commons.TextView({
            text: oChipInstance.getTitle()
          });
          oChipInstance.attachTitleChange(onTitleChange.bind(null, oTitle));
          oLayout.addContent(oTitle)
            .addContent(oChipInstance.getImplementationAsSapui5());
        }
      }

      function main() {
        var sPageId, oFactory, oLayout, oPage;

        // Register the module path for sap.ui2.srvc
        jQuery.sap.registerModulePath("sap.ui2.srvc", 
          "/sap/public/bc/ui2/services/sap/ui2/srvc");

        // Register the contracts
        jQuery.sap.require("sap.ui2.srvc.contracts.bag");
        jQuery.sap.require("sap.ui2.srvc.contracts.configuration");
        jQuery.sap.require("sap.ui2.srvc.contracts.fullscreen");
        jQuery.sap.require("sap.ui2.srvc.contracts.navigation");
        jQuery.sap.require("sap.ui2.srvc.contracts.refresh");
        jQuery.sap.require("sap.ui2.srvc.contracts.searchProvider");
        jQuery.sap.require("sap.ui2.srvc.contracts.url");

        // Require sap.ui2.srvc.factory (for the Factory)
        jQuery.sap.require("sap.ui2.srvc.factory");

        sPageId = jQuery.sap.getUriParameters().get("page") 
          || "_CHANGE_THIS_DEFAULT_";
        oFactory = sap.ui2.srvc
          .createFactory("/sap/opu/odata/UI2/PAGE_BUILDER_PERS/", 
            defaultError);
        oLayout = new sap.ui.commons.layout.VerticalLayout();
        oPage = oFactory.createPage(sPageId, onSuccess.bind(null, oLayout), 
          defaultError);

        oLayout.placeAt("canvas");
      }

      // Set the default error handler.
      // Note: this will be ignored in IE9 while debugging is enabled.
      window.onerror = defaultError;
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="canvas"></div>
  </body>
</html>

The body section is very minimalist. Note that the body has an attribute role="application". This attribute is a hint to the screen reader to treat this HTML page as an application rather than a Web page.