Skip to content

Latest commit

 

History

History
622 lines (400 loc) · 22 KB

unit2.md

File metadata and controls

622 lines (400 loc) · 22 KB

Hands-on exercise for week 3 unit 2:
Enhancing an Analytical List Page

Previous exercise

Hands-on exercise for week 3 unit 1: Creating an Analytical List Page

Video on openSAP.com platform

Enhancing an analytical list page

Introduction

In this unit, you will learn how to enhance the Analytical List Page application created in the previous unit by adding filtering capabilities. In this exercise, you will define the filter area of the Analytical List Page using the guided development tool.

Step 1. Configuring the Compact Filters

The first step you will configure a UI.SelectionFields annotation that is used to display the filter fields in the compact filter bar of the Analytical List Page. For this, you first have to open the guided development tool.

  1. To open the guided development tool right click on the webapp folder.

  2. Click on SAP Fiori tools - Open Guided Development.

  3. To find the guides related to filters, type filter in the search field.

  4. Scroll to the Analytical List Page group and expand the guide Add a new filter field to the Filter Bar.

  5. Click Start Guide.

    This simple guide contains just one step adding a field (UI Selection Fields) to your compact filter bar.

  6. In the field Entity Type, choose your entity type as: BookingType.

  7. In the field Property, choose CurrencyCode as your first column content.

    The code snippet is adjusted accordingly.

  8. Click Insert Snippet.


    The annotation UI.SelectionFields is added to your local annotation file as configured in the code snippet. This file gets opened next to the guided development tool.


  9. The above step is repeated as many as times as needed to add other filters to the filter bar.

    Choose AgencyID and click Insert Snippet.

    Choose AgencyName and click Insert Snippet.

    Choose CarrierID and click Insert Snippet.

    Choose CarrierName and click Insert Snippet.

    Choose CustomerID and click Insert Snippet.

    Choose CustomerName and click Insert Snippet.

    Choose BookingDate and click Insert Snippet.

    Choose BookingDateYear and click Insert Snippet.

    Now we can see the UI.SelectionFields annotation for all the filters is added to your local annotation file as shown in the code snippet below.

    <Annotation Term="UI.SelectionFields">
    <Collection>
        <PropertyPath>CurrencyCode</PropertyPath>
        <PropertyPath>AgencyID</PropertyPath>
        <PropertyPath>AgencyName</PropertyPath>
        <PropertyPath>CarrierID</PropertyPath>
        <PropertyPath>CarrierName</PropertyPath>
        <PropertyPath>CustomerID</PropertyPath>
        <PropertyPath>CustomerName</PropertyPath>
        <PropertyPath>BookingDate</PropertyPath>
        <PropertyPath>BookingDateYear</PropertyPath>
    </Collection>
</Annotation>

  10. When the records for all property are added to your LineItem, click Exit Guide to get back to the list of available guides.

Step 2. Preview the application to view the compact filters

  1. Right click webapp folder.

  2. Click on Preview Application.

  3. Click on start fiori run --open 'test/flpSandbox.html#bookinganalysis-tile'.

  4. To view the application in a new browser tab click Open in the dialog.

  5. The visual filters are set as the default filter mode in the Analytical List Page application. To view the compact filters click (Filter Toogle for compact filters)

  6. To view the chart and table click : Go.

  7. We could now see the Analytical List Page application loaded with the chart and the table data.

Step 3. Configuring the visual filters of type line

In this step, you will configure a UI.Chart, UI.PresentationVariant and Common.ValueList annotations that are used to display the visual filters.

  1. Expand the guide Add a new visual filter in the Analytical List Page group.

  2. Click Start Guide.

  3. Visual Filter Guide(Step 1) - To configure a UI.Chart annotation

    At first, you define a chart to be displayed in the filter bar, using a UI.Chart annotation.

    In the Entity Type field, choose your entity type as : BookingType.

    Enter the following values in the respective fields and click Insert Snippet.

    Field Value
    Chart Qualifier FilterFlightPriceBookingDateYear
    Chart Title Filter FlightPrice by BookingDateYear
    Chart Description Filter FlightPrice by BookingDateYear
    ChartType Line
    Dimensions Property BookingDateYear
    Measures property FlightPrice

    The UI.Chart Annotation is now added to the annotation file.

    Click Step 2
    Note: You can also click Next at the bottom of the guide to go to the next step.

  4. Visual Filter Guide(Step 2) - To configure a UI.PresentationVariant annotation

    In this step, you will reference the chart in a presentation variant so that it could be displayed it in the filter bar.

    Enter the following values and click Insert Snippet.

    Field Value
    Presentation Variant Qualifier PVFilterFlightPriceBookingDateYear
    Chart Reference @UI.Chart#FilterFlightPriceBookingDateYear

    The UI.PresentationVariant Annotation is now added to the annotation file.

    Click Step 3.

  5. Visual Filter Guide(Step 3) - To configure a ValueList annotation :

    In that step, you will define the mapping between dimensions in the visual filter and properties in the objects displayed in the main content, so that clicking on a dimension value the visual filter will filter the main content accordingly.For this, we use the Common.ValueList annotation.

    Enter the following values in the respective fields and click Insert Snippet.

    Field Value
    Entity Type BookingType
    Entity Type Property BookingDateYear
    Collection Path Booking
    Presentation Variant Qualifier PVFilterFlightPriceBookingDateYear
    Local Data Property BookingDateYear
    Value List Property BookingDateYear

    The Common.ValueList Annotation is now added to the annotation file.

  6. Click Exit Guide to get back to the Guides.

    Now we can see the UI.Chart and UI.PresentationVariant and common.valuelist annotation is added to your local annotation file as configured in the code snippet below.

    <Annotation Term="UI.Chart" Qualifier="FilterFlightPriceBookingDateYear">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Filter FlightPrice By BookingDateYear"/>
        <PropertyValue Property="Description" String="Filter FlightPrice By BookingDateYear "/>
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>
        <PropertyValue Property="Dimensions">
            <Collection>
                <PropertyPath>BookingDateYear</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>FlightPrice</PropertyPath>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
<Annotation Term="UI.PresentationVariant" Qualifier="PVFilterFlightPriceBookingDateYear">
    <Record Type="UI.PresentationVariantType">
        <PropertyValue Property="Visualizations">
            <Collection>
                <AnnotationPath>@UI.Chart#FilterFlightPriceBookingDateYear</AnnotationPath>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

     <Annotations Target="cds_zfe_booking_analytics_######.BookingType/BookingDateYear">
     <Annotation Term="Common.ValueList">
         <Record Type="Common.ValueListType">
             <PropertyValue Property="CollectionPath" String="Booking"/>
             <PropertyValue Property="PresentationVariantQualifier" String="PVFilterFlightPriceBookingDateYear"/>
             <PropertyValue Property="Parameters">
                 <Collection>
                     <Record Type="Common.ValueListParameterInOut">
                         <PropertyValue Property="LocalDataProperty" PropertyPath="BookingDateYear"/>
                         <PropertyValue Property="ValueListProperty" String="BookingDateYear"/>
                     </Record>
                 </Collection>
             </PropertyValue>
         </Record>
     </Annotation>
 </Annotations>

Step 4. Configuring the Visual Filters of type Donut Chart

In this step, let us try to configure a visual filter with a different Dimension using a Donut Chart

  1. Expand the guide Add a new visual filter in the Analytical List Page group.

  2. Click Start Guide.

  3. Visual Filter Guide(Step 1) - To configure a UI.Chart annotation:

    In the Entity Type field, choose your entity type as : BookingType.

    Enter the following values in the respective fields and Click Insert Snippet

    Field Value
    Chart Qualifier FilterFlightPriceCustomerID
    Chart Title Filter FlightPrice by CustomerID
    Chart Description Filter FlightPrice by CustomerID
    ChartType Donut
    Dimensions Property CustomerID
    Measures property FlightPrice

    The UI.Chart annotation is now added to the annotation file. Click Step 2 .

  4. Visual Filter Guide(Step 2) - To configure a UI.PresentationVariant annotation :

    Enter the following values and click Insert Snippet.

    Field Value
    Presentation Variant Qualifier PVFilterFlightPriceCustomerID
    Chart Reference @UI.Chart#FilterFlightPriceCustomerID

    The UI.PresentationVariant annotation is now added to the annotation file, click Step 3

  5. Visual Filter Guide(Step 3) - To configure a ValueList annotation :

    Enter the following values in the respective fields and click Insert Snippet.

    Field Value
    Entity Type BookingType
    Entity Type Property CustomerID
    Collection Path Booking
    Presentation Variant Qualifier PVFilterFlightPriceCustomerID
    Local Data Property CustomerID
    Value List Property CustomerID

    The Common.ValueList Annotation is now added to the annotation file.
    Click Exit Guide to get back to the Guides.

    Now we can see the UI.Chart and UI.PresentationVariant and common.valuelist annotation is added to your local annotation file as configured in the code snippet below.

    <Annotation Term="UI.Chart" Qualifier="FilterFlightPriceCustomerID">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Filter FlightPrice By CustomerID"/>
        <PropertyValue Property="Description" String="Filter FlightPrice By CustomerID"/>
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut"/>
        <PropertyValue Property="Dimensions">
            <Collection>
                <PropertyPath>CustomerID</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>FlightPrice</PropertyPath>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
<Annotation Term="UI.PresentationVariant" Qualifier="PVFilterFlightPriceCustomerID">
    <Record Type="UI.PresentationVariantType">
        <PropertyValue Property="Visualizations">
            <Collection>
                <AnnotationPath>@UI.Chart#FilterFlightPriceCustomerID</AnnotationPath>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

      <Annotations Target="cds_zfe_booking_analytics_######.BookingType/CustomerID">
     <Annotation Term="Common.ValueList">
         <Record Type="Common.ValueListType">
             <PropertyValue Property="CollectionPath" String="Booking"/>
             <PropertyValue Property="PresentationVariantQualifier" String="PVFilterFlightPriceCustomerID"/>
             <PropertyValue Property="Parameters">
                 <Collection>
                     <Record Type="Common.ValueListParameterInOut">
                         <PropertyValue Property="LocalDataProperty" PropertyPath="CustomerID"/>
                         <PropertyValue Property="ValueListProperty" String="CustomerID"/>
                     </Record>
                 </Collection>
             </PropertyValue>
         </Record>
     </Annotation>
 </Annotations>

Step 5. Configuring the Visual Filters of type Bar Chart

In this step, Let us try to configure a visual filter with a different dimension using a bar chart

  1. Expand the guide Add a new visual filter in the Analytical List Page group.

  2. Click Start Guide.

  3. Visual Filter Guide(Step 1) - To configure a UI.Chart annotation :

    In the field Entity Type, choose your entity type as : BookingType.

    Enter the following values in the respective fields and click Insert Snippet

    Field Value
    Chart Qualifier FilterFlightPriceAgencyID
    Chart Title Filter FlightPrice by AgencyID
    Chart Description Filter FlightPrice by AgencyID
    ChartType Bar
    Dimensions Property AgencyID
    Measures property FlightPrice

    The UI.Chart annotation is now added to the annotation file. Click Step 2 .

  4. Visual Filter Guide(Step 2) - To configure a UI.PresentationVariant annotation

    Enter the following values and click Insert Snippet.

    Field Value
    Presentation Variant Qualifier PVFilterFlightPriceAgencyID
    Chart Reference @UI.Chart#FilterFlightPriceAgencyID

    The UI.PresentationVariant annotation is now added to the annotation file, click Step 3

  5. Visual Filter Guide(Step 3) - To configure a ValueList annotation :

    Enter the following values in the respective fields and click Insert Snippet.

    Field Value
    Entity Type BookingType
    Entity Type Property AgencyID
    Collection Path Booking
    Presentation Variant Qualifier PVFilterFlightPriceAgencyID
    Local Data Property AgencyID
    Value List Property AgencyID

    The Common.ValueList annotation is now added to the annotation file.

    Click Exit Guide to get back to the Guides.

    Now we can see the UI.Chart and UI.PresentationVariant and common.valuelist annotation is added to your local annotation file as configured in the code snippet below.

    <Annotation Term="UI.Chart" Qualifier="FilterFlightPriceAgencyID">
        <Record Type="UI.ChartDefinitionType">
            <PropertyValue Property="Title" String="Filter FlightPrice By AgencyID"/>
            <PropertyValue Property="Description" String="Filter FlightPrice By AgencyID"/>
            <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar"/>
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath>AgencyID</PropertyPath>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath>FlightPrice</PropertyPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
    <Annotation Term="UI.PresentationVariant" Qualifier="PVFilterFlightPriceAgencyID">
        <Record Type="UI.PresentationVariantType">
            <PropertyValue Property="Visualizations">
                <Collection>
                    <AnnotationPath>@UI.Chart#FilterFlightPriceAgencyID</AnnotationPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>

     <Annotations Target="cds_zfe_booking_analytics_######.BookingType/AgencyID">
     <Annotation Term="Common.ValueList">
         <Record Type="Common.ValueListType">
             <PropertyValue Property="CollectionPath" String="Booking"/>
             <PropertyValue Property="PresentationVariantQualifier" String="PVFilterFlightPriceAgencyID"/>
             <PropertyValue Property="Parameters">
                 <Collection>
                     <Record Type="Common.ValueListParameterInOut">
                         <PropertyValue Property="LocalDataProperty" PropertyPath="AgencyID"/>
                         <PropertyValue Property="ValueListProperty" String="AgencyID"/>
                     </Record>
                 </Collection>
             </PropertyValue>
         </Record>
     </Annotation>
 </Annotations>

Step 6. Preview the application to view the visual filters

  1. Right click webapp folder.

  2. Click on Preview Application.

  3. Click on start fiori run --open 'test/flpSandbox.html#bookinganalysis-tile'.

  4. To view the application in a new browser tab click Open in the dialog.

  5. To view the chart and table click : Go.

Step 7. Add a default value to a filter field

In this step, let us try to add a default value to a filter field. This value would be applied automatically to a field when the app is loaded.

This can be achieved using the annotation : Common.FilterDefaultValue

Lets add a default value 2021 to the field Booking Date Year. The annotation is added to the value list annotation section.

  1. In the property annotation section of the BookingDateYear, add the following annotation

    <Annotation Term="Common.FilterDefaultValue" String="2021"/>

Step 8. Preview the application to view the default value added

  1. Right click webapp folder.

  2. Click on Preview Application.

  3. Click on start fiori run --open 'test/flpSandbox.html#bookinganalysis-tile'.

  4. To view the application in a new browser tab click Open in the dialog.

    You could now see a default filter is applied to the BookingDateYear field.

  5. To view the compact filters click (filter toogle for compact filters).

Summary

You have completed the exercise!

In this unit, you have learned how to

  • enhance the SAP Fiori application based on the Analytical List Page floor plan with filtering capabilities.
  • configure the compact and visual filter
  • to add a default value to a filter field by configuration.

Next Exercise

In the next exercise, we will show how to generate and to configure the overview page application.
Week 3 Unit 3: Creating an overview page