Displaying a page in a client-side page builder includes the following basic steps:
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.