Skip to Content
Author's profile photo Kiran Israni

SAP FIORI ELEMENT: List Report For Beginners

Greetings!!!

Yet another article to build List Report (SAP FIORI ELEMENT) .

Prerequisites: Make the below destination in hanatrial.


 

  1. Make a new Project from Template. Select “List Report Application“.



  2. Mention Project Name, Title, Namespace, Description”.



  3. Bind Northwind Data from “Service URL”. Click on Test to see if your data is coming properly.



  4. Leave Annotation Selection section blank.



  5. Mention below details in Template Customization.



  6. Click on Finish.

  7. Your application structure should be coming up as below.



  8. Make “annotations” folder in webapp.



  9. Right Click on “annotations” folder and Create “Annotation File”



  10. Select Annotation File from the dialog box



  11. Click on Next, then Finish.

  12. Application tree structure should be as below.



  13. Run the application with  flpSandbox.html



  14. Your application will come as tile, with Title and Description as given in Point 3.



  15. Click on Tile and screen will look as below.



  16. Click on Settings  and select few fields to be displayed as Columns. After clicking on Ok, screen will look as below. Note the difference between screen in Point 16 and Point 17.



  17. Click on Go. And this is how data will look like.



  18. Now why we created annotation file. We haven’t implemented any changes there. Click on “annotationsN.xml”, open it in “Annotation Modeler”. Add the following annotations.



  19. Run the application with  flpSandbox.html. Open tile, and you will notice the columns are coming up. You don’t have to select from “Settings”. Moreover, there are filters in “Filter Bar”



  20. Click on Go, and data is displayed. Select the filters to narrow down the result set.



 

That’s All Folks.

 

Feel free to revert, in case any doubts.

Valuable Suggestions and Feedback is welcome.

 

Thanks and Regards

Kiran Israni

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Kiran

      Nice step by step example. We have a lot more in the Fiori elements wiki https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements

      I can also add your blog there if you wish?

      Rgds

      Jocelyn

      Author's profile photo Kiran Israni
      Kiran Israni
      Blog Post Author

      Hello Jocelyn

       

      Yes Sure !!!

      Adding blog to wiki collection would be highly appreciated !!!

       

      Thanks

      Kiran

      Author's profile photo Shaun Smith
      Shaun Smith

      Hi Kiran,

      Thanks, this was really helpful.

      Is there a quick way to change the filter to a dropdown box populated with the data that is returned?

       

      Thanks

      Shaun

      Author's profile photo Pradeep B
      Pradeep B

      When I try to run the FIORI elements app before creating the annotations, the UI loads up.

      On clicking 'Go', I get the following error in browser console.

      GET https://services.odata.org/V2/Northwind/Northwind.svc/$batch 405 (Method Not Allowed)

      What should be done differently in order to fetch data from the Northwind OData service?

      Author's profile photo Kiran Israni
      Kiran Israni
      Blog Post Author

      Hi Pradeep

      Batch operation comes into picture when you are trying to post data to backend.

      You can ignore this error if you are just fetching the data.

       

      Is your data not loading when you click on Go button? Can u also share screenshot of console?

       

      Make sure ur columns before u hit go button.

      Thanks and Regards

      Kiran

      Author's profile photo Ramesh Kumar Ramasamy
      Ramesh Kumar Ramasamy

      Thanks Kiran. This document was a good start for me.

      I got the same error as Pradeep where the data was not loaded after action "Go" which I resolved by adding "useBatch": false in manifest.json as below.

      "dataSource": "mainService",

      "preload": true,

      "settings": {

      "defaultBindingMode": "TwoWay",

      "defaultCountMode": "Inline",

      "refreshAfterChange": false,

      "metadataUrlParams": {
      "sap-value-list": "none"
      },

      "useBatch": false

      }

      Thank you.

      Ramesh

      Author's profile photo Rahul Magdum
      Rahul Magdum

      Hey Kiran, that was wonderful fast but detailed tutorial for List Report, I completed reading this in just couple of minutes and tried as read, and worked perfectly. Thanks!

      Author's profile photo Rashika Singhal
      Rashika Singhal

      Hello Kiran,

       

      I followed the exactly same steps. I have not modified the annotation file yet.

      But i am not getting any data on click of 'Go'.

      Any suggestion that where problem could be.

       

      Regards,

      Rashika

      Author's profile photo Rashika Singhal
      Rashika Singhal

      Hello Kiran,

       

      The issue is resolved by Ramesh Kumar's suggestion above-

      by adding “useBatch”: false in manifest.json as below.

      “dataSource”: “mainService”,

      “preload”: true,

      “settings”: {

      “defaultBindingMode”: “TwoWay”,

      “defaultCountMode”: “Inline”,

      “refreshAfterChange”: false,

      “metadataUrlParams”: {
      “sap-value-list”: “none”
      },

      “useBatch”: false

      }

      Thank you.

      Rashika