XML Templates - Multiple Contexts

[settipalli_raj]

XML templates in SAPUI5 allow us to use a view as a template. Template basically as name suggests, is create once and use many times. Preprocessing instructions are powerful and enable us to create UI5 control tree dynamically and render view differently depending on meta data. For example 'if' instruction can be used to create sections of views or not create them depending on data model, 'repeat' can be used to create variable number of UI components.

There is an example on how to use template in UI5 SDK documentation. This basically gives an idea on how a template can be constructed using meta contexts from OData meta model. This example has one meta context and meta model being supplied to XML preprocessor.

But should that be limited to one context and one model?

Multiple Contexts

Template preprocessor can actually accept more than one context and model at a time. By having more than one context at preprocessing stage provides greater flexibility in creating the template so it can become more versatile.

Here is an example of creating a template view where in more than one context/model are available to preprocessor.

var oModel1 = sap.ui.model.odata.v2.ODataModel("Service1 URL");

var oMetaModel1 = oMdel1.getMetaModel();



var oModel2 = sap.ui.model.odata.v2.ODataModel("Service2 URL");

var oMetaModel2 = oMdel2.getMetaModel();

Two OData services and oMetaModel1 and oMetaModel2 are meta models of these two different OData models. Assuming sPath1 and sPath2 are variables for two entities set names in each of these models:

var oTemplateView = sap.ui.view({

      preprocessors: {

        xml: {

          bindingContexts: {

            meta1: oMetaModel1.getMetaContext(sPath1),

            meta2: oMetaModel2.getMetaContext(sPath2)

          },

          models: {

            meta1: oMetaModel1,

            meta2: oMetaModel2

          }

       }

     },

     type: sap.ui.core.mvc.ViewType.XML,

     viewName: "my.app.namespace.Template"

});

Above code snippet is from the SDK documentation except that there is a second property "meta2" to both 'bindingContexts' and 'models' object parameters to XML preprocessor. Assuming sPath1 and sPath2 are pointing to entities as explained in SDK documentation.

Make sure that metadata for both models is loaded by the time this code is executed. Check loaded function of ODataMetaModel object. Also check loadMetadataAsync to make meta data loading synchronous if that's more suitable.

Preprocessor now knows about two contexts which can be used in controlling how template should be processed to create UI5 Control tree. Here is an example.

<mvc:View

       xmlns="sap.m"

       xmlns:core="sap.ui.core"

       xmlns:form="sap.ui.layout.form"

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

       xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1">

  <!-- Check model1 property -->

  <template:if test="{= ${meta1>name}==='MyEntity1'}">

     <template:then>

       <!-- Meta1Property type is GUID -->

       <template:repeat list="{meta2>property}" var="Prop">

         <!-- Use 'Prop' to create UI elements as required -->

       </template:repeat>

     </template:then>

     <template:else>

        <!-- Meta1Property Type is not GUID -->

       <form:SimpleForm>

         <!-- Create form elements here, may be static or use meta1/meta2 meta model -->

       </form:SimpleForm>

     </template:else>

  </template:if

</mvc:View>

First IF condition is using well known expression binding to check if meta data of model1 entity name is "MyEntity1". If true, pre-processing instruction 'repeat' is executed, else a SimpleForm element is created.

Note that metadata contexts 'meta1' and 'meta2' could be from the same MetaModel, not necessarily be from two different models.

There might be limited scenarios where metadata of one entity from same or different model can be used to control UI5 control tree creation. But I had scenarios where one or more entities from a single model are used in one template. Hope to write more on this soon.

SAPUI5 version used is 1.38.14.