Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

Configuring Multiple Views Using Single Table Mode

Objective

After completing this lesson, you will be able to configure several table views using single table mode in the list report

Multiple Views Using Single Table Mode

By default, the list report contains one table displaying the data for one business object.

For more complex scenarios you may need to provide multiple views of a table displaying one business object. Each view can display different pre-filtered states.

Technically, the UI contains just a single table instance with one table toolbar. Table-level view management is also available, but Fiori Design Guidelines strongly advise against it. For more information, see List Report – Content Area.

A segmented button is used to switch between the views. If more than three views are present, selection control is shown instead.

You can enable the display of the number of total rows in the view by adding the showCounts setting to the manifest.json file. For more information, see Defining Multiple Views on a List Report Table - Single Table Mode.

You can either use Configure Multiple Views guide from Guided Development for step-by-step instructions or the Page Editor to support you in creating multiple views.

Create Multiple Table Views Using Single Table Mode

To make a list report table easier to navigate, you can create different views. When a view is selected, only entries that meet the parameters defined in the view will be displayed. As this is one table with different filters, it is known as single table mode.

In this exercise, you will create three table views based on Travel Status: Open, Accepted and Canceled.

Task Flow

In this exercise, you will first define the @UI.SelectionVariant annotations for the three views. Then, you will add these annotations as quick variant selection paths using the Page Map. It will add these annotations to the manifest.json file. Finally, you will check the results.

Prerequisites

You have completed the exercise Add a Contact Quick View to the Table in the unit Configuring the Content of Table Columns (lesson: Configuring Contact Quick Views in a Table). Alternatively, you can check out its solution branch: solution/add-quick-contact-view-to-table.

Watch the Simulation and Perform the Steps

This exercise contains a simulation displaying all the steps. You can follow the simulation with your own trial account.

ExerciseStart Exercise

Steps

Define the@UI.SelectionVariant annotations for the three views.

Open the layouts.cds file in SAP Business Application Studio.

Add the @UI.SelectionVariant annotation with the qualifiercanceled to the Travel target entity. It will select the entries with TravelStatus_code='X', that is, Canceled.

Code Snippet

1234567891011121314151617181920
annotate TravelService.Travel with @UI: {
    SelectionVariant #canceled: {
        $Type           : 'UI.SelectionVariantType',
        ID              : 'canceled',
        Text            : 'canceled',
        Parameters      : [

        ],
        FilterExpression: '',
        SelectOptions   : [{
            $Type       : 'UI.SelectOptionType',
            PropertyName: TravelStatus_code,
            Ranges      : [{
                $Type : 'UI.SelectionRangeType',
                Sign  : #I,
                Option: #EQ,
                Low   : 'X',
            }, ],
        }, ],
    },

Add the second @UI.SelectionVariant annotation with the qualifier open. This will select the entries with TravelStatus_code='O', that is, Opened.

Code Snippet

1234567891011121314151617181920212223
SelectionVariant#open  : {
         $Type : 'UI.SelectionVariantType',
         ID : 'open',
         Text : 'open',
         Parameters : [

         ],             
         FilterExpression : '',
         SelectOptions : [
             {
                 $Type : 'UI.SelectOptionType',
                 PropertyName : TravelStatus_code,
                 Ranges : [
                     {
                         $Type : 'UI.SelectionRangeType',
                         Sign : #I,
                         Option : #EQ,
                         Low : 'O',
                     },
                 ],
             },
         ],
     },

Add the third @UI.SelectionVariant annotation with the qualifier accepted. This will select the entries with TravelStatus_code='A', which means Accepted.

Code Snippet

1234567891011121314151617181920
    SelectionVariant #accepted: {
        $Type           : 'UI.SelectionVariantType',
        ID              : 'accepted',
        Text            : 'accepted',
        Parameters      : [

        ],
        FilterExpression: '',
        SelectOptions   : [{
            $Type       : 'UI.SelectOptionType',
            PropertyName: TravelStatus_code,
            Ranges      : [{
                $Type : 'UI.SelectionRangeType',
                Sign  : #I,
                Option: #EQ,
                Low   : 'A',
            }, ],
        }, ],
    }
};

Close the layouts.cds file.

Add these annotations as quick variant selection paths.
1. Select Webapp >Show Page Map.
2. Add the annotation paths for Open, Accepted, and Canceled travels.
Check the results.
1. All three annotation paths now appear in the Quick Variant Selection.
2. They also have been added to manifest.json.
3. You can now see three buttons in your app: Open, Accepted, and Canceled.

Result

You have learned how to add multiple views using single table mode to the list report.

Note

You can find the solution for this exercise on GitHub.
The solution branch is solution/create-multiple-table-views-single-table-mode.
You can see the code changes compared to the previous branch on GitHub.

Next Steps

For more information, see

Next lesson