Main Function

The function main function provides a local scope for our variables. It is called as soon as SAPUI5 has finished its initialization (see the data-sap-ui-evt-oninit attribute in the sap-ui-bootstrap script tag in the header of the page). The main function executes the first steps.

The contracts and some other scripts have to be required so that they can be used in the page builder. Before you can require modules from SAP NetWeaver User Interface Services, you have to specify their location.

  // 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");

This step is specific to each client-side page builder. In the following example, the page ID is retrieved from a URL parameter called "page". If no page ID is specified, a hard-coded value is used.

SAPUI5 offers a helper function to access URI parameters.

The following code illustrates how to use this helper function. It includes a hard-coded default page name. Remember to change or remove the hard-coded default page name.

        var sPageId = jQuery.sap.getUriParameters().get("page") 
                  || "_CHANGE_THIS_DEFAULT_";

In this step you set up the communication to the page building service using the OData protocol. You do not have to worry about OData details. The communication is wrapped in a service facade called sap.ui2.srvc.PageBuildingService.

For more information, see Class sap.ui2.srvc.PageBuildingService.

Upon creation, the service needs the URI of the OData service. Additionally, you should provide a default error handler that will be called each time there is an error in back-end communication.

For simplicity, you can also pass these parameters to a special method for creating the factory (sap.ui2.srvc.createFactory()), which reduces your code to the following:

function defaultError(sText) {
    alert(sText);
  }
  var oFactory = sap.ui2.srvc
        .createFactory("/sap/opu/odata/UI2/PAGE_BUILDER_PERS/",
          defaultError);

In this example, the PBS URI is an absolute path - no protocol, host, or port has been specified. This requires that the OData service communicates with the same server from which the page builder Web application has been loaded. This is necessary for the following reasons:

• All OData requests to the page building service are sent using an XMLHttpRequest.
• The code remains valid when transported to another server, for example, from a development system to a test system and then to a productive system.

Due to protection from cross-site request forgery (CSRF) attacks in SAP Gateway, the first operation issued on this PBS facade must be a read operation. Read operations acquire a token, which has to be sent with every write (create, update, or delete) operation. If you create a page using the factory provided by SAP NetWeaver user interface services, the page data is loaded using the PBS facade implicitly, which ensures that this requirement is met.

The page information is maintained in an object called sap.ui2.srvc.Page. Your task is to create such a wrapper instance and call its load function. This can be achieved easily through sap.ui2.srvc.Factory#createPage():

      function onSuccess() {
      }
      oPage = oFactory.createPage(sPageId, onSuccess);

The factory method createPage requires the ID of the page to be created. It synchronously returns a stub page object that still has to completely load its data from the page building service.

This is done by the load function, which works asynchronously: it sends an OData request for the page data and returns. Later, when the page loading has finished, the success callback handler is called back (in the example above: onSuccess). Similarly, there is another callback if there is an error during page load.

If you provide a success handler to the factory method, the load function will be called automatically. You can supply specialized error handlers for each such call. If you do not provide specialized error handlers, the default error handler from the page building service facade is used (in the example above: defaultError).

This example uses SAPUI5 and its sap.ui.commons.layout.VerticalLayout to arrange the UIs of all CHIP instances in a single column, one below the other. A vertical layout control is created with default properties and placed into the body of the Web page. The reference to this control is passed to the success handler for page loading.

When the page is created, the layout is bound to the success handler using the standard EcmaScript 5 Function.prototype.bind() method.

Note that the onSuccess handler in the example needs access to the SAPUI5 layout control that is used to arrange the CHIP instance's UIs. The page object is provided as an additional parameter when the success handler is invoked by the load function.

      function onSuccess(oLayout, oPage) {
      }

      var oLayout = new sap.ui.commons.layout.VerticalLayout(),
        oPage = oFactory.createPage(sPageId, onSuccess.bind(null, oLayout));

      oLayout.placeAt("canvas");