RAP - Multi-Input Field
Eine ganze Entität in einem Feld darstellen? Mit dem Multi-Input Field möglich. Heute schauen wir uns den Punkt in ABAP für die RAP Entwicklung an und schauen uns die Szenarien an.
Inhaltsverzeichnis
In diesem Artikel schauen wir uns einmal das Multi-Input Field an und wie du es in Zukunft in deiner App verwenden kannst.
Einleitung
In diesem Artikel erweitern wir unsere Sales App um ein Multi-Input Field. Was bedeutet das genau? In manchen Situationen möchten wir in einer Anwendung mehrere Werte in einem Feld hinterlegen. Grundsätzlich benötigen wir eine zusätzliche Entität in unserer Anwendung, da wir in einem Feld nicht unterschiedliche Einträge speichern können, sondern dies nur über eine zusätzliche Entität hinbekommen.
Standard
Bereits mit dem RAP Generator haben wir unsere Entität für die verkauften Materialien definiert. Diese wird aktuell als Tabelle auf der Object Page angezeigt. Allerdings enthält die Tabelle nicht wirklich viele Informationen und die Befüllung über den Button und die Eingabe ist nicht wirklich optimal. Außerdem erwarten wir meistens nur 1-3 Einträge in der Tabelle.
Multi-Input Field
Ändern wir nun diese Eigenschaft und machen aus einer ganzen Entität ein Feld in der Anwendung. Alle Anpassungen werden in der Metadata Extension ZBS_C_SASale gemacht.
Object Page
Um das Multi-Input aus der Object Page zu aktivieren, müssen wir die Assoziation hinzufügen. Im nächsten Schritt fügen wir die Entität der Identifikation für die allgemeinen Felder hinzu und referenzieren über die Annotation das entsprechende Feld aus der Entität.
@UI.identification: [{ position: 160 , qualifier: 'GENERAL', value: '_SASold.MaterialId' }]
_SASold;
Laden wir nun die Object Page erneut, dann werden die beiden Einträge in der Facet für die allgemeinen Daten geladen und durch einen Punkt getrennt dargestellt. Damit können wir mehrere Werte in einem Feld anzeigen.
Gehen wir dann in den Änderungsmodus des Datensatzes, werden die verschiedenen Datensätze für die Bearbeitung nebeneinander geladen.
List Page
Wiederholen wir nun den Vorgang für das LineItem und fügen an der gleichen Stelle die Annotation ein. Wieder verweisen wir auf den Wert der Material ID.
@UI.lineItem: [ { position: 160, value: '_SASold.MaterialId' } ]
_SASold;
Laden wir den List Report neu, dann werden auch die Werte im List Report angezeigt. Sind zu viele Items in einer Spalte, dann wir nur die Anzahl der vorhandenen Einträge angezeigt. Mit einem Klick auf den Link, bekommen wir eine Information zu den Einträgen. Damit sehen wir auf den ersten Blick auch Informationen von den Entitäten unterhalb von Root, direkt auf der Einstiegsseite.
Optimierung
Im Moment verwenden wir nur die technischen Schlüssel für die Anzeige und die Übernahme. es fehlen noch Dinge, wie die Wertehilfe oder ein beschreibender Text.
Wertehilfe
Die Wertehilfe können wir in diesem Fall wie immer implementieren. Da das Feld aus der Entität ZBS_C_SASold kommt, müssen wir dort auch die Suchhilfe am Feld einbinden. Dazu legen wir im ersten Schritt eine Suchhilfe für die Tabelle an. Dabei definieren wir eine allgemeine Suche über Material ID und den Text, sowie das Textattribut auf TEXT_ONLY.
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Material Value Help'
@Search.searchable: true
define view entity ZBS_I_SAMaterialVH
as select from zbs_dmo_material
{
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold: 1.0
@ObjectModel.text.element: [ 'MaterialName' ]
@UI.textArrangement: #TEXT_FIRST
key material as MaterialId,
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold: 0.8
name as MaterialName
}
Öffnen wir also direkt die Entität und nicht die Metadata Extension und ergänzen die Annotation am Feld. Hier geben wir die Suchhilfe an, damit sie im UI verwendet wird.
@Consumption.valueHelpDefinition: [{ entity: { name: 'ZBS_I_SAMaterialVH', element : 'MaterialId' } }]
MaterialId,
Hier einmal ein Beispiel für die Verwendung der neuen Suchhilfe. Wir wählen aus der Suchhilfe zwei Werte aus. Die Werte werden im unteren Teil übernommen und wenn wir die Suche bestätigen, dann werden die zwei Werte auch in das Feld übernommen.
Wir können aber auch direkt im Feld nach einem Wert suchen und bekommen die Vorschläge aus der Suchhilfe. Wenn wir den Wert übernehmen, dann wird die ID wie bisher ins Feld übernommen.
Texte
Nun fehlt eigentlich nur noch ein ordentlicher Text, da unsere Anwender die technischen IDs nicht kennen, sondern meist nach den Namen suchen und diese auch verwenden. Dazu müssen wir im ersten Schritt die Entität ZBS_R_SASold um eine zusätzliche Assoziation erweitern, um an die Daten zu kommen. Hierfür verwenden wir die neue Wertehilfe, da dort auch der Name enthalten ist.
define view entity ZBS_R_SASOLD
as select from zbs_sasold as SASold
association to parent ZBS_R_SASALE as _SASale on $projection.ParentUUID = _SASale.UUID
association of exact one to one ZBS_I_SAMaterialVH as _Material on _Material.MaterialId = $projection.MaterialId
{
key uuid as UUID,
parent_uuid as ParentUUID,
materialid as MaterialId,
_SASale,
_Material
}
Auf Ebene des Consumption Views ZBS_C_SASold erweitern wir den View um das Feld für den Namen und ergänzen die Material ID um die entsprechenden Annotationen. Damit wird die technische ID durch den Namen ausgetauscht.
@ObjectModel.text.element: [ 'MaterialName' ]
@UI.textArrangement: #TEXT_ONLY
MaterialId,
_Material.MaterialName,
Starten wir unsere Anwendung erneut bzw. aktualisieren die App, dann sollten nun die Werte sauber im UI erscheinen. Hier einmal als Beispiel der List Report. Das Vergleichsbild mit den technischen IDs findest du weiter oben im Artikel.
Vollständiges Beispiel
Alle Ressourcen findest du bei uns im GitHub Repository und die Änderungen aus diesem Artikel im folgenden Commit. Damit solltest du alle Anpassungen nachvollziehen können.
Fazit
Für einzelne Schlüssel und kleineren Entitäten ist es manchmal hilfreich, die Werte in einem Feld darzustellen. Die Eingabe ist für den Anwender einfach und weniger sperrig und die wenigen Informationen werden komprimierter dargestellt.
Quelle:
SAP Help - Multi-Input Field
