Skip to Content

To develop fiori application using smart templates having odata service as backend. You may have annotations on backend(preferably CDS or in your gateway project) or frontend.

Backend annotations can be overwritten in frontend or you can add new annotations using annotation modeler plugin available in Sap Web IDE.

Let’s use northwind odata service which does contain any pre-set annotations from backend to create Fiori list report application.

No javascript coding required !!! Little knowledge on annotations is enough to start.

Note: If you are using internal code-fiori SAP WEB IDE. Northwind Odata destination is already available. Skip step 1 and 2

Step 1:

Sign up for a free trial account on SAP Cloud Platform

Step 2:

Create a Destination on SAP Cloud Platform

Step 3:


  1. In the navigation pane (left side), choose Services.
  2. On the Services pane, search for “web ide”.
  3. select SAP Web IDE tile, In the “SAP Web IDE Overview” page click on link Open SAP Web IDE.

Step 4:

Create List Report Application in SAP WEB IDE

  • In the menu bar, select File > New > Project from Template.
  • Under Template selection, select “List Report Application” and click next

Enter Basic Information details as shown below and click on next

Project Name orderSmartApp
Title Manage Order
Namespace com
Description Manage Orders

Under Sources (left side) select service URL and choose “Northwind Odata Service” as a system to connect to a required service.

Enter relative URL “V2/northwind/northwind.svc” in the text field shown below.

Click on Test button to check whether service is available. If you are able to see data in the Service Table, then connection to service is successful, click on Next.

Northwind odata service does not contain any annotations from backend. So the Table is empty. Click on Next

Choose Odata Collection and Navigation as shown below and click on Finish.

New smart template project “orderSmartApp” is created

Project files and structure is available under WEB IDE workspace.

Step 5:

Create Annotation File

  • Right click on webapp folder in the project, select New à Folder

Enter folder name annotation click OK.

  • Right click on annotation folder in the project, select  Annotation File
  • Check file name and service is already filled. Click Next

  • Check whether project folder structure is as shown below.
  • Open annotation.xml file, Double click on it

annotation.xml file opens up with Annotation Modeler UI.

At any point of time, you can check xml code by switching view to code editor which is available in footer bar.

Step 6:

Add annotations using Annotation modeller

List report page contains following areas.

  • Header Title
  • Header content – smart filter
  • Smart table
  • Footer toolbar

To add Smart table using annotations. Choose “Order” in Odata Entity Type dropdown and click on Annotate Button.

Select “Annotations” row in table and click on + (plus button) shown under “Actions” column

  • Pop up opens up listing applicable annotations. Select LineItem (represents smart table in application) and click OK, UI.LineItem annotation is added in the Table

To show initially visible columns in smart table, add DataField as a child to UI.lineItem.

Select UI.LineItem row –> click (+) button and select Datafield under records –> OK

This resolves to first column in LRP app smart table.

Select OrderId in dropdown for UI.DataField value.

Repeat adding UI.DataField for additional columns in smart table.

To add Smart Filter using annotations.

Select “Annotations” row in table and click on + (plus button) shown under “Actions” column. Select “selectionFields” –> press OK

Select UI.selectionFields row and click on (+) button. select item and press OK

Add more Item to add selection fields as required

Step 7:

Run the Application

Select project root folder “orderSmartApp” and click on “Run” icon as shown below.

Click on GO button. Application shows list of orders.

Select any order in table, application navigates to detail page of an order(also known as Object page).

Object page contains three sections i.e snapping header, navigation bar and content area.

Now, let’s add some more annotations to Odata service to see order details in object page

Step 8:

Go to Annotaion Modeler, add UI.DataPoint annotation to create snapping header for Order ID, customer Id and Order Date

Enter value for Qualifier, title and value to show Order ID in header section of object page. Repeat adding UI.DataPoint for customer id and order date as shown in below snapshot.


Run application (step 7) and click on any order in list report. Application navigates to detail page with header section containing customer Id, order id and order date

Step 9:

Lets add annotations to create content area containing order and shipper information.

Add UI.FieldGroup for order information having fields(order id, order date and required date)

Add UI.FieldGroup for shipper information having fields(shipper name, address, city country)

Provide Qualifier “OrderDetails” and “ShipmentDetails”.

Click (+) on each UI.DataField row and add Label.

Enter value for Label.

Select value for all UI.DataField value as shown in below snapshot .

Step 10:

To create navigation area of object page and add content created in above step 9. Add UI.Facet and its children UI.ReferenceFacet as shown below


Step 11:

Run the application (step 7) . List Report and Object Page application is ready.



For more reference on other possible features using annotations, Please refer to standard documentation from SAP


To report this post you need to login first.


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

  1. Francisco Javier Gurbindo

    Hi Vinay. Thanks for your post!

    I’m trying to follow it but i can’t make the content area works. It’s always empty. I don’t know whats wrong.

    DataPoints works fine and I see the information but Facets and Identifications don’t.

    Do you know what I’m doing wrong?

    Thanks in advance.


        1. sudarshan raju

          Hi Vinay,

          Great Blog. Helped a lot.

          Have small question.. without creating annotation file the app will load the smart table as list report where we can customize the fields and filters on the screen itself right?


          1. Vinay Hospete Krishnappa Post author

            Yes. App is loaded with list report without any columns and filters, you can add filters and columns to table on demand using dialogs.

            You need annotations either from backend or in annotation.xml file for object page.

    1. Stefano Cataldo

      Hi, I also had issues with the area. I will open a new comment for telling you how I solve. I only reply to this comment in addition, because this comment is about the topic. So, if cleaning the cache doesn’t help you, feel invited to scroll down all over the comments.


  2. Sayan Subhra Jana


    First of all thanks for the very detailed blog.

    I have an additional requirement to add a Download to Excel button for the list. Can you help with that.

    Also. I notice you have two custom buttons one is + and the other is Details. Could you explain how to add them and in which scenario we can use them.

  3. Harshal Narkhede

    Hi Vinay,


    Nice blog .

    can you please help me on binding data to UI.SELECTIONFIELDS annotaions as no data is coming in  input fields like OrderID or CustomerID.

    Thanks in advance.



  4. Tanveer Shaikh

    Hi Vinay,

    I am trying to build a navigation from List report line item document number to some other app – i.e have document number as link

    Snippet from local annotations  in UI.LineItem-

    <Annotation Term="UI.LineItem">
         <Record Type="UI.DataField">
    <Record Type="UI.DataFieldForIntentBasedNavigation">
         <PropertyValue Property="SemanticObject" String="MySalesOrder"/>
         <PropertyValue Property="Inline" Bool="true"/>
         <PropertyValue Property="Label" String="Manage"/>
         <PropertyValue Property="Action"  String="display"/>

    Doesn’t work. ofcourse I am missing something, but didn’t find any blog/reference/KBA  – Can you please help ? what all changes will be required in mainfest.json ? will this need to extend the list report or this can be done without extension ? Is there any reference/blog available to refer ?

    I am using all local annotations in annotation modeler with xsodata, No ABAP CDS.




    1. Vinay Hospete Krishnappa Post author

      You are using a semantic object “MySalesOrder”.

      Semantic objects are used for role-based navigation within the Fiori Launchpad. A semantic object is defined using the Semantic Object catalog following the naming rules of the virtual data model (VDM). In addition to the definition, a registration needs to be done centrally in U00.

      After creating semantic object then at run time the navigation works in Fiori launchpad.


  5. Stefano Cataldo

    Hi at all,

    yeahhhhh …  I get it 😉 . Thanks to the Autor for the nice tutorial.

    I get some issues with the UI Facets and navigation area (step 10). I use Version: 170330 … and work on webide  provided by SAP Cloud Plattform.

    For resolving the issues I was forced to have one more level on my annotation file. At first I create a UI.Facets, than I crate a UI.CollectionFacet and finally I can have the UI.ReferenceFacet (see screenshots at the bottom). Please notice, that I don’t use language dependent labels (i18n – folder) which is only okay for trainee purpose in my opinion.  Also you may consider to have a look at the tutorials following the link below which explain it much more clear than I. I kindly ask to Autor to be not offended by my comment .. it is not me correcting him.

    Regards, Stefano

  6. Stefano Cataldo

    PS: One question still remain: at the end the label “Oder Information” is smaller then the label “Shippment Info”. Do somebody know why … I don’t expect font size to change in between one view on same headline level :O

    Hmmmm …. I cannot edit my own comment. It said something about I was logged out. It is not possible … however, I made a second comment. Sorry for that.


Leave a Reply