Create Fiori Application with Fiori Elements and Local Annotation Modeler without JavaScript coding for UI Elements

Introduction to Fiori Elements –

• SAP Fiori Elements are libraries which are built on top of SAP UI5 and provide designs for UI patterns and predefined templates.
• Fiori Application development involves Metadata driven approach which means creating application based on OData service and Annotations and requiring no or less JavaScript UI coding.
• List of predefined templates
  • List Report Pages — (In this blog, you will find more details about it)
  • Object pages
  • Overview Pages (OVP)
  • Analytic List Pages (ALP)
• Annotation for OData service can be created by means of any one of following ways.
  • CDS view Annotation – Create Metadata Extension for CDS View and extension will have all UI Annotation for Fiori Element.
  • Local Annotation – In Web IDE full stack, we can create Local Annotation file in UI5 project folder (more details are given below)

List Report Pages Element

The list report allows the user work with a large list of objects. It combines powerful functions for filtering large lists with different ways of displaying the resulting item list. List Report page usage the “Object Pages element” to display the details of a single Object which selected from list.

List Page

Detail Page (which is nothing but Object Page Element)

Let’s start the development for List Report.

To create the List report Pages, go to Web IDE Full Stack and right click on WorkSpace and then select New –> Project from Template

Then in popup screen, select ‘SAP Fiori Elements’ in category and then select ‘List Report Application’.

On next and give the Project Name and Title and then on Next and select ABAP System to get the OData Service.

Click on Next and select the Metadata file from OData Service.

Click on next and give the entity type name in OData Collection as below.

Click on finish. After that a new Project gets created and right click & run the application.

To get the selection field and columns for list, we will create local annotation file.

Right click on webapp and create a new folder ‘annotation’ and into it add new annotation file.

Open newly created annotation file which will open in Annotation Modeler and then click on ‘+’ for local annotation and in new popup, search for selection and select ‘SelectionField’.

Now will add items for UI.Selection to get the selection fields.

Now will add Columns to List. For that again click on ‘+’ for local annotation and in popup screen select ‘LineItem’ and this will add ‘UI.LineItem’ annotation. Into it, add columns which are going to display.

Save the changes and run the app again and above mentioned column should be display in Content section.

Now we will configure Detail page(Object Page Element) which should display on any records/object get selected from list and display some details about selected object.

Firstly we will display the Header Data for detail page. For which, we will use annotation call as ‘HeaderFacets’. But before to that, add annotation ‘UI.Identification’ and into it we will add data field which are going to display in header.

Adding the data fields..

Now add this identification to HearderFacets. For that add Refence Facet in HeaderFacts and then add above identification annotation.

Similarly, we can add more details to header section of detail page. I have added two reference facets ‘Product Header Details’ & ‘More Details’. Save the changes and rerun the application.

Now we will add data for details section of Detail Page. For that, will add ‘UI.Facet’ and into it add data field similarly to ‘HeaderFacet’.

In below screen, we will add another facet to display data in different section.

Save the changes and rerun the application. Two Facets will appear in details section of detail page ‘General Information’ & ‘Technical Information’.

We can also add different section to each facet with the help of ReferenceFacet. Just add another reference facet with label under the collection facet.

Conclusion : With the help of local annotation, we can add/modify the UI element without using any JavaScript code.

There are many things which we can achieve and explore with ‘Local Annotation’ and make our application more user friendly.

Thanks for reading this blog. Feedback, questions and comments are most welcome.

Regards

Sarvesh Dev Jaiswal