ABAP on Cloud – 9 – Experimenting with Metadata Extension and CRUD Operations

By
Ruthvik Gautham
-
4
6490
Metadata and UI Annotations Explained

As was the promise, in this article we shall see the various Metadata Extension options and the real meaning of each in detail. For those who need to know what was discussed in last article, click here.

If one can recall in the Article 7 (click here), we had seen the creation of Metadata Extension.

Each line in the Metadata Extension is the code related to User Interface (UI). Technically they are referred to as UI Annotations. They help us establish the relation between the table (that is exposed through a Root View) and the UI Screen.

Now, let’s analyse below working code. For demonstration new code has been written:

@Metadata.layer: #CUSTOMER
@UI.headerInfo: { typeName: 'Employee Detail',
typeNamePlural: 'Employee Details',
title.value: 'zempname'
}
annotate view Z_I_EMP_DTLS
with
{
@UI.facet: [{ id : 'zempid',
type: #IDENTIFICATION_REFERENCE,
label: 'Employee Details'}]

@UI.lineItem: [{position: 10, label: 'Employee ID'}]
@UI.identification: [{ position: 10, label: 'Employee ID' }]
zempid;
@UI.lineItem: [{position: 20, label: 'Employee Name'}] 
@UI.identification: [{ position: 20, label: 'Employee Name' }]
zempname;

@UI.lineItem: [{position: 30, label: 'Employee Designation'}] 
@UI.identification: [{ position: 30, label: 'Employee Designation' }]
zempdesg;

@UI.lineItem: [{position: 40, label: 'Employee Gender'}] 
@UI.identification: [{ position: 40, label: 'Employee Gender' }]
zgender;

@UI.lineItem: [{position: 50, label: 'Employee Salary'}] 
@UI.identification: [{ position: 50, label: 'Employee Salary' }]
zsalary;

@UI.lineItem: [{position: 60, label: 'Salary Currency'}]
@UI.identification: [{ position: 60, label: 'Salary Currency' }] 
zcurrency_key;

}

Following screens are self explanatory and wherever some points need explanation it has been provided.

Annotation 1:

In line 1 we define the layer of metadata. The available options are defined by SAP with Customer Layer of UI taking highest precedence over those below it.

Even if features and additions are made in the annotations in lower precedence, the functionality in UI is overridden by those in the higher pecking order.

Customer is the King 🙂

Annotation 2:

UI Header Information is given for the user to know the more important details. We have two important properties,

“typeName” – Used to highlight the title once the single value is clicked upon in the list report template.
“typeNamePlural” – Used to highlight title when the entire values of a table is displayed in the list report.

What is List Report??? That’s in the next article. Fiori Application – Part 1

Annotation 2, Property 1:

From the landing screen in Preview, click on line item and get new screen.

Code in Metadata Extension
Output Screen

Annotation 2, Property 2:

In the home landing page we use the typeNamePlural for more than one record in the list.

Code in Metadata Extension
This image has an empty alt attribute; its file name is image-107-1024x223.png

Annotation 2, Property 3:

Line 4 in metadata extension file has title value ‘zempname’. This is again obtained when the SINGLE LINE ITEM is clicked in the home page and corresponding Employee Name is displayed.

Code in Metadata Extension
Output Screen

Annotation 3:

UI Facet is the sole reason why when we click on the line item, we are able to navigate to the next screen and see the item level details.

Activity : Try commenting below three lines from Metadata Extension and run the preview and see what happens.

Annotation 3, Property 1:

UI Facet ID – In our example the Employee Id is designated as the important field that a user must fill before saving a record.

*Note to Remember: We can put the screen level validation to give an error when user clicks on Save button against the value entered or if no value is entered.

This can be achieved through the Behavior Implementation. We will see this part in upcoming articles.

Code in Metadata Extension

It has no real meaning for the end user. But internally when we want to differentiate, to enable extensions, personalization, and automated testing, we need to have stable IDs for views and controls.

In most cases, they are derived automatically from existing annotations. For facets, we can use an annotation to set a stable ID. The ID should be meaningful and must be unique within the entity type.

That is the reason why Employee ID – Primary and Unique key in our example is itself given as Facet ID.

Annotation 3, Property 2:

In line number 10, we have the type of UI Facet to be “IDENTIFICATION REFERENCE“.

To know more what these UI elements really mean, click here for SAP Documentation.

To understand the relation refer Line Number 13, 17, 21 ..so on where the property Identification is used.

Annotation 3, Property 3:

The Facet label is the other label used for the Facet in particular.

Code as seen in the Metadata Extension

Just to give more clarity on Labels, we have actually three labels in total.

One : on home page where all line items are visible
Two : header information label, when particular line item is pressed
Three: facet label, when particular line item is pressed

Annotation 4, Properties 1 and 2:

Next is the Line Item where we have defined two properties, namely position and label. This annotation is used in the home page. Each field needs to be specified with line item annotation separately to make it working.

Annotation 5, Properties 1 and 2:

Last annotation in this article, is the identification. Remember line number 10, was used to define the type of Facet.

For each field in the CDS Root View we need to specify the identification annotation along with properties like position of UI element and also the label.

Let’s summarize all the annotations into two groups:

In Home Page – Landing pageItem Level Detail Page – Facet
Annotation 2, Property 2  : Header Info – Type Name PluralAnnotation 2, Property 1: Header Info – Type Name
 Annotation 2, Property 3 : Header Info – Title Value
 Annotation 3, Property 1: UI Facet ID
 Annotation 3, Property 2: Facet Type
 Annotation 3, Property 2: Facet Label
Annotation 4, Properties 1 and 2: Line Item Position and Line Item LabelAnnotation 5, Properties 1 and 2:Line Item Position and Line Item Label

BONUS SEGMENT:

Here, we will see the CRUD operations like Create, Read, Update and Delete in detail.

Just to remind the readers, in the previous article we had done a Create Operation Successfully. Click Here.

Did we click on “Save” 🙂 I guess we did not. Let’s do it now.

Bonus : Operation 1 – Create

On launching the Fiori Preview from Eclipse, we get below screen, click on “Create”:

Enter the required Details and Click on “Save”.

Should be able to get following message:

Remember to have a custom message here we need to wait for sometime before a full fledged code is written in Behavior Implementation.

Bonus – Operation – Validations for Create Operation:

To help reduce coding for On-Screen, Client side validations, SAP Fiori app even in preview state does whole lot of validations.

We see that there was many in built validations that enable to reduce the efforts to write exclusive code.

This image has an empty alt attribute; its file name is image-153-1024x491.png

In the database table we have provided the salary field to be currency field value to be of length of 6 including two for decimal. Also, currency key, which is in-built used to point to the Foreign Currency Exchange short forms has similar behavior.

This image has an empty alt attribute; its file name is image-146-1024x498.png
This image has an empty alt attribute; its file name is image-147-1024x501.png
This image has an empty alt attribute; its file name is image-148-1024x500.png
To get the highlighted text, click on the blue link of the error message
This image has an empty alt attribute; its file name is image-152-1024x495.png

Bonus : Operation 2 – Read

This is happening by default by when we preview all the line items in the home page.

Bonus : Operation 3 – Update

Go to home page and click the line item that needs to be updated. For demo, line item one record was clicked. Click on “Edit Button”.

In Editable mode change the NON-PRIMARY Key Values.

Funny thing is even if we do change the value of key field, it does show success message, but when we go to home page we find nothing has changed.

Yes, we should be having a check through the back-end code to alert the end user the moment key field value is changed. Can we achieve it?

Nah!!! This is a LIMITATION in ABAP on Cloud. Until the user takes an action like say clicks on the save button, the control to validate is not passed to back-end.

So we say it is event driven programming for RESTful ABAP 🙂

One work around is display custom message saying we cannot modify the key field value.

Anyway in this example the currency field was changed from USD to CAD.

Perfect Edit or Update operation works fine.

Bonus : Operation 4 – Delete

Want to delete the CFO record from the table of employees. 🙂

Select the single record by clicking on the radio button on the left most side of the table of contents and press “Delete”.

A pop-up window appears with the Employee Name and asks for confirmation whether to delete the record selected. If yes, we get a success message.

Again we assure that one day we will be able to give a custom message.

Question??

But, for time being can anyone tell us by commenting below, how the Fiori Preview App picked up Employee Name in the pop-up window?

Reminder: We shall have a tracker along with article number to understand our progress in the article series. This will help us manage the things better and track where we stand.

Sl. No.ArticleLinkArtifact/Summary
1ABAP on Cloud – 1 – IntroductionClick HereIntroduction
2ABAP on Cloud – 2 – ABAP Trial Instance on CloudClick HereTrial Account 
3ABAP on Cloud – 3 – Eclipse Set-up for ABAP CloudClick HereEclipse with ADT
4ABAP on Cloud – 4 – Your First ABAP Cloud ProjectClick HereABAP Cloud Project
ABAP Cloud Package
5ABAP on Cloud – 5 – Introduction to RESTFul ABAP ProgrammingClick HereCDS and Introduction
6ABAP on Cloud – 6 – DB Creation and Root View in ABAP CloudClick HereDB Table with Fields
Domain / Data Element
Root Interface View
7ABAP on Cloud – 7 – Insert Records through Class and Create Metadata ExtensionClick HereNew ABAP Class in Cloud
Metadata Extension
8ABAP on Cloud – 8 – Behavior Definition and Service Definition and Binding & OutputClick HereBehavior Definition
Service Definition
Service Binding
Service Preview
 9ABAP on Cloud – 9 – Experimenting with Metadata Extension and CRUD OperationsThis article Explanation of Metadata Extension
 PENDING Explanation of CDS Types
 PENDING How to Create a Fiori App
 PENDING Extending Fiori App
 PENDING Unmanaged Behavior Definition

Comment Please!!

Please follow our LinkedIn Page, LinkedIn Group, Facebook Page, Twitter and Instagram.

Save our number +1-646-727-9273 and send us a Whatsapp message ‘LEARN’ to be part of our Learning Community.

All ABAP on Cloud Tutorials

Also, Check ABAP Programming for SAP Fiori Tutorials

RELATED ARTICLESMORE FROM AUTHOR

4 COMMENTS

  2. it is because of this annotation title.value: ‘zempname’ it could have picked the employee name to the pop-up window

LEAVE A REPLY

Please enter your comment!
Please enter your name here