Fiori Elements - List Report

SAP Fiori Elements: List Report Part 1

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.

Fiori Elements - List Report
Fiori Elements – List Report (Image courtesy of SAPUI5 SDK)

Anatomy

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

Usage

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.

Prerequisites

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.

Hands-on

So let’s start creating our own list report!

Setup

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.

Project Creation

Right-click on your workspace manager and create a template project.

1 Project from Template
1 Project from Template

You can select the category and SAPUI5 version then click on List Report Application.

2 Template Selection
2 Template Selection

Provide details about your project as specified below:

3 Basic Information
3 Basic Information

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:

/V2/Northwind/Northwind.svc

Click test to load available entities, e.g. orders.

4 Data Connection
4 Data Connection

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.

5 Annotation Section
5 Annotation Section

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.

6 Template Customization
6 Template Customization

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.

7 Initial Project Files
7 Initial Project Files

Initial Run

Let’s run our newly created app.

Initial Run
Initial Run

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.

Fiori Sandbox
Fiori Sandbox

Initial Output

When the app renders, we can now see our list report app.

Empty List Report
Empty List Report

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.

Northwind Service Call
Northwind Service Call

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?

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!

1 thought on “SAP Fiori Elements: List Report Part 1”

Leave a Comment