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.
-
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
Kiran Israni
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
Hello Jocelyn
Yes Sure !!!
Adding blog to wiki collection would be highly appreciated !!!
Thanks
Kiran
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
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?
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
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
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!
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
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