Complete Table

SAP Fiori Elements: List Report Part 2

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.

Prerequisite

Before continuing on this post, make sure you check out part 1 of this series. You can also download the source code on GitHub and continue with me on this blog post.

Recap

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
Table Ouput
Table Ouput

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”.

Annotation File Creation
Annotation File Creation

Enter a filename for your annotation file, then click Next and Finish.

Annotation File Creation Settings
Annotation File Creation Settings

The annotation file will be created on your webapp’s directory.

Annotation File Directory
Annotation File Directory

Open the annotation file and the Annotation Modeler will be displayed.

Annotation Modeler
Annotation Modeler

The manifest file is also updated once the annotation file is created.

Annotation Manifest
Annotation Manifest

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.

Add Sub Nodes
Add Sub Nodes

Insert a Line Item subnode to create a column header.

Add Line Item Node
Add Line Item Node

After creating a Line Item, go ahead and create a Data Field.

Add Data Field
Add 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.

Data Field Selection
Data Field Selection

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.

Table with Order ID
Table with Order ID

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:

Run Application

Running the application again will give you this output:

Complete Table
Complete Table

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.

Leave a Comment