This is a test message to test the length of the message box.
Login
ABAP RAP UI Annotations
Created by Software-Heroes

RAP - UI Annotations (Part 2)

904

Let's look again at the structure of the UI annotations for the complex entity and what we can influence with them.

If you want to learn more about the UI annotations, just take a look at the first part of the series, where we explain the structure of the images in detail. In this article you can expect the delta to the complex entity and what you can actually do with the annotations.

 

Introduction

How should you build your UI annotations to deal with complex entities and RAP objects? We will focus on the structure of the list report, which consists of a list and an object page. The list shows the individual entries, mostly with a reduced amount of information. The details page prepares the information and makes it available to the user in a more engaging way.

 

Metadata

In the first step, let's create the metadata for the two entities, and we'll move them back to the metadata extension files. The calculations now look like this:

@Metadata.layer: #CUSTOMER
@UI: {
  headerInfo: {
    typeName: 'Invoice',
    typeNamePlural: 'Invoices',
    title: { value: 'Document' },
    description: { label: '(Description)' },
    typeImageUrl: 'sap-icon://my-sales-order'
  }
}
annotate entity ZBS_C_RAPCInvoice with
{
  @UI.facet      : [
    {
      id         : 'FacetControlHeader',
      label      : 'Header',
      type       : #FIELDGROUP_REFERENCE,
      purpose    : #HEADER,
      targetQualifier: 'CONTROL_HEADER'
    },
    {
      id         : 'FacetFieldArea',
      label      : 'Information',
      type       : #FIELDGROUP_REFERENCE,
      purpose    : #STANDARD,
      targetQualifier: 'FIELD_AREA'
    },    
    {
      id         : 'controlSection',
      type       : #LINEITEM_REFERENCE,
      position   : 20,
      targetElement: '_Position'
    }
  ]

  @UI            : {
    selectionField : [ { position: 10 } ],
    lineItem     : [{ position: 10 }]
  }
  Document;
  @UI            : {
    lineItem     : [{ position: 20 }],
    fieldGroup   : [{ position: 20, qualifier: 'FIELD_AREA', label: 'Date' }]
  }
  DocDate;
  @UI            : {
    lineItem     : [{ position: 30 }],
    fieldGroup   : [{ position: 30, qualifier: 'FIELD_AREA', label: 'Time' }]
  }
  DocTime;
  @UI            : {
    selectionField : [ { position: 20 } ],
    lineItem     : [{ position: 40 }],
    fieldGroup   : [{ position: 40, qualifier: 'CONTROL_HEADER', label: 'Partner' }]
  }
  Partner;
}

 

We also create the extension for the positions. The first thing you notice here is that there are no selection fields. These are not supported in the detail screen.

@Metadata.layer: #CUSTOMER
@UI: {
  headerInfo: {
    typeName: 'Position',
    typeNamePlural: 'Positions',
    title: { value: 'PositionNumber' },
    description: { value: 'Material' }
  }
}
annotate entity ZBS_C_RAPCPosition with
{
  @UI.facet      : [
    {
      id         : 'FacetMaterialGroup',
      label      : 'Material',
      type       : #FIELDGROUP_REFERENCE,
      targetQualifier: 'MATERIAL_AREA'
    },
    {
      id         : 'FacetPriceGroup',
      label      : 'Information',
      type       : #FIELDGROUP_REFERENCE,
      targetQualifier: 'PRICE_AREA'
    }
  ]

  @UI.hidden: true
  Document;
  @UI            : {
    lineItem     : [{ position: 10 }]
  }
  PositionNumber;
  @UI            : {
    lineItem     : [{ position: 20 }]
  }
  Material;
  @UI            : {
    lineItem     : [{ position: 30 }],
    fieldGroup   : [{ position: 30, qualifier: 'MATERIAL_AREA', label: 'Quantity' }]
  }
  Quantity;
  @UI            : {
    lineItem     : [{ position: 40 }],
    fieldGroup   : [{ position: 40, qualifier: 'MATERIAL_AREA', label: 'Unit' }]
  }
  Unit;
  @UI            : {
    fieldGroup   : [{ position: 50, qualifier: 'PRICE_AREA', label: 'Price' }]
  }
  Price;
  @UI            : {
    fieldGroup   : [{ position: 60, qualifier: 'PRICE_AREA', label: 'Currency' }]
  }
  Currency;
}

 

Hint: The second entity can then be integrated into the detail screen via the LINEITEM_REFERENCE. A list similar to the initial screen is displayed.

 

Explanation

The following explanation for this, in order to take a look at the annotations in detail. First of all, the entry list of the app (top right) and the detailed list (bottom right):

 

Then the list of the second entity in the detail screen of the invoices (top right) and the corresponding detail page of the items:

 

In this example we also worked with the HEADERINFO to show information in the header area. Keys are usually used here, which you usually cannot edit anyway.

 

Change mode

If you activate the change mode in the detail screen of the invoices, all changeable fields of the entity are switched to input. With newer Fiori Elements versions, however, the fields of the sub-entities are also put into edit mode, so you can edit all information at once.

 

Fiori Elements Showcase App

At the end of last year, SAP released a showcase app for RAP and CAP, so you can easily see and test all current functions of Fiori Elements. The app is supplemented with the latest features of the frameworks and is therefore up to date. You can find out more about the installation, the documentation and the functions in the blog in the reference.

You can find the individual features using the tag (#EXAMPLE) in the documentation, but also in the source code. So you can see how the feature was implemented and how you can use it sensibly.

 

Conclusion

UI annotations are a very easy way to give applications a look and function. With Fiori Elements, the development of standardized Fiori applications is accelerated many times over and saves a pure Fiori developer. As an ABAP developer, you are very well positioned with Fiori Elements. You can find the latest version of the app in our repository.

 

Source:
SAP Blog - SAP Fiori Showcase App
SAP Icon Explorer


Included topics:
RAPBTPUI Annotation
Comments (0)



And further ...

Are you satisfied with the content of the article? We post new content in the ABAP area every Friday and irregularly in all other areas. Take a look at our tools and apps, we provide them free of charge.


RAP - Deep Action in OData v4

Category - ABAP

In this article we will look at actions with deep structures, how we can create them and pass data to an API endpoint.

05/24/2024

BTP - Connect On-Premise (Consumption Model v2)

Category - ABAP

In this article we want to provide another update on the connection of on-premise systems and how this is done with a communication arrangement.

12/15/2023

RAP - Show app count (Tile)

Category - ABAP

This example is about displaying a counter on the tile of a Fiori Elements application and how such a thing can be implemented.

10/06/2023

RAP - Generator (Fiori)

Category - ABAP

In this article we will look at the more complex RAP generator as a Fiori Elements application and what advantages you have with it.

09/15/2023

RAP - Generator (ADT)

Category - ABAP

Today, let's take a look at the RAP Generator, which is already integrated into ABAP Development Tools, and how you can use it to easily build new RAP apps.

09/08/2023