RAP - UI Annotationen (Teil 2)
Schauen wir uns für die komplexe Entität noch einmal den Aufbau der UI Annotationen vor und was wir damit beeinflussen können.
Inhaltsverzeichnis
Wenn du mehr zu den UI Annotationen erfahren willst, dann schau einfach in den ersten Teil der Serie, dort erklären wir dir im Detail den Aufbau der Bilder. In diesem Artikel erwartet dich das Delta zur komplexen Entität und was du eigentlich noch mit den Annotationen machen kannst.
Einleitung
Wie solltest du deine UI Annotationen aufbauen, um auch mit komplexen Entitäten und RAP Objekten umzugehen? Dabei werden wir vor allem auf den Aufbau des List-Reports eingehen, der aus einer Liste und einer Objektseite besteht. Die Liste zeigt die einzelnen Einträge, meist mit einer verringerten Anzahl an Informationen. Die Detailseite bereitet die Informationen auf und stellt sie dem Benutzer in einer ansprechenderen Weise zur Verfügung.
Metadaten
Legen wir nun im ersten Schritt einmal die Metadaten für die beiden Entitäten an, diese lagern wir wieder in die Metadata-Extension Files aus. Die Rechnungen sehen nun wie folgt aus:
@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;
}
Für die Positionen erzeugen wir ebenfalls die Extension, hier fällt als Erstes auf, dass es keine Selection-Fields gibt. Diese werden im Detailbild nicht unterstützt.
@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;
}
Hinweis: Über die LINEITEM_REFERENCE kann dann die zweite Entität auf das Detailbild eingebunden werden. So wird eine Liste, ähnlich dem Einstiegsbild, angezeigt.
Erklärung
Dazu die folgende Erklärung, um einmal die Annotationen im Detail sich anzuschauen. Zuerst einmal die Einstiegsliste der App (Rechts Oben) und die Detailliste (Recht Unten):
Dann die Liste der zweiten Entität im Detailbild der Rechnungen (Rechts Oben) und die dazugehörige Detailseite der Positionen:
In diesem Beispiel haben wir ebenso mit der HEADERINFO gearbeitet, um Informationen im Kopfbereich zu zeigen. Hier werden meist Schlüssel verwendet, die du meist sowieso nicht bearbeiten kannst.
Änderungsmodus
Aktivierst du im Detailbild der Rechnungen den Änderungsmodus, so werden alle änderbaren Felder der Entität auf Eingabe geschaltet. Mit neueren Fiori Elements Versionen werden aber ebenso die Felder der Unterentitäten in den Bearbeitungsmodus versetzt, somit kannst du alle Informationen auf einen Schlag bearbeiten.
Fiori Elements Showcase App
SAP hat Ende letzten Jahres eine Showcase App für RAP und CAP veröffentlicht, damit hast du die Möglichkeit einfach alle aktuellen Funktionen von Fiori Elements zu sehen und diese zu testen. Die App wird jeweils um die aktuellen Features der Frameworks ergänzt und ist somit auf dem aktuellen Stand. Mehr zur Installation, zur Doku und den Funktionen kannst du dem Blog in der Quellenangabe entnehmen.
Die einzelnen Features kannst du mit Hilfe des Tags (#BEISPIEL) in der Dokumentationen, aber auch im Quellcode, finden. So kannst du sehen, wie das Feature implementiert wurde und wie du es sinnvollerweise nutzen kannst.
Fazit
UI Annotationen sind ein sehr leichter Weg den Anwendungen ein Aussehen und eine Funktion zu geben. Mit Fiori Elements wird die Entwicklung von standardisierten Fiori Anwendungen um ein Vielfaches beschleunigt und spart einen reinen Fiori Entwickler. Als ABAP Entwickler bist du mit Fiori Elements sehr gut aufgestellt. Den aktuellsten Stand der App findest du bei uns im Repository.
