SAP Learning Journey

Using Header Facets for Object Pages

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

After completing this lesson, you will be able to:

  • Define the different types of header facets for object pages

Header Facets for Object Pages

Define Header Facets

Header facets are pieces of information placed on the header part of an Object Page.

Generally, key information and status information should be put in this area.

Types of Header Facets

There are different types of header facets.

Note

Smart Micro Chart Facet, Rating Indicator Facet, and Data Point Facet will be covered in later chapter of this course.

For a full list of types of header facets, open SAPUI5 SDK and navigate the following path:

Documentation->Developing Apps with SAP Fiori Elements->List Report and Object Page->Configuring Object Page Features->Setting up the Object Page Header->Header Facets.

Field Group Facets

A field group defines the fields displayed within a specific reference facet. For example, the figure shows the following fields within the Amount Information and Status Information:

  • Amount Information:
    • Total Gross Amount
    • Total Net Amount
  • Status Information:
    • Overall Status
    • Confirmation Status
    • SO Ordering Status
    • SO Lifecycle Status

Define Field Groups

The term UI.FieldGroup is used to define field groups. Because, in most cases, a CDS view has more than one field groups, a qualifier should be assigned to each field group to distinguish among those field groups.

A field can belong to different field groups so that the UI.fieldGroup annotation for each field is an array. The annotation should use JSON format for easier modification in the future.

When translating the field groups annotation to OData annotation, all @UI.fieldGroup annotations that have the same qualifier will be combined to one term. The sequence of fields in a field group will be determined by @UI.fieldGroup.position defined in CDS view.

If you are interested in learning how to define field group header facets, watch the video below.

Defining a Plain Text Header Facet

The Plain Text Header Facet is quite like the field group header facet.

To define a plain text header facet, you should do the following:

  • Define a field group containing only one field.
  • Set the field as a multiline text.

Definition of the Header Facet Communication

Technically, a communication header facet is a Field Group header facet. The only difference is at least one field of the field group should reference to a vCard.Contact annotation.

Currently, a communication header facet can only be created by adding local annotation through the annotation modeler in SAP WebIDE.

Check out the steps here.

Arrangement of Header Facets

If there is more than one header facet, they will arrange in a row and will start a new row if there is not enough room.

The figure above shows the arrangement for eight header facets.

Add Header Facets

Business Example

In this exercise, you will add to group of fields in the header area of object page. To save some time, you will start from a template SAP Fiori Elements application.

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

    FieldValues
    NameZCDS_UX403_HDFT_##
    DescriptionUX403 Header Facet

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

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

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

Task 2: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_HDFT_## and activate 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 3: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Log in to your 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

    FieldValues
    TemplateList Report Object Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_HDFT_##_CDS
    Main entityZCDS_UX403_HDFT_##
    Module nameheaderfacet.student##
    Application titleUX403 Header Facet
    DescriptionUX403 Header Facet

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

  3. Test the application. Choose Goto display the Sales Orders. Select a Sales Order and notice that information is displayed on the Object Page.

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

Task 4: Declare Field Groups for Your CDS View

Steps

  1. Create a field group to group amount fields with qualifier AMOUNT. Fields in this group are:

    AMOUNT Field Group

    PositionField
    10GrossAmount
    20NetAmount

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

  2. Create a field group to group status fields with qualifier STATUS. Fields in this group are shown in the following table.

    STATUS Field Group

    PositionField
    10OverallStatus
    20BillingStatus
    30DeliveryStatus
    40LifeCycleStatus

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

    2. Your implementation should look like the following figure:

Task 5: Create Header Facets that are Displayed on the Header of Object Page for Created Field Groups

Steps

  1. Create a header facet, and reference this header facet to field group AMOUNT. Also set the position to 10.

    1. Add a new record in the @UI.facet annotation for the field group AMOUNT.

  2. Create a header facet, and reference this header facet to field group STATUS. Also set the position to 20.

    1. Add a new record in the @UI.facet annotation for the field group STATUS.

    2. Your implementation should look like the following figure:

    3. Save your changes and activate the CDS view.

Task 6: Run and Test your Application

Steps

  1. Test the application. Choose Go to display the Sales Orders. Select a Sales Order and examine the Object Page while focusing on the header area.

  2. Switch back to Chrome, and refresh your browser.

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

Log in to track your progress & complete quizzes