ABAP RAP

Oberflächen und Services

(C) Brandeis Consulting📁

Scpope

In diesem Foliensatz geht es um die Gestaltung der Oberflächen.

  • Was ist möglich mit Fiori Elements? Wo sind die Grenzen?
  • Vorgehen zum Anlegen von Services
(C) Brandeis Consulting📁

Layouts und Floorplans

Fiori Elements unterstützt unterschiedliche Floorplans. Alle Details findet Ihr in den Fiori Design Guidelines . Mit Fiori Elements sind die folgenden Floorplans implementierbar:

  • Overview Page
  • List Report
  • Worklist
  • Analytical List Page
  • Object Page

Ohne Fiori Tools können wir mit RAP nur die beiden hervorgehobenen Floorplans verwenden.

Beispiel und Demo für die UI5 Dokumentation

https://sapui5.hana.ondemand.com/sdk/#/topic/214dc25fb47f42c6a0091dfe71e87950

(C) Brandeis Consulting📁

List Report

(C) Brandeis Consulting📁

List Report Features

  • Suchfelder für einzelne Spalten und unscharfes Suchfeld für mehrere Spalten
  • Spaltenanzeige
  • Header Bereich
(C) Brandeis Consulting📁

Standard Annotationen für jeden CDS View

UI.headerInfo.typeName
UI.headerInfo.typeNamePlural
UI.headerInfo.typeImageUrl

(C) Brandeis Consulting📁

Annotationen für Suchfelder

UI.selectionField.position

(C) Brandeis Consulting📁

Gestaltung der Object Page

Bereiche:
Kopfbereich

(C) Brandeis Consulting📁

Annotationen für die Darstellung in Listen

Unabhängig davon, ob in einem ListReport oder als Unterobjekt.

  • UI.lineItem.position - Position nach der sortiert wird. Dadurch wird das Element angezeigt.
  • UI.lineItem.importance - Wichtigkeit, wird für die Priorität beim Ausblenden benötigt.
  • UI.lineItem.label - Spaltentitle
(C) Brandeis Consulting📁

Standard Annotationen für jeden CDS View

@UI.headerInfo.typeName
@UI.headerInfo.typeNamePlural
@UI.headerInfo.typeImageUrl
@UI.headerInfo.title.value: 'TaskKey

(C) Brandeis Consulting📁

Annotationen für Suchfelder

Mit dieser Annotation erscheint das Feld als Suchfeld im Header
UI.selectionField.position

(C) Brandeis Consulting📁

Object Page

(C) Brandeis Consulting📁

Object Pages - Feldgruppen (Facets)

Gruppen von Feldern mit Überschrift:

(C) Brandeis Consulting📁

Object Pages - Feldgruppen Beispiel

Definition der Gruppe:

@UI.facet: [ { label: 'Task Info', 
               purpose: #STANDARD, 
               type: #FIELDGROUP_REFERENCE,
               targetQualifier: 'TaskInfo' }]

Zuordnung der Felder


@UI.fieldGroup: [ { importance: #HIGH, 
                    position: 10, 
                    qualifier: 'TaskInfo' } ]                    
@UI.lineItem: [{ position: 10 }]
@UI.identification: [{ position: 10 }]
    TaskKey;
(C) Brandeis Consulting📁

Ausklappbare Bereiche - Show More / Show Less

Mit der Annotation

isPartOfPreview: false

in einer Facette kann man einen Bereich beim ersten Laden ausblenden. Mit der Schaltfläche "Show More" und "Show Less" kann der Bereich dann wie gewünscht eingestellt werden

Beispiel

  @UI.facet: [  { label: 'Task Info',
                   purpose: #HEADER,
                   type: #FIELDGROUP_REFERENCE,
                   targetQualifier: 'TaskInfo',
                   isPartOfPreview: false }]

(C) Brandeis Consulting📁

Dynamische Properties

Die Werte für Annotationen können nicht nur fest vergeben werden. Es sind auch dynamische Werte möglich:

@UI.facet: [{ id: 'TasksToDo',
                  purpose:  #STANDARD,
                  type:     #LINEITEM_REFERENCE,
                  label:    'Tasks to do',
                  hidden: #(IsHidden),
                  targetElement: '_TasksToDo',
                  position: 10 }]

In diesem Beispiel ist das Facet nur dann sichtbar, wenn das Feld IsHidden aus dem CDS View einen leeren Wert enthält.

(C) Brandeis Consulting📁

Gruppen auf der Object Page

Definition der Gruppen

  @UI.facet: [ {    id: 'Details',
                    purpose: #STANDARD ,
                    type:     #FIELDGROUP_REFERENCE,
                    label: 'Details',
                    position: 20 ,
                    targetQualifier: 'Details'}  ]

Zuordnung der Felder


  @UI.fieldGroup: [ { qualifier: 'Details' ,
                      position: 20 }]
  Name;
(C) Brandeis Consulting📁

Services

Die bisher genutzten Services sind nur lokal. Das bedeutet, dass der Transport auf Folgesysteme nicht möglich ist. Für produktiv genutzte Anwendungen muss noch ein Service angelegt werden. Dazu verwenden wird die Transaktion /IWFND/MAINT_SERVICE

(C) Brandeis Consulting📁

/n/IWFND/MAINT_SERVICE

Service Hinzufügen:

Suchen des Bindings:

(C) Brandeis Consulting📁

/n/IWFND/MAINT_SERVICE

Die Transaktion SEGW ist nicht notwendig.

(C) Brandeis Consulting📁