SAP Learning Journey

Using Basic Annotations for Object Pages

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

After completing this lesson, you will be able to:

  • List the key features and basic annotations for object pages

Object Page Components

Object Page

The object page consists of the following elements:

  • Dynamic page header (mandatory)
  • Navigation bar (optional)
  • Content area (mandatory)

The figure below shows the object page components.

Dynamic Page Header

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

Basic Annotations for Object Pages

An object page displays when an end user selects a row in a list report.

A basic object page contains a header area and a body.

At the top, the name describes the type of objects displays in the center.

The header area contains a title, description, and image of the record. The value should bind to a property of the OData service.

In the body area, by default, fields annotated with @UI.identification display.

Annotations for Basic Object Page

Essential annotations for basic object pages are:

@UI.headerinfo.typeName

Indicates the type name of the business object.

@UI.headerinfo.title.value

Points to the ID data field.

@UI.headerinfo.description.value

Point to the Description data field.

@UI.identification

Like UI.LineItem, fields with this annotation displays in the General Information section of the page.

Example of a Business Object Page

The figure displays an example of a simple object page. From this figure, you can see how @UI.headerInfo and @UI.identification display on the Object Page.

Notice that the @UI.identification is only shown when a facet is implemented (see Lesson 3 of this unit).

Build a Basic Object Page with CDS Annotation

ExerciseStart Exercise

Business Example

In this exercise, you will create a simple Object Page for your list report. 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

    FieldValue
    NameZCDS_UX403_OBJP_##
    DescriptionUX403 Basic Object Page

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

  3. Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise09_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_OBJP_## 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 Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_OBJP_##_CDS
    Main entityZCDS_UX403_OBJP_##
    Module nameobjectpage.student##
    Application titleUX403 Basic Object Page
    DescriptionUX403 Basic Object Page.

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

  3. Test the application. Choose Go to display the Sales Orders. Then, select a Sales Order and notice that no information is displayed on the Object Page.

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

Task 4: Add Annotations for the Object Page

Steps

  1. Switch to ADT and set the page header that represents your type name as Sales Order for the CDS view ZCDS_UX403_OBJP_##.

    1. Add an annotation of @UI.headerInfo.typeName to your CDS view.

  2. Set the title of every single sales order to the value of field SalesOrderID.

    1. Add an annotation of @UI.headerInfo.title.value to your CDS view.

  3. Use the @UI.identification and @UI.facet annotations to add more fields to the object page.

    Position and Fields for the @UI.identification Annotations

    PositionValue
    10SalesOrderID
    20CustomerID
    30CustomerName
    40GrossAmount
    50NetAmount
    60OverallStatus
    70PaymentMethod

    Properties and Values for the Collection Facet

    PropertyValue
    idCOLLFAC1
    labelGeneral Information
    type#COLLECTION
    position10

    Properties and Values for the Identification Reference Facet

    PropertyValue
    labelGeneral Information
    type#IDENTIFICATION_REFERENCE
    parentIdCOLLFAC1
    position10

    1. Add @UI.identification annotations for the listed fields.

    2. Add a @UI.facet annotation with the listed information for the collection and identification reference facet.

    3. Your implementation should look like the following figures:

  4. Test your application. To examine the result page, select a row of your list report and the object page displays.

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

    2. Close Google Chrome and ADT.

Log in to track your progress & complete quizzes