In today’s post will focus on one of the Fiori Elements, List Report template.
The list report allows users to filter a large set of data with a customizable view. Filters can be set to fine-tune the current view and let the user process the items on the list.
The list report can contain the following elements:
- smart filter bar – use to filter the table content
- table toolbar – use for the whole table operations
- smart table – the main table containing the list items
- footer toolbar – optional footer for additional global operations
You can view the in-depth detail of the usage of the list report template from the SAP Fiori Design Guidelines – List Report.
TLDR: SAP tells us that the list report is mainly for a large set of data and doesn’t often need to drill down the details at once.
For us to fully utilize the template, is it recommended that your OData service implements the following operations:
- $count – Use to show the totality of the table items.
- $filter – Use by the smart filter bar and enables a property to be displayed as filterable columns.
- $top and $skip – Use for pagination of large data.
So let’s start creating our own list report!
We will follow the setup below for our project:
- OData Service – Northwind OData Version 2 (will be later enhanced by our local annotation)
- SAP Web IDE
- Local Annotation – will be created inside our project
If you don’t have northwind on your destination, go ahead and add Northwind before proceeding.
Right-click on your workspace manager and create a template project.
You can select the category and SAPUI5 version then click on List Report Application.
Provide details about your project as specified below:
Next is to select Northwind as the service for our project. Select Service URL, then select Northwind destination entry from the drop-down.
Enter the following URI to load the service information:
Click test to load available entities, e.g. orders.
The wizard will ask you to provide the annotation file, but for now, let’s leave this blank since we will generate the annotation in our next series.
Select the Orders entity set as our main collection, this will display the order items to our main table. Then select Order_Details, for our navigation, this will make the item details page display the order details of the selected table item. And lastly, the sub-navigation, which is optional, just to add some details to our next page.
Upon successful creation, you’ll have the project files below.
As you can see there are no views or controllers in our project, this is because the standard template will automatically handle all the control creation and logic for us.
Let’s run our newly created app.
Select the flpSandbox.html on the next popup, this will lead you to the Fiori Launchpad Sandbox. Click on our list report tile to proceed.
When the app renders, we can now see our list report app.
Let’s recap, so far we’ve created the initial project, but didn’t get any output?!
SAP lied to us! They said we don’t have to code anything and there should be output in here!!! args!!
Yes, SAP said there’s no coding needed, but we still need to configure our application so that it knows what to display initially.
Exploring the Application
Let’s explore our initial application. Press the F12 (Developer Mode) on your browser, by the way, I’m using Google Chrome.
Then go to your network tab, you will see that the application itself actually calls the Northwind services in the background.
This proves that the template out of the box is already ready for use. But what are we missing?!
Going back, since we created this project without any existing annotation or configuration that says how it should display, the app displays empty.
So what can we do to show these data on the screen?
You can actually click the gear icon on the table toolbar, and start adding columns you want to display.
After clicking OK you can now see the updated table output.
Ok, that’s cool and all, but we don’t want our user to always start empty and click the gear icon every time they use the application.
For that will continue on my next post on how to add default setup to your list report so that our template behaves we want it.
You can also check out the project on GitHub under part1 branch.
In summary, you have seen how easy it is to generate a template list report project and run it in minutes with zero development needed.
We also learned that there’s still some configuration needed to start our application after the project setup.
If you like this post don’t forget to subscribe and share what you think in the comment section below. See you next time!