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.
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.
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.
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.
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.
xRay Framework (source: http://scn.sap.com/community/s4hana/blog)
In my next blog I will explain rule 7, Always use intent-based navigation to navigate within a app and between apps. An overview of all 10 golden rules can be found here.
- SAP Managed Tags:
2 Comments
