Inside SAP Lumira Designer 2.2 : Modellierung während der Laufzeit mit Components API

Wie können komplexe Designanforderungen mit dem SAP Lumira Designer möglichst dynamisch, flexibel und performant umgesetzt werden? Diese Fragestellung ist natürlich eng mit den Anforderungen an die jeweilige Lumira Applikation geknüpft. Dadurch kann die Lösung variieren. In diesem Blogbeitrag stelle ich die Möglichkeit vor, Designanforderungen mithilfe von sogenannten Components, welche erstmals ab Release 2.1 eingeführt wurden, durchzuführen.

Dynamische Modellierung dank Components API

Die Components API ermöglicht es, Komponenten zur Laufzeit, also während der Ausführung einer Applikation, zu erzeugen.  Der Vorteil liegt schnell auf der Hand: Anforderungen, welche ein umfangreiches Applikationsmodell erfordern, können somit dynamisch via Script erstellt, geändert und auch wieder gelöscht werden. Das spart Ressourcen bei komplexen Applikationen und fördert die Performance bei der Ausführung.

Wie wird die Modellierung mit Components API realisiert? Umsetzung anhand eines praktischen Beispiels

Folgendes Beispiel zeigt, wie das Components API genutzt werden kann.

So viel zum allgemeinen Modell. Widmen wir uns nun der Objekterstellung.

Zur Vorbereitung definieren wir im Vorfeld Variablen, Komponenten und Elemente in unserem Modell 

Im ersten Schritt empfiehlt es sich, für alle zu erstellenden Komponenten eine globale Variable anzulegen. Das erleichtert das spätere Handling bei mehreren Objekten. In unserem Fall benötigen wir für unser Grundlayout drei Variablen. Eine für das Adaptive Layout, eine weitere Variable innerhalb des „Adaptive Layout“, dem sogenannten Block, und eine „Panel“ Variable, welche später das Composite beinhaltet.

Name der Variable gv_adl gv_block gv_panel
Typ der Variable Adaptive Layout Block Panel

Danach können wir die benötigten statischen Komponenten anlegen. Diese dienen später als Vorlage für die dynamisch erstellten Elemente. Hinweis: Nicht alle Parameter können via Script angesteuert werden. Deshalb empfiehlt es sich, statische Vorlagen zu generieren. Diese können dann einfach innerhalb des Modells ausgeblendet, also versteckt werden, wie im folgenden Screenshot zu sehen ist (ADAPTIVE_LAYOUT_1, BLOCK_1).

Z_TILE_1 wird als Composite eingebunden. In diesem Beispiel enthält das Composite ein minimales Layout. Neben zwei Basis Panels (Header und Content) sind vier Text- und ein Grafikelement eingebunden.

Im nächsten Schritt legen wir das technische Element „COMPONENTS“ an.

Generell können folgende Funktionen des Components Elements angesprochen werden.

Für uns ist der „CreateComponent“ Befehl relevant. Dieser erzeugt die Komponente mit dem ausgewählten Typ. Grundsätzlich besteht die Möglichkeit, verschiedene Typen einer Komponente zuzuordnen. Neben den Standardtypen wie z.B. Text, Panel oder Chart Komponente können auch bereits vordefinierte Composites oder gar Datasources erstellt werden.

An diesem Punkt haben wir die Vorbereitungen an unserem Modell beendet.

Vorbereitungen beendet: Auf ans Scripting unseres dynamischen Modells

Der Ablauf des Scriptings beginnt mit einer Prüfung auf das vorliegende Modell. Erst danach werden die neuen Elemente angelegt.

Zuerst müssen wir sicherstellen, dass es keine bereits erstellten, dynamischen Komponenten gibt. Die Abfrage und das anschließende Löschen verhindert Skriptabbrüche bei wiederholter Ausführung, da Elemente vermeintlich doppelt angelegt werden könnten.

Im Beispiel wird geprüft, ob die Variable „gv_panel“ bereits vorhanden ist. Falls ja, wird diese gelöscht. Diesen Prüfvorgang wenden wir für alle drei Variablen an.

if (gv_panel !== undefined) 
{       COMPONENTS.deleteComponent(gv_panel);}

Aufbau unserer ersten dynamischen Komponente

Die dynamische Komponente wird genauso wie eine statische Komponente angelegt. In unserem Beispiel wurde als übergeordneter Layer ein Scroll Container definiert. Innerhalb des Scroll Containers fügen wir via Script ein „Adaptive Layout“ Element ein.

gv_adl = COMPONENTS.createComponent(ComponentType.AdaptiveLayout,SCROLL_CONTAINER_1);

Hier nutzen wir eine„ForEach“ Schleife, die jede Kennzahl innerhalb der Datasource überliest. Die Komponenten „gv_block” und “gv_panel” sowie die eigentliche Kachel „lv_comp“ werden auch innerhalb der Schleife erstellt und in die jeweils übergeordneten Elemente geschrieben. Das ermöglicht das Anlegen einer Komponente pro Kennzahl.

gv_block = COMPONENTS.createComponent(ComponentType.Block,gv_adl);
gv_panel = COMPONENTS.createComponent(ComponentType.Panel,gv_block);
var lv_comp = COMPONENTS.createComponent(ComponentType.LUM_6B78A1733911F6F8A43FBEA1EFA0B238_Z_TILE,gv_panel);

Im weiteren Verlauf werden die gesetzten Einstellungen aus der Vorlage kopiert und dem generierten Objekt zugeordnet.

Da wir die Variable „lv_comp“ mit dem Typ des Composites belegt haben, erhalten wir nun Zugriff auf die dort angelegten Funktionen. In dem Beispiel rufen wir die Funktion „fu_set_info“ auf und übergeben alle zu verarbeitenden Informationen an diese.

Viel Spaß beim Ausprobieren.

Prodato verbindet.

Autor

Andreas Eberhardt