SAP Learning Journey

Using Sections and Facets in Object Pages

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

After completing this lesson, you will be able to:

  • Explain the annotations for adding sections and facets to Object Pages

Sections and Facets in Object Pages

The areas of the Object Page below the header facets are facets grouped by sections. There is also a navigation bar for navigation to specific sections.

Types of Facets in Sections

Let's explore the various types of facets.

Note

A detailed explanation for smart chart facets is given in a later lesson of this course.

Detailed information about sections, indicator facets, and data point facets is given in a later chapter of this course.

For a full list of the types of header facets, open the SAPUI5 SDK and navigate to the following path: Documentation → Developing Apps with SAP Fiori Elements → List Report and Object Page → Configuring Object Page Features → Defining and Adapting Sections.

Field Group Facets - CDS Annotation

This video shows the CDS annotations that you will use to add a field group facet in a section.

Note
Defining facets in CDS view is only supported by ABAP 7.52.

Field Group Facets-Local Annotation

Back end annotations do not support the definition of facets. Local annotation can be used to define facets. Guided Development will help you create a facet and add the facet (if needed) to a newly created section.

There are different terms for the collection facet and the reference facet. The steps are:

  1. Create a UI.CollectionFacet.
  2. Create a UI.ReferenceFacet under the collection facet and reference it to field group annotation.

Arrangement of Sections and Facets

The figure below illustrates the arrangement of sections and facets.

All sections arrange vertically. All facets in a section arrange in a row.

Display Data of Sub-Entity

If you need to display data from a 1 to * association as a table in an object page, you should use a reference facet to create a section, since the section can only contain one facet.

Facets can display data of a sub-entity through CDS annotation and local annotation. Let's see how.

Note that when exposing a CDS view as an OData service, SAP added "to" before CDS association name as OData association name. For adding new sections developers can use the guided development feature of SAP Business Application Studio.

Add Sections and Facets to the Object Page

ExerciseStart Exercise

Business Example

In this exercise, you will add sections to the body area of the object page. In the template of this exercise, you have already got an object page with UI.Identification and two field groups. 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_BDFT_##
    DescriptionUX403 Facets on object page body

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

  3. Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise11_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_BDFT_## 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

    FieldValue
    TemplateList Report Object Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_BDFT_##_CDS
    Main entityZCDS_UX403_BDFT_##
    Module namebodyfacet.student##
    Application titleUX403 Facets on object page body
    DescriptionUX403 Facets on object page body.

    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 no information is displayed in the body area of the Object Page.

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

Task 4: Create Collection Facets for the Object Page Body

Steps

  1. Create a collection facet to display general information, using the following information:

    First Collection Facet

    PropertyValue
    labelGeneral Information
    idCOLLFAC1
    type#COLLECTION
    position10

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

  2. Create a collection facet to display additional information, using the following information:

    Second Collection Facet

    PropertyValue
    labelAdditional Information
    idCOLLFAC2
    type#COLLECTION
    position20

    1. Add a facet to the @UI.facet array with type #COLLECTION as provided in the table.

    2. Your implementation should look like the following figure:

Task 5: Create Reference Facets Under the Collection Facets

Steps

  1. Under the General Information collection, create a facet to display data from @UI.Identification.

    1. Add a facet to the @UI.facet array with type #IDENTIFICATION_REFERENCE, and set the parent to the collection facet for the general information declared in the previous task.

  2. Under the Additional Information collection, create two facets to display data from the field groups AMOUNT and STATUS. Then reactivate your CDS view.

    1. Add two facets to the @UI.facet array with the type #FIELDGROUP_REFERENCE, and reference the AMOUNTand STATUS field groups. Also set the parent to the collection facet for additional information declared in a previous task.

    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 body area of your object page.

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

Log in to track your progress & complete quizzes