SAP FIORI ELEMENT: List Report For Beginners
Yet another article to build List Report (SAP FIORI ELEMENT) .
Prerequisites: Make the below destination in hanatrial.
Make a new Project from Template. Select “List Report Application“.
Mention Project Name, Title, Namespace, Description”.
Bind Northwind Data from “Service URL”. Click on Test to see if your data is coming properly.
Leave Annotation Selection section blank.
Mention below details in Template Customization.
Click on Finish.
Your application structure should be coming up as below.
Make “annotations” folder in webapp.
Right Click on “annotations” folder and Create “Annotation File”
Select Annotation File from the dialog box
Click on Next, then Finish.
Application tree structure should be as below.
Run the application with flpSandbox.html
Your application will come as tile, with Title and Description as given in Point 3.
Click on Tile and screen will look as below.
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.
Click on Go. And this is how data will look like.
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.
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”
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
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?
Yes Sure !!!
Adding blog to wiki collection would be highly appreciated !!!
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?
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?
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
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.
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!
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.
The issue is resolved by Ramesh Kumar's suggestion above-
by adding “useBatch”: false in manifest.json as below.