This blog post is part 2 of a series of blogs on SAP Fiori Elements: List Report.
In today’s post will focus on the table section of the List Report template. Specifically on how to configure the table and display columns by default.
- List Report Part 1
- List Report Part 2
What we’ve done so far is to create a template project based on List Report wizard. All of our project files are out of the box and we only configured the runtime table to show some columns for display.
Viewing Order Details
In today’s post will continue to configure the list report table and set some default columns for the application.
Our goal is to show some of the details of the order inside the table. The following columns will suffice for our setup:
- Order ID
- Order Date
- Customer ID
- Ship City
- Ship Country
- Shipped Date
- Ship Name
Creating Local Annotations
For us to customize the behavior of the list report, we need to enable metadata-driven configuration on our project, also known as annotations.
Let’s create our annotation file inside our project. Right-click on your “webapp” folder then go to “New” and “Annotation File”.
Enter a filename for your annotation file, then click Next and Finish.
The annotation file will be created on your webapp’s directory.
Open the annotation file and the Annotation Modeler will be displayed.
The manifest file is also updated once the annotation file is created.
The manifest will apply the annotation after the metadata was received from the server. Enabling app-specific settings on your application.
Creating List Report Headers
Using annotations default list report headers can be created. Line Item is the annotation for table headers.
Line Item belongs to a family of classes or definitions, specifically under com.sap.vocabularies.UI.v1. You can read more about vocabularies here.
Start adding subnodes to your annotation file.
Insert a Line Item subnode to create a column header.
After creating a Line Item, go ahead and create a Data Field.
Think of Line Items are your row template, then Data Fields as you column template. There are different types of Data Field you can use, but for the basic purpose of illustration will just use the normal Data Field.
Then pick the metadata property to be displayed on our Data Field. For example, let’s assign the Order Id.
Don’t forget to save the annotation file from time to time. Once you’ve set the data field to OrderID. You can re-run the application to see if the table now displays the OrderID by default.
Completing the List Report Table
From here on you can go back and fill the remaining columns of our application. You annotation file should look like this:
Running the application again will give you this output:
In summary, you can easily customize the list report table by providing templates to line items and data fields. Without any development needed you can create tables in minutes and ready for use.