Skip to Content

Recently I need to put my own XML view into the application generated automatically by Smart Template. And I already found there is a question posted in forum Smart Templates: Custom View on Object Page asking for how to achieve it. So I write this blog for step by step guide.

Better to read first

It would be good if you have a draft understanding about how your application generated by Smart Template is rendered at runtime. You can read this blog My understanding about how object page in Smart Template is rendered for detail.

I just use an example to demonstrate. In the screenshot below, the red facet is automatically generated by Smart Template. The blue fact is actually rendered by my custom XML view.

/wp-content/uploads/2016/05/clipboard1_942943.png

Data binding in custom view

In my XML view I have a text with label “Long Text” and text bound to path = “to_LongText” and value = “long_text”.

/wp-content/uploads/2016/05/clipboard2_942950.png

What do these two properties mean? In SEGW you can get answer: to_LongText is navigation property and “long_text” is one of the property of the target type Z_I_Order_longtextType.

/wp-content/uploads/2016/05/clipboard3_942951.png

And the content of this property is stored in database table ZORDER_LONGTEXT, field LONG_TEXT, so you finally see the content “Jerry long text” in UI.

/wp-content/uploads/2016/05/clipboard4_942952.png

Register your custom view into manifest.json

You should declare your custom view usage in manifest.json file.

/wp-content/uploads/2016/05/clipboard5_942956.png

The most important part is the line marked in purple since it is responsible to tell framework exactly which postion your custom view should be put.

The naming convention is : <extension point name> + <entity set name> + <existing facet id>.

Let me illustrate them further using example. For the screenshot above, if we translate “AfterFacet|Z_C_Order|GENEJERRY” into human readable sentence, it should be: put my custom view AFTER ( indicated by extension point: AfterFacet ) the automatically generated facet with id “GENEJERRY”. The binding context for custom view is “Z_C_Order”.

For the facet id “GENEJERRY”, you could find from annotation.xml in WebIDE.

/wp-content/uploads/2016/05/clipboard6_942957.png

How we can know which kinds of extension point are available in object page template? Switch your application to debug mode via Ctrl+Alt+Shift+P, refresh the application and you could observe lots of XML fragments are loaded.

/wp-content/uploads/2016/05/clipboard7_942959.png

Among them there is one fragment Sections.fragment.xml which is the place holder for all facets displayed in object page view.

/wp-content/uploads/2016/05/clipboard8_942960.png

Then you can find SAP has defined the AfterFacet extension point with naming convention format “AfterFacet|{entitySet>name}|{path: ‘firstLevelFacet>” which enables partner & customer to include their own view there.

event handling in custom view

In my custom XML view, I have declared a function onPressed to semantic event press, which is implemented in corresponding controller of custom view.

/wp-content/uploads/2016/05/clipboard9_942961.png

The implementation of this press event is to simply increase the counter displayed in custom view.

Source code involved in this blog

I attach all source codes here for your reference.

controller

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("zsandbox.ext.controller.note", {
  onInit: function() {
   }
  },
  onPressed: function() {
      var label = this.getView().byId("Jerry_label2");
      var currentText = label.getText();
      currentText = currentText || 0;
      currentText = parseInt(currentText) + 1;
      var data = { count: currentText};
      label.setModel(new sap.ui.model.json.JSONModel(data),"json");
  }
});
});

xml view

<core:View xmlns:core="sap.ui.core" xmlns:ui="sap.ui.layout" xmlns:layout="sap.ui.layout" xmlns:ca="sap.ca.ui" xmlns="sap.m"
xmlns:form="sap.ui.layout.form" xmlns:crm="sap.cus.crm.lib.reuse.controls" controllerName="zsandbox.ext.controller.note">
<ui:form.SimpleForm id="jerryform" layout="ResponsiveGridLayout">
  <ui:content>
   <Label id="Jerry_label1" text="Long Text"></Label>
   <Text id="Jerry_Text1" binding = "{to_LongText}" text="{long_text}"></Text>
   <Label id="Jerry_label2" text="{json>/count}"></Label>
   <Button id="Jerrybutton" text="Click me" press = "onPressed"></Button>
  </ui:content>
</ui:form.SimpleForm>
</core:View>

manifest.json

/wp-content/uploads/2016/05/clipboard10_942965.png

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Jason Scott

    Hi Jerry, this info of adding your own view is very handy – its what has pretty much blocked me from using the Fiori Elements (Smart Templates) till now…

    However… what about adding new views with other pages and therefore changing the apps navigation – is this all possible as well?

    For example the default Smart Template app in the WebIDE builds a ListReport floorplan with a detail page (using the Object Page floorplan). When if I want to be able to click buttons on the ObjectPage to take me to different (new) pages for further navigation, etc.
    Will I be allowed to do that..? How would we adjust the manifest.json to allow it?

    (1) 

Leave a Reply