SAP Learning Journey

Exploring the Overview Page (OVP)

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Identify the components of an Overview page
  • List the steps to create an Overview page

Overview Page Components

Overview Page

The basic structure and appearance of the overview page is governed by the dynamic page layout, and is divided into a header area and a content area.

This enables you to use variant management, text, and a smart filter bar in the upper part of the screen (dynamic page header). The content of the overview page is presented using cards.

Two different layouts are available which determine the size and position of the cards fixed card layout and resizable card layout.

Types of Cards

Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. The overview page can contain several cards that reference the same underlying application. However, each card must bring added value to the user, and not just repeat information already offered on another card.

Cards can display different types of content. They can show a chart, a list, a table, informative text, or a combination of two elements. Cards can also vary in size, depending on the selected layout. However, cards never have editable fields.

When designing cards, make sure that you define and format the texts on all the cards consistently.

The overview page supports different standard card types.

In addition to these cards, the overview page also supports custom cards. Custom cards allow you to define the appearance of a card on an overview page, and the type of content that appears in the card content area. They offer additional flexibility when you require features that are not offered by the standard cards for overview pages.

Note

Only use custom cards if the features required for your use case are not offered in any way by the standard cards for the overview page. If your basic requirements can be reasonably covered by one of the standard cards, always use the standard card, even if there are technical or visual limitations.

Creating an Overview Page

The following steps show you how to create an Overview Page.

Overview Page Configuration

You can use the following properties to configure an overview page:

  • smartVariantRequiredEnable/Disable the smart variant management control on the smart filter bar.
  • showDateInRelativeFormat Show date on the SFB like yesterday, tomorrow, and so on.
  • enableLiveFilter Show/Do not show the Go button on the smart filter bar.
  • refreshIntervalInMinutes Refresh the OVP every x minutes, minimum is 1 min.
  • useDateRangeType True // true to enable Semantic Date, default false.

Topic: useBatch: false (https://sapui5.hana.ondemand.com/#/api/sap.ui.model.odata.v2.ODataModel/constructor)

Consider a scenario where you have one analytical card and four transactional cards (list, table, stack, linklist) in your OVP application. The HTTPS requests made by the analytical cards are generally heavy (take a long time). Since analytical information is based on aggregated entity sets, the back end requires time to process each http request. If all the cards in your application use the same model (datasource), then in such a scenario there would be only one batch request for all the cards to fetch data. Since the calls for analytical cards take too long, the other four cards would also not display any data. This scenario can be handled by creating two separate models in the application manifest and disabling batch mode for the analytical card model. In this case, the response from the back end would be quicker and you would see the OVP being rendered relatively quickly.

preload: true (https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/ - Section: Use model preload feature)

This is a way to load the metadata and annotations before the OVP application load, so that OVP does not have to 'wait' for the metadata and annotations and can continue directly with rendering the UI.

General performance guidelines: if you have analytical cards that take a long time to return data, you can consider disabling the batch mode (the rationale being that multiple small requests fired almost in parallel time would be faster when compared to one heavy batch call). Ideally, the suggested way is to have one model in the manifest which all the analytical cards would use and one model in the manifest which all the transactional cards would use.

Annotations for Card Types

All the data fields are displayed at the left-hand side. All the data points are displayed at the right-hand side.

For now, we will have to use the local annotation approach because the datafieldForAnnotation annotation is not yet supported by CDS.

The card configuration for stack cards looks like the following:

Code snippet
"card02": {
  "model": "mainService",
  "template": "sap.ovp.cards.stack",
  "settings": {
    "title": "{{card02_title}}",
    "subTitle": "{{card02_subtitle}}",
    "entitySet": "ZCDS_UX403_OVP_00",
    "annotationPath": "com.sap.vocabularies.UI.v1.FieldGroup#DETAILED"
  }
  }
Expand

The content of the card is implemented as FieldGroup-Reference-facet.

The content of a stack card is implemented by using headerinfo and fieldgroup annotations

Code snippet
@UI.headerInfo: {
typeNamePlural: 'Sales Orders',
typeName: 'Sales Order',
imageUrl: 'SAPIconUrl',
title: {
label: 'Sales Order ID',
value: 'SalesOrder'
},
description: {
label: 'Sales Order Item',
value: 'SalesOrderItem'
}
}
Expand

Annotate fields of the projection list as fieldgroup items @UI.fieldGroup:[{position: 20, qualifier: 'DETAILED', label: 'Product Category'}].

Create the Fieldgroup-Reference facet with reference to configured field group id.

Code snippet

@UI.facet: [{ 
type: #FIELDGROUP_REFERENCE, 
targetQualifier: 'DETAILED',
isSummary: true 
}]
Expand

The manifest.json configuration of an analytical card showing a donut chart looks like the following:

Code snippet
"card01": {
  "model": "mainService",
  "template": "sap.ovp.cards.charts.analytical",
  "chartType": "cardchartsdonut",
  "settings": {
    "title": "{{card01_title}}",
    "entitySet": "ZCDS_UX403_OVP_00",
    "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
    "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart"
  }
  },
Expand

Navigation from Overview Page Cards

Documentation: https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.52.3/en-US/530f9e6f66104d5888ade79b5cf417e0.html

Note

The navigation from the card items section is context sensitive, that is, if you select a particular item in the table/list card, this information will be sent to the navigating application as a selection variant.

All the properties related to the particular record will be sent. For example, your table card displays properties P1,P2,P3 as data, when you select the item, all the Odata properties P1,P2,P3….Pn will be sent as a selection variant (will be populated to the smart filter bar). If you would like only P1,P2,P3 to be passed, then use "addOataSelect:true (https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.52.3/en-US/530f9e6f66104d5888ade79b5cf417e0.html)

Navigation is possible from all cards and is supported in resizable layout as well.

Create an Overview Page

ExerciseStart Exercise

Business Example

In this exercise, you will create an Overview Page based on existing CDS views in system S4D. The scenario is about product information. You will display recent sales data in a table card. Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Create and Activate a CDS View with the Source Code from a Template File

Steps

  1. Log in to the S4D SAP system using ABAP Development Tools for Eclipse (ADT).

    1. Perform this step as shown in a previous exercise.

  2. Create a blank CDS view using the following information:

    CDS View Information

    FieldValue
    NameZCDS_UX403_OVP_##
    DescriptionUX403 Overview Page

    1. Perform this step as shown in a previous exercise.

  3. Copy the source code of the text file N:\UX403\Templates\UX403_Exercise15_Template.txt into the code editor of the CDS view ZCDS_UX403_OVP_##, replace all instances of ## in the source code and activate the CDS view.

    1. Perform this step as shown in a previous exercise.

Task 2: Add Annotations for a Table Card

Steps

  1. Add the following fields to the table:

    Table Fields

    FieldValue
    10SalesOrder
    20Product
    30GrossAmount

    1. Add the @UI.lineItem.position annotation for the listed fields.

    2. Your implementation should look like the following figure:

    3. Save your changes.

Task 3: Add Annotations for a Global Filter

Steps

  1. Enable the following fields for selection.

    Selection Fields

    PositionField
    10ProductCategory
    20ProductType

    1. Add the @UI.selectionField.position annotation for the listed fields.

  2. Add a value help for the selection fields based on a foreign key relationship.

    Associations for the Value Helps of the Selection Fields

    FieldAssociation
    ProductCategory_ProductCategory
    ProductType_ProductType

    1. Add the @ObjectModel.foreignKey.association annotation for the listed fields.

    2. Your implementation should look like the following figure:

    3. Save your changes.

Task 4: Add Annotations for the Quick View Cards of a Stack Card

Steps

  1. Add annotations for the entity header information of the quick view cards.

    Properties and Values for the @UI.headerInfo Annotation

    ProprtyValue
    typeNamePluralSales Orders
    typeNameSales Order
    imageUrlSAPIconUrl
    title.labelSales Order ID
    title.valueSalesOrder
    description.labelSales Order Item
    description.valueSalesOrderItem

    1. Add the @UI.headerInfo annotation with the listed properties and values.

    2. Your implementation should look like the following figure:

    3. Save your changes.

  2. Create a field group to group the detailed information of a sales order item with qualifier DETAILED. Fields in this group are:

    DETAILED Field Group

    PositionFieldLabel
    10ProductProduct
    20ProductCategoryProduct Category
    30ProductTypeProduct Type
    40CompanyNameCompany Name
    50GrossAmountGross Amount

    1. Add the @UI.fieldGroup annotation for the listed fields with the listed positions and labels.

    2. Your implementation should look like the following figure:

    3. Save your changes.

  3. The content area of a quick view card shows the field group records from reference facet items that have been tagged using the IsSummary annotation. Create a field group reference facet to display the information in the quick view cards, using the following information:

    Field Group Reference Facet

    PropertyValue
    type#FIELDGROUP_REFERENCE
    targetQualifierDETAILED
    isSummarytrue

    1. Write an annotation of @UI.facet just before the first field in your projection list. Add a facet with type #FIELDGROUP_REFERENCE as provided in the table.

    2. Your implementation should look like the following figure:

    3. Save your changes and reactivate your CDS view.

Task 5: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_OVP_## and reactivate it.

    1. Perform this step as shown in a previous exercise.

  2. Publish your new OData service on the S4D SAP system. Use the /N/IWFND/MAINT_SERVICE transaction.

    1. Perform this step as shown in a previous exercise.

Task 6: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Log in to your SAP BTP trial account and open the SAP Business Application Studio.

    1. Perform this step as shown in a previous exercise.

  2. Create an SAP Fiori elements project using the following information:

    SAP Fiori Elements Project Information

    FieldValue
    TemplateOverview Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_OVP_##_CDS
    Filter entityZCDS_UX403_OVP_##Type
    Module nameoverviewpage.student##
    Application titleUX403 Overview Page
    DescriptionUX403 Overview Page.

    1. Perform this step as shown in a previous exercise.

  3. Test the application. Notice that only the selection fields with the corresponding value helps are displayed.

    1. Perform this step as shown in a previous exercise.

Task 7: Add the Titles and Subtitles of the Cards to the i18n.properties File

Steps

  1. Add the following name-value pairs to the i18n.properties file. Add also a suitable #XTIT documentation note.

    Name-Value Pairs for the i18n.properties File

    NameValue
    card00_titleRecent Sales
    card02_titleSales Orders
    card02_subtitleItem

    1. Open the i18n.properties file which is located in the webapp/i18n folder within your project.

    2. Add the listed name-value pairs.

    3. Your implementation should look like the following figure.

Task 8: Add the Table Card to the Overview Page

Steps

  1. Add the table card to the Overview Page over Guided Development. Use only the 5 step from Guided Development. Use the Add a table card to an overview page guide with the listed values. After you have applied the guide, an OverviewPage.json file will open. The card configurations in the OverviewPage.json file and the card configurations in the manifest.json file will be automatically synchronized. Now save your changes in the OverviewPage.json file and close this window and the Guided Development window.

    Table Card Information

    FieldValue
    ModelmainService
    Entity SetZCDS_UX403_OVP_##
    Card IDcard00
    Entity TypeZCDS_UX403_OVP_##Type
    Title{{card00_title}}

    1. Choose View → Command Palette to open the command palette.

    2. Enter guided after the > symbol and choose SAP Fiori tools: Open Guided Development.

    3. Choose your project overviewpage.student##.

    4. Choose Add a table card to an overview page and the corresponding Start Guide button.

    5. Use only step 5 from Guided Development. 

    6. Enter or choose the values for the fields for the table, and choose insert Snippet.

    7. An OverviewPage.json file will open with your card configuration. Save your changes and close this window as well as the Guided Development window.

  2. Test your application. The recent sales should display in a table card. You can also test if the value helps work.

    1. Perform this step as shown in a previous exercise.

Task 9: Add the Stack Card to the Overview Page

Steps

  1. Add the stack card to the Overview Page over Guided Development. Use the Add a stack card to an overview page guide with the listed values. Use only the 5 step from Guided Development. After you have applied the guide, close the OverviewPage.json file and the Guided Development window.

    Stack Card Information

    FieldValue
    ModelmainService
    EntityZCDS_UX403_OVP_##
    Card IDcard02
    Title{{card02_title}}

    1. Choose View → Find Command… to open the command palette.

    2. Enter guided after the > symbol and choose SAP Fiori tools: Open Guided Development.

    3. Choose your project overviewpage.student##.

    4. Choose Add a stack card to an overview page and the corresponding Start Guide button.

    5. Use only step 5 from Guided Development .

    6. Enter or choose the values for the fields of the table, and choose insert Snippet.

    7. A OverviewPage.json file will open with your card configuration. Save your changes and close this window as well as the Guided Development window.

  2. Change the card configuration of the stack card in the manifest.json file in order to display the quick view cards and the subtitle for the stack card. Add the following properties and values to the settings of the stack card card02.

    Additional Properties and Values for the Stack Card Settings

    PropertyValue
    subTitle{{card02_subtitle}}
    annotationPathcom.sap.vocabularies.UI.v1.FieldGroup#DETAILED

    1. Open the manifest.json file which is located in the webapp folder of your project.

    2. Locate the settings of the card card02.

    3. Add the listed properties and values to the settings of the card card02.

    4. Your implementation should look like the following figure:

    5. Save your changes and close the manifest.json file.

Task 10: Run and Test your Application

Steps

  1. Run your application. Now you can see all cards.

    1. Perform this step as shown in a previous exercise.

  2. Test the stack card. Open the object stream with the quick view cards. One quick view card displays detailed information about a sales order item.

    1. Select the right side of the stack card to open the object stream with the quick view cards.

  3. Test the selection fields with their value helps and see how the cards are changing. For example, you could choose Computer System Accessories over the value help of the Product Category selection field.

    1. Perform this step as shown in a previous exercise.

Log in to track your progress & complete quizzes