Learn JavaScript as ABAP developer Part 5

[johannes_gerbershagen11]

1. Variable declaration


2. Function declaration


3. Concurrency with Promises and async functions


4. Encapsulation with modules


5. Scripting in UI5 applications

Scripting in UI5 applications

In this blog we will discuss scripting in an sample MVC (Model-View-Controller) UI5 application. This application displays a list of plants.

Startup scripts

The startup scripts are embedded in HTML typically in a file called index.html. First the sap-ui-core bundle (bootstrap script) needs to be included. We can get this from the url https://openui5.hana.ondemand.com/resources/sap-ui-core.js.

<script id="sap-ui-bootstrap"

  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

  data-sap-ui-theme="sap_belize"

  data-sap-ui-libs="sap.m, sap.ui.layout, sap.tnt"

  data-sap-ui-resourceroots='{"Quickstart": "./"}'

  data-sap-ui-async="true">

</script>

The additional attributes of the script-tag have the following meanings:

Attribute	Meaning
data-sap-ui-theme	Defines the theme of the UI
data-sap-ui-libs	The UI library used for the controls defined in the view
data-sap-ui-resourceroots	Tells UI5 were to find the modules of additional namespaces not contained in SAP's registry
data-sap-ui-async	Bootstrapping process is run asynchronously

In the current configuration, we use a namespace Quickstart, which is located in the same folder as the file index.html.

The bootstrapping process needs a JavaScript function for application initializing. This function is supplied to the sap.ui.getCore().attachInit function. To bind a UI5 view to a HTML-tag with the id content, we could use the following script:

  sap.ui.getCore().attachInit(function () {

    sap.ui.require([

      "sap/ui/core/mvc/XMLView"

    ], function (XMLView) {

       XMLView.create({viewName: "Quickstart.App"}).then(function (oView) {

         oView.placeAt("content");

       });

    });

  });

This function loads the view located in the file App.view.xml and binds it to the HTML-tag with the id content. To load the dependent module sap/ui/core/mvc/XMLView, the AMD module API is used.

Controller scripts

A controller implements application lifecycle hooks.
Four lifecycle hooks can be implemented:

• onInit(): Called when a view is instantiated and its controls (if available) have already been created; used to modify the view before it is displayed to bind event handlers and do other one-time initialization


• onExit(): Called when the view is destroyed; used to free resources and finalize activities


• onAfterRendering(): Called when the view has been rendered, and therefore, its HTML is part of the document; used to do post-rendering manipulations of the HTML. OpenUI5 controls get this hook after being rendered.


• onBeforeRendering(): Called every time the view is rendered, before the renderer is called and the HTML is placed in the DOM tree.

The following code-snippet contains a controller, which binds a model to the current view.

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"./model"

], function (Controller, ODataModel) {

	return Controller.extend("Quickstart.App", {



		onInit : function () {

		    this.getView().setModel(ODataModel);

		}

        });

});

 

Model

The model contains the data definition, which is bound to the views. Servers often reply in an XML, JSON or OData format. These formats can be easily integrated into UI5 applications.

JSON models

JSON models are created with the "sap/ui/model/json/JSONModel" module. The model needs to be filled with data either with the setData-function or with the loadData-function, which fetches the data from a HTTP-GET-Request. The following module defines a JSON model with a MRPPlants property.

sap.ui.define(["sap/ui/model/json/JSONModel"], function(JSONModel){

	const result = new JSONModel();

	result.setData({MRPPlants: [{MRPPlantID: '1000', MRPPlantName: 'F+E'}]});

	return result;

    });

OData models

OData models are created with the "sap/ui/model/odata/v2/ODataModel" (version 2) or with the "sap/ui/model/odata/v4/ODataModel" (version 4) module. The following model uses the module "sap/ui/model/odata/v2/ODataModel" to consume the ODATA service PP_MRP_COCKPIT_SRV:

sap.ui.define(["sap/ui/model/odata/v2/ODataModel"], function(ODataModel){

	return new ODataModel("/sap/opu/odata/sap/PP_MRP_COCKPIT_SRV");

});

When you run the application, the bootstrap script requests the metadata and the entity-set from the OData service.

Bind the model to view widgets

A property from the model can be bind to a view widget in the view declaration (xml file). In the view below you can see a table, which is bound to the MRPPlants property from the models above. The rows attribute contains the property name in curly braces. The character / refers the root node of the model.

<mvc:View

   controllerName="Quickstart.App"

   displayBlock="true"

   xmlns:mvc="sap.ui.core.mvc"

   xmlns:t="sap.ui.table"

   xmlns="sap.m">

  <App id="app">

    <Page title="Plants">

      <content>

	<t:Table id="plants"

	       rows="{/MRPPlants}">

	  <t:columns>

	    <t:Column width="11rem">

	      <Label text="Plant ID"/>

	      <t:template>

		<Text text="{MRPPlantID}"/>

	      </t:template>

	    </t:Column>

	    <t:Column width="20rem">

	      <Label text="Plant Name"/>

	      <t:template>

		<Text text="{MRPPlantName}"/>

	      </t:template>

	    </t:Column>

	  </t:columns>

	</t:Table>

      </content>

    </Page>

  </App>

</mvc:View&gt;

Conclusion

This blog post should teach the basic scripting skills for developing UI5 applications. In combination with CDS views, which are exposed as OData service, we have a powerful toolchain for mobile and desktop web applications.