Understanding possibilities and limitations when working with Fiori Elements
Since I started my series of articles about Fiori Elements I’ve been receiving different queries from our community asking about the possibilities and limitations when working with Fiori Elements.
I remember when I started to learn this subject (back in 2017) I used to debug the standard codes to understand what kind of options were available to configure my application in the way I needed, usually checking the expected configurations in the manifest.json and annotation.xml.
Note: If you want to understand how this debugging process works you can find an example in my first blog: Create your own custom card in a SAP Fiori Overview Page.
Nowadays the documentation around Fiori Elements is pretty extensive and you can always find all the available options through SAP official guides and documentation.
In this article I’m going to share some tips from my current research methodology and try to help you to find all the technical information you need to solve your queries in the future.
The process is pretty simple, just follow these steps:
SAP Fiori Design Guidelines
The first step is always a quick search in the Fiori Design Guidelines to understand possibilities and limitations around the Fiori Element selected for your project.
Here you have detailed information about each one of the templates and explanations about the way your application should behave. The focus of this documentation is the user experience and how the layout can be adapted to meet your objectives.
These are the official pages for the current Fiori Elements:
SAP Help Portal
After understanding the layout perspective you should search about the technical information and how to configure and code your application, the SAP Help Portal contains a dedicated section for this subject called Developing Apps with SAP Fiori Elements. Here you can find information about all the Fiori Elements available (including the recently added Worklist template).
These are the official links:
Applying these concepts in a real scenario
Let’s take for example the Analytical List Page, if you want to understand how to configure your application you’ll find the structure of this template in the design guidelines and understand that we have three main sections:
- Title Area
- Filter Area
- Content Area
Analysing carefully each one of these sections you’ll discover that you can:
- Configure KPIs in the Title Area
- Configure Visual Filters in the Filter Area
- Configure a Chart and Table in the Content Area
Moving to the next step, just search by “Analytical List Page” in the SAP Help Portal and read about the configuration available in the Descriptor Configuration (manifest.json) and the detailed explanations for each one of the main sections (Title, Filter and Content).
With this information in mind you can find all the relevant technical information for all the Fiori Elements available and explore diverse options to enrich your project.
Thank you for the tricks about where to find good SAP Fiori Elements Documentation! Content on the portal about this has been improved significantly!
Thanks mate!
I agree with you. The content is getting better over time, there is a huge improvement compared to last year.
Cheers,
Felipe Rodrigues
Hi Felipe de Mello Rodrigues,
thanks for your helpful blogs. Unfortunatly there are still some annotation documentation missing, especially for setting annotation in a client annotation file when the odata source is not SAP Gateway. Although some smart Controls do now have an annotation entry in SAPUI5, there are still gaps, eg. for the value help of a Smart Field. Also for some annotations only the metadata.xml version is given and not the version for the Annotation XML eg. at https://sapui5.hana.ondemand.com/#/topic/3cdebeebb04b4205908140242c9d6817 .
Or have I just not yet found the place where this is documented?
Thanks,
Wolfgang
Hi Wolfgang Röckelein,
The annotations are also available in the SAP Help Portal, check the example below:
Objective: Create a KPI Tag in the Title Area of an Analytical List Page.
1. Open the link Creating Key Performance Indicator Tags.
2. The initial page shows a graph with the configuration steps, Descriptor Settings and the correspondent annotations (SelectionPresentationVariant, PresentationVariant, DataPoint).
3. Press one of the blue boxes to open the detailed documentation about the annotation with configuration samples.
Hope this information helps.
Cheers,
Felipe Rodrigues
As I said, these information are missing eg for a smart field.
Thanks Felipe - well put as always! I've added it to the Fiori elements wiki https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements
Thanks Jocelyn! 🙂
Hi Felipe,
Thanks for you blog. I woul add another tip which is (in my opinion) very important, is the version of SAPUI5 documentation.
To do so : http://ui5.sap.com/versionoverview.html
Then find the correct version and go to the help : https://ui5.sap.com/1.52.11
Kind regards,
Joseph
Hi Joseph,
Thank you for the contribution.
Cheers,
Felipe