Skip to Content

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.

To report this post you need to login first.

7 Comments

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

  1. Daniel Hernandez

    Thank you for the tricks about where to find good SAP Fiori Elements Documentation! Content on the portal about this has been improved significantly!

    (1) 
  2. Wolfgang Röckelein

    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 SPA 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

    (0) 
    1. Felipe de Mello Rodrigues Post author

      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

      (0) 
  3. Jocelyn Dart

    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

    (1) 
  4. Joseph BERTHE

    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

    (0) 

Leave a Reply