Creating an Object Page

In this exercise, you will add a title and a description to the object page. You will also add a title to the list report table.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the list report from your previous exercise open in your browser.

2. Select a travel from the list. The object page opens but only a technical ID of the travel is displayed, as the object page is still empty.

3. Open ADT and expand the Metadata Extensions folder within Project Explorer.

4. Add a title to the list report table, and a title and description to the object page.

   1. Double-click the metadata extension ZC_FE_TRAVEL_######. The metadata extension of the Travel entity opens.

   2. Add the @UI.headerInfo annotation right on top of the file, as shown in the following sample code.

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      @UI.headerInfo: {
          typeNamePlural: 'Travels',
          typeName: 'Travel',
          title: { type: #STANDARD, value: 'Description'},
          description: { type: #STANDARD, value: 'TravelID'}
      }

   3. The typeNamePlural property defines the title of the list report. The value of this annotation is a string.

   4. The typeName property for the object page title is displayed in the top center position of the object page. The value of this annotation is a string.

   5. The title property defines what is displayed in the left upper corner of the object page. The value of this property is the Description field of the Travel entity.

   6. The description property of the @UI.headerInfo annotation defines what is displayed underneath the title in the left upper corner of the object page.

5. Click Activate from the menu bar to save and activate your changes.

6. Switch to the app preview in your browser. You can see that the title of the list report table has been added.

7. Select Go from the table. The list report table is displayed.

8. Select the travel as before. The object page now opens with a title that includes the travel description and travel ID.

In this exercise, you are going to add Total Price and Overall Status to the header of the object page.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the list report from your previous exercise open in your browser.

2. Select a travel. The object page for the travel opens. You are going to add the Total Price and Overall Status as data points to the object page header.

3. You can now switch to ADT.

4. Annotate TotalPrice with @UI.dataPoint.

   1. Double-click ZC_FE_TRAVEL_###### from the Metadata Extension folder of Project Explorer.

   2. Add the @UI.dataPoint annotation for TotalPrice, as shown in the following sample code:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      @UI.dataPoint: { qualifier: 'PriceData', title: 'Total Price' }

5. Add the @UI.facet annotation and reference the @UI.dataPoint annotation of TotalPrice in it.

   1. In the same metadata extension, add the @UI.facet annotation, as shown in the following sample code, to define a section on the object page. Note that @UI.facet annotation comes directly after annotate view ZC_FE_Travel_###### with {

      Code Snippet

      Copy codeSwitch to dark mode

      1234567
      
      @UI.facet: [{
           purpose: #HEADER,
           position: 10,
           type: #DATAPOINT_REFERENCE,
           targetQualifier: 'PriceData'
      }]

   2. The purpose for this annotation is added as #HEADER so that the section is placed into the object page header.

   3. The position is set as 10 so that it is the first section in the object page header.

   4. The type is defined as #DATAPOINT_REFERENCE, which means it references a @UI.dataPoint annotation.

   5. The targetQualifier identifies the referenced @UI.dataPoint annotation.

6. Click Activate from the menu bar to save and activate your changes.

7. Switch to the app preview in your browser to see the changes on the UI. You can see that Total Price is now visible in the object page header.

8. Switch to ADT.

9. Add the @UI.dataPoint annotation to OverallStatus in the opened metadata extension, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.dataPoint: { qualifier: 'StatusData', title: 'Status', criticality: 'OverallStatusCriticality' }

10. Add the @UI.facet annotation and reference the @UI.dataPoint annotation of OverallStatus in it.

    1. Add another record of @UI.facet annotation to display the second section in the object page header, as shown in the following sample code.

       Code Snippet

       Copy codeSwitch to dark mode

       1234567
       ,
       {
            purpose: #HEADER,
            position: 20,
            type: #DATAPOINT_REFERENCE,
            targetQualifier: 'StatusData'
       }

    2. Ensure that #HEADER is entered as the purpose.

    3. Set the position as 20 so that it is on the second position in the object page header.

    4. Define the type as #DATAPOINT_REFERENCE, which means it references a @UI.dataPoint annotation.

    5. The targetQualifier identifies the referenced @UI.dataPoint annotation.

11. Click Activate from the menu bar to save and activate your changes.

12. Switch to the app preview in your browser to see the changes on the UI. You can see that the Status is now visible in the object page header next to Total Price.

In this exercise, you will add a section and the identification subsection to the object page body.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the list report from your previous exercise open in your browser.

2. Select a travel. The object page for travel opens. You have to add the first section to the object page body and add an identification subsection to it.

3. You can now switch to ADT and open the ZC_FE_TRAVEL_######Metadata Extension from the Project Explorer.

4. Annotate AgencyID with @UI.identification, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.identification: [{position: 10}]

5. Annotate CustomerID with @UI.identification, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.identification: [{position: 20}]

6. Add a new record to @UI.facet annotation, as shown in the following sample code, to create a section in the object page body. This is an empty container, and you can add subsections here.

   Code Snippet

   Copy codeSwitch to dark mode

   1234567
   ,
   {
       label: 'General Information',
       type: #COLLECTION,
       id: 'GeneralInfo',
       position: 10
   }

7. Add another record to @UI.facet annotation, as shown in the following sample code, for the identification subsection.

   Code Snippet

   Copy codeSwitch to dark mode

   123456
   ,
   {
        label: 'General',
        type: #IDENTIFICATION_REFERENCE,
        parentId: 'GeneralInfo'  /*The section id*/
   }

8. Reference the section created earlier as the parent section of this subsection by maintaining parentId as GeneralInfo. The new section now becomes the subsection of the General Information section.

9. Click Activate from the menu bar to save and activate your changes.

10. Switch to the app preview in your browser to see your changes on the UI. You can see that General Information is a new section, and the identification subsection is visible as General within the new section.

In this exercise, you will add two subsections to the General Information section of the object page.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. You have the list report from your previous exercise open in your browser.

2. Select a travel from the list. The object page for the travel opens. You have to add a subsection with prices, and a subsection with date information. You have to place both of these subsections within the General Information section next to the General subsection.

3. You can now switch to ADT and open the ZC_FE_TRAVEL_######Metadata Extension from the Project Explorer.

4. Annotate TotalPrice with @UI.fieldGroup, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'PricesGroup', position: 10}]

5. Annotate BookingFee with @UI.fieldGroup, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'PricesGroup', position: 20}]

6. Add another record to @UI.facet annotation of type #FIELDGROUP_REFERENCE for the Prices subsection, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   123456789
   ,
   {
       label: 'Prices',
       purpose: #STANDARD,
       position: 20,
       type: #FIELDGROUP_REFERENCE,
       parentId: 'GeneralInfo',
       targetQualifier: 'PricesGroup'
   }

   1. The label is Prices.

   2. The parentId for this subsection is GeneralInfo, so the subsection appears within the General Information section.

   3. The targetQualifier is PricesGroup.

7. Annotate BeginDate with @UI.fieldGroup, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'DatesGroup', position: 10}]

8. Annotate EndDate with @UI.fieldGroup, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'DatesGroup', position: 20}]

9. Add another record to @UI.facet annotation of type #FIELDGROUP_REFERENCE for the Dates subsection, as shown in the following sample code.

   Code Snippet

   Copy codeSwitch to dark mode

   123456789
   ,
   {
       label: 'Dates',
       purpose: #STANDARD,
       position: 30,
       type: #FIELDGROUP_REFERENCE,
       parentId: 'GeneralInfo',
       targetQualifier: 'DatesGroup'
   }

   1. The label is Dates.

   2. The parentId for this subsection is GeneralInfo, so the subsection appears within the General Information section.

   3. The qualifier for the field group is DatesGroup.

10. Click Activate from the menu bar to save and activate your changes.

11. Switch to the app preview in your browser to see your changes on the UI. You can see Prices and Dates as subsections that have been added to the General Information section.

In this exercise, you will see how you can look up the active ABAP CDS annotations for a projection view. You will see the service URL and observe how the data model of your service is represented in the $metadata document. You will then go on to check the corresponding OData annotations that have been transformed by the runtime from the corresponding ABAP CDS annotations.

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

1. Open the Data Definitions folder within the Core Data Services folder from Project Explorer in ADT.

2. Right-click ZC_FE_TRAVEL_######.

3. Choose Open With from the subsequent menu.

4. Choose the Active Annotations option.

5. All the active annotations for the selected projection view are displayed. You can see @UI.annotations along with other annotations, such as @AccessControl and @ObjectModel.

6. You can see the definition of the @UI.headerinfo annotation that is defined on the entity level.

7. Scroll down to see other UI relevant annotations, such as @UI.facet annotation.

8. From the Business Services folder of Project Explorer, double-click ZUI_FE_TRAVEL_######_O4.

9. From the Service Binding document, select the Service URL available within Service Version Details. The service URL opens in your browser.

10. You can see all the entities of your service. Each entity represents the corresponding projection view. The I_DraftAdministrativeData is automatically added to your service by runtime, as the service is draft enabled.

11. Remove ?sap-client=100 from the URL and replace it with $metadata. The service metadata is displayed.

12. Scroll down to the definition of the Travel entity. It represents the corresponding projection view. Each property is a field of the ZC_FE_TRAVEL_###### projection view. You can also see the navigation properties such as _BookingFee, _CustomerID. You can also see certain technical properties, such as HasDraftEntity, which are added automatically by the runtime, as the service is draft enabled.

13. Scroll down to the definition of the @UI.LineItem annotation. You can see a collection of records where each record represents a table column.