Show TOC

Using SAP NetWeaver User Interface Services in SAPUI5 ApplicationsLocate this document in the navigation structure

This code example shows how to run a SAPUI5 application in a shell with the settings of the user who is currently logged on, like language, date, time and number formats, and theme.

SAP NetWeaver user interface services reads the user settings from the back-end system and provides them to the SAPUI5 application.

The following code example shows how you can implement this:

<!DOCTYPE html>
<!-- Copyright (c) 2013 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 SAPUI5 Application Using SAP NetWeaver User Interface Services</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">
    </script>

    <script  type="text/javascript">
      "use strict";
      /*global jQuery, sap */

      sap.ui.getCore().attachInit(function () {
        jQuery.sap.includeStyleSheet("./styles/override_sapui5_styles.css");

        //TODO add your application code here!
      });
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="canvas"></div>
  </body>
</html>

The first step is to include shell.js before the SAPUI5 bootstrap. This is necessary because shell.js hooks into SAPUI5's bootstrap process, retrieves the user's settings from the back-end system, and applies them to SAPUI5 just before the bootstrap finishes. This makes sure that all files that depend on these settings, like translatable texts or style sheets, are loaded only once, with the right settings.

The next step is to make sure that your application code does not run before SAPUI5's core has been initialized. Use sap.ui.getCore().attachInit() for this purpose. This approach makes sure that all objects that depend on user settings, like date, time, or number formats, are created with the user's preferred format (because they are not created before these settings take effect).

This bootstrap sequence has a side effect: If you want to override style classes, you cannot do this by including your stylesheets directly from the HTML page. This is because the standard SAPUI5 stylesheets are included after the page has loaded completely. If you want to include your own stylesheets, you can use jQuery.sap.includeStyleSheet() as shown in the code above.

Note

Including this file automatically performs domain relaxation (in the same way as Web Dynpro) and there is no way to influence its behavior. In most cases this is exactly what you need.

Note

If you analyze your application's performance, note that retrieving the user's settings from the back-end system requires an HTTP GET request. This request takes place in parallel with the SAPUI5 bootstrap (which typically is cached) and sequentially before all requests that are sent by the application.