Skip to Content
Author's profile photo Jerry Wang

My understanding about how object page in Smart Template is rendered

I have already been working with Smart template for one month. Since now no frontend JavaScript code for application is generated but instead the template maintained centrally by SAP is used in the runtime, so it might be a little bit difficult for trouble shooting when you meet with issues, for example, the object page is blank after navigation, or some field in object page is empty, and so on.

I tried to explain my personal understanding about how object page is rendered in the runtime. For list report page, the logic is the same. Since I am not expert on smart template, so please kindly point it out if there is something wrong in this blog 🙂

Per my understanding, I will explain the technical implementation of Smart Template as: An XML view with hierarchical XML fragments where Smart Controls works with the help of OData annotation.

Design time

Where do we start to do self-study on Smart Template?

Switch any one of application generated by Smart Template to debug mode using Ctrl+Alt+Shift+P, refresh and you can observe the following XML files are loaded. The Details.view.xml contains the overall definition of object page view.


Have a look at the source code of this xml view file, you can find the object page consists of six building blocks, each block is included in the object page via fragment. This is the reason why you could also see the download of these six fragment files from the above screenshot.


The dedicated facets we see in object page are included in Sections fragment.


So open Sections.fragment.xml.


Finally, open Facet.fragment.xml view:


Till now, the source code of these template files have perfectly explained why you have to define annotations such as LineItem and Identification etc. The annotations you find in the template file work as a contract between Smart Template and developers who consume them. If developers strictly follow the protocol, the whole thing orchestrates well.


How are the above mentioned fragment, extension point and other stuff loaded in the runtime? You should already recognize several tags like with, repeat and if in XML view. How are these tags parsed in the runtime?


Switch to debug mode, in Chrome development tool click Sources tab, Ctrl+O and type “XMLPre”, there will be auto completion for search result. Choose XMLPreprocessor-dbg.js:


Since the details.view.xml is loaded in the runtime into memory as a DOM and parsed via depth-first search recursively, this is so called “Pre-Process” as indicated by the file name XMLPreprocessor-dbg.js itself. In this file you can find a big SWITCH CASE statement and each tag is handled in different case statement accordingly.


For example, in XML file it is defined that the template:repeat operation will only be performed if the test defined by formatter sap.suite.ui.generic.template.js.AnnotationHelper.hasBreadCrumbs has returned true.


In the runtime, the evaluation would be debugged as below:


The callstack could be found below:


You can find detail log about this pre-processing result in Console tab of Chrome development tool with filter “XMLPreprocessor”.


How to get pre-processing result

Set a breakpoint on line 187 of XMLView-dbg.js, and the XML source code is just stored in variable this._xContent.



If you open converted xml file, you can find that all place holders via “{ } “defined in template file like Details.view.xml are now filled with actual value provided by annotation.


Annotation datasource

In manifest.json file data source is defined which consists of two parts: the remote one coming from backend and the local one, annotations.xml contained in project folder:


This is the reason in Network tab you can observe there are two sequential http requests for the remote one and local one.


This is an example of remote annotation:


This is an example of local annotation:


OData metadata merged with Annotations

The two annotation data sources will be merged with OData metadata in line 187 below:


All subsequent processing are done based on this MERGED data model.

Hope this blog can shed light on your smart template related trouble shooting process.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Tim Molloy
      Tim Molloy

      Hi! Thanks for posting this!

      I am trying to determine how to add an extension to a UI Line reference Facet on the Object page. I am using the 'extensions' in the manifest.json file. I want to add a text button at the list header. I have used this example (change price):

      To get this to appear on the top of the ListReport (first page), but I am unsure of the namespace to use to specify to put the text on the ObjectPage reference facet.

      I am using this:


      However, I suspect it should be more specific to the reference facet I want to extend, yes? I am unsure of the syntax/namespace to use.

      Any help would be appreciated!



      Author's profile photo Sitakant Tripathy
      Sitakant Tripathy


      Hi Jerry,

      I chanced upon this blog and I must say am a big fan..:). People sometimes find me crazy when I try to delve into frameworks and raise questions which are outside the business case/scope.

      I recently started my journey into UI5 and Fiori apps from a technical perspective and created my first app with the Northwind services. I used the ListReport template and could create the entire app with just the Annotation configurations and without a single line of code on UI. That was amazing but then got stuck upon the question to what was it in the framework that took my annotation XML file and rendered that as HTML scripts. This blog of yours did nail that question.

      The industry is generally satisfied with answers to how to guides but you tend to delve deeper into why in your blogs which I find sheer brilliance. Keep at it mate 🙂