Best Build Fiori apps rule 6: SAP Fiori UI views are always build as XML views and extension points need to be implemented

At lot of people start developing own SAP Fiori Apps, but missing the programming guidelines to build a future proof applications for the Fiori Launchpad. At the SAP Teched 2015 in Las Vegas and Barcelona I presented my 10 golden rules to build future proof freestyle Fiori Applications based on UI5 SDK 1.28 and higher. In this series I will explain the background of the rules starting with the first golden rule:

Golden Rule 6: SAP Fiori UI Views are always build as XML views and Extension Points need to be implemented

SAPUI5 supports a lot of different possibilities to build your UI Views like JSON, HTML, JavaScript and XML. But you also have the possibility to use UI5 declarative in existing non-UI5 HTML pages. From the start of UI5 you can build views in JSON and JavaScript and you will find a lot of examples within the SDK Controls documentation and on SCN. Also in the first SAP education trainings (SAPX05, WDE300) most of the exercises you built the View in JavaScript.

Afbeelding
 

 

The Fiori Guidelines however tells you that for Fiori Apps you must use XML views. The main reason for this approach is that you built your application following the pure MVC principles. You will be forced to separate code for View logic in XML and the View and Component Controller logic in JavaScript.

The use of XML views also makes your application ready to run in the Fiori Launchpad. Within the UI5 framework, by default, you cannot use the same id for different Views. The UI5 framework will register XML views and its UI controls with a unique ID in the UI5 core. For this reason you can not use sap.ui.getCore().byId(<UI5 control ID>) anymore to find a reference to your UI controls, but you need to use this.getView().byId(<UI5 control ID>) where ‘this’ is a reference to the view Controller of the View.

Afbeelding
WebIDE XML view layout editor (source: sap.com)


Another big advantages of XML views, is its structure. Because of this XML structure and its nodes, it can be interpreted in a generic way and SAP can build tools to generate this structure. In the Web IDE you will find for example a graphical layout editor for building your View. And SAP reuses this layout editor tool to let business people building “Codeless” Fiori Apps.


The XML structures also makes development easier, more readable and it will reduce needed code-lines. By using case-sensitive tags and namespaces you can make a difference between UI controls and its properties. For aggregations, you can also include the aggregation template into the view. By binding the model path to the UI controls will bind the model to the view and with the use of expression binding you even add simple UI logic to your view. ?
The preferred View UI control for XML views is sap.ui.core.mvc.View. This view is optimised for the MVC pattern.

Afbeelding
 Preprocessing Process (source: SAPUI5 SDK documentation)


The control also supports XML preprocessing templates, which makes it possible that a view can be modified during runtime before it is rendered and makes it possible to apply user customisation.

Afbeelding
 Fiori Extensions (source: hcp.sap.com)


Fiori Extension is SAP concept to modify and enhance existing Fiori apps. If you are building own Fiori Apps, you can prepare you application to use the same concept. In this case you need to give your views and UI controls an id. This makes it possible to hide UI controls and replace Views. By adding the tag <sap.ui.core.ExtensionPoint/> to your view, you specify a hook for modifying the view in an extension project using a UI5 fragment. If you placed code between the tags, they will be removed, too when using the fragment. By preparing your application for Fiori Extensions, you also prepare your application that other SAP solutions can use it. The xRay framework for example can guide your users through your application.

Afbeelding
 xRay Framework (source: http://scn.sap.com/community/s4hana/blog)

 


Blogger: Robert Eijpe, SAP Mentor

LinkedIn profiel


connect to innovate belooft heel bijzonder te worden!

Afbeelding

connect to innovate is de plek bij uitstek om ervaringen uit te wisselen, te netwerken en op de hoogte te blijven van de laatste ontwikkelingen.

Samen inspireren. Doe je mee?

Partners VNSG

Afbeelding

 AfbeeldingAfbeelding

Meest gelezen

Het VNSG Magazine

Afbeelding

Het nieuwe VNSG Magazine staat online! 

VNSG Magazine verschijnt 4 keer per jaar. Het is hét vakblad voor alle SAP-gebruikers in Nederland en Vlaanderen.

Juni 2017

Bekijk de nieuwste updates van VNSG bloggers!

  • Mobile app development: comparison of native, -driven (SEAM), hybrid and web-based approaches | Blog Tamas Sziters
  • Altijd veilig achter de SAP-firewall’, is dat wel waar? | Blog Arnoud Roebers
  • Help, wat doen ze met mijn programmeertaal? | Blog Ben Meijs

VNSG blogs

Beïnvloedingsprogramma's

Als klant kun je invloed uitoefenen op SAP Development waardoor jouw software straks nog meer doet wat je wilt.

Lees meer over de mogelijkheden om SAP-oplossingen te verbeteren!

Beïnvloeding van SAP

Internationaal

De VNSG maakt sinds 2007 onderdeel uit van het SAP User Group Executive Network (SUGEN). SUGEN is opgericht om de informatie-uitwisseling en kennisdeling tussen SAP gebruikersgroepen te stimuleren en om de samenwerking met SAP op strategische onderwerpen te coördineren. Het is een netwerk van 21 gebruikersgroepen verdeeld over 6 continenten.

Internationaal