UI5 Web Components

Entwicklung von Webanwendungen mit UI5 Web Components

SAPUI5 ist ein etabliertes Framework für die Entwicklung von webbasierten Anwendungen im Unternehmensbereich. Viele Unternehmen schätzen dessen einfache Integration in die SAP-Systemlandschaft und das einheitliche Fiori Designkonzept nach den Fiori Guidelines. Ein zentraler Bestandteil von SAPUI5-Anwenungen sind UI5 Controls. Diese werden verwendet, um das User Interface darzustellen und zu steuern. Sie ermöglichen ein einheitliches Design und eine durchgängige User Experience. Beispiele sind einfache Controls wie Buttons oder Inputs aber auch komplexere Elemente wie Layouts oder Smart Tables. SAPUI5 zeichnet sich durch umfassende Bibliotheken von UI-Controls aus. Dadurch müssen Entwickler/Entwicklerinnen in der Regel keine neuen Controls entwickeln.

Dennoch gibt es Unternehmen und unsere Kunden, die keine SAP-Technologien oder SAPUI5 etabliert haben und die Webanwendungen mittels anderer Frameworks wie Angular oder React entwickeln. Für sie gibt es mit UI5 Web Components die Möglichkeit, UI5 Controls unabhängig vom verwendeten Framework zu nutzen. Dadurch können fast alle Features, die SAPUI5 bietet, genutzt werden. Beispielsweise sind zum aktuellen Zeitpunkt noch keine Smart Tables in UI5 Web Components verfügbar. Die Bibliothek wird jedoch stets weiterentwickelt und um neue UI5 Controls ergänzt. SAP kann dadurch Unternehmen erreichen, deren Stärken in der Entwicklung von Apps mittels anderer UI-Technologien als SAPUI5 liegen, wie etwa Angular. Ihnen wird durch UI5 Web Components die Möglichkeit gegeben, SAPUI5-ähnliche Apps zu entwickeln.

Exemplarische UI5 Web Components App
Abbildung 1: Exemplarische UI5 Web Components App

Was ist Angular

Angular ist ein open-source Framework für das Design und die Entwicklung von Client-Side-Anwendungen. Angular basiert auf TypeScript, was einen erheblichen Vorteil gegenüber Frameworks, die lediglich auf JavaScript basieren, bietet. TypeScript ist eine auf JavaScript basierende Programmiersprache. Gegenüber JavaScript verfügt TypeScript über eine umfangreichere Syntax. Durch Typisierung lassen sich Laufzeitfehler vermeiden und eine höhere Qualität des Quellcodes erreichen.

Zu den wichtigsten Entwicklungswerkzeugen zählen:

  • Sammlungen von UI Controls
  • Sammlung von Bibliotheken für eine Vielzahl von Features wie das Routing, Datenmanagement und die Client-Server-Kommunikation
  • Tooling für Entwicklung, Build und Test

Was sind UI5 Web Components

UI5 Web Components sind UI-Elemente im SAP Fiori Design. Sie teilen die grundlegenden Funktionen von SAPUI5 wie Stabilität, Zugänglichkeit und Themenunterstützung. Sie werden als ES6-Module bereitgestellt und können per NPM bezogen werden. UI5 Web Components deckt einen Großteil der in SAPUI5 verfügbaren Controls ab.

How To

In diesem Beispiel werden wir mittels Angular und UI5 Web Components eine einfache Webanwendung entwickeln, in der wir verschiedene UI5 Controls implementieren. In der Anwendung soll eine UI5-Liste mit Kontakten angezeigt werden, zu der über UI5-Inputs und einen UI5-Button neue Kontakte hinzugefügt werden können. Dafür werden wir Views und dazugehörige Controller erstellen, sowie einige Testdaten anzeigen.

Schritt 1 – Neue Angular Anwendungen erstellen

Hierfür nutzen wir die Angular CLI. Wir spezifizieren den Befehl zum Anlegen eines Projektes mit dem Deskriptor „ui5-web-components-application“

ng new ui5-web-components-application

In Abb. 2 ist die generierte Projektstruktur abgebildet. App.module.ts ist das Mainmodul, das in der Hierarchie an oberster Stelle steht. Es versteht sich als Startpunkt für die Anwendung.

Generiertes Angular Projekt
Abbildung 2: Generiertes Angular-Projekt

Schritt 2 – Installation der UI5 Web Components

Um alle Features der UI5 Web Components verwenden zu können, installieren wir das entsprechende npm-Package.

npm install @ui5/webcomponents –save

Schritt 3 – Custom Elements in Angular erlauben

Angular unterbindet standardmäßig die Verwendung von Custom Elements. Um dies zu ändern, importieren wir „CUSTOM_ELEMENTS_SCHEMA“ von „@angular/core“.

App.module.ts:

import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
imports: [
    ...
],
schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Schritt 4 – Importieren der Controls die verwendet werden sollen:

In diesem Schritt sehen wir, wie die Controls, die wir verwenden wollen, in der App.module.ts importiert werden. Dieser Schritt ist notwendig, um die Controls global im Code verwenden zu können.

App.module.ts:

import "@ui5/webcomponents/dist/Button";
import "@ui5/webcomponents/dist/List";
import "@ui5/webcomponents/dist/StandardListItem"; 
import "@ui5/webcomponents/dist/CustomListItem";
import "@ui5/webcomponents/dist/GroupHeaderListItem"; 
import "@ui5/webcomponents/dist/Card"; 
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
import "@ui5/webcomponents/dist/Input";

Schritt 5 – Implementierung der Angular-Components:

In diesem Beispiel werden drei Komponenten implementiert. Ergänzend zu der App-Component, die in jeder Angular-App zu finden ist, werden je Komponenten für den Header und den User-Input entwickelt. Im Header wird eine ShellBar angezeigt. Im User-Input finden sich UI5-Inputs für Vorname, Nachname und die Telefonnummer. Mit einem UI5-Button kann der Kontakt gespeichert werden. Die Liste mit den Kontakten wird in der App.Component-View dargestellt.

UI5 Web Components Web Struktur
Abbildung 3: Projektstruktur mit neuen Komponenten

App.component.ts

In der App-Komponennte definieren wir eine Property, in der die Kontakte gespeichert werden. Wir greifen auf diese lokale Lösung zurück, da kein Backendsystem angeschlossen wird. Andere Komponenten können auf diese Property zugreifen.

contacts: any = [
        {
            firstName: 'John',
            lastname: 'Doe',
            phoneNumber: '012356481',
        },
        {
            firstName: 'Jane',
            lastname: 'Doe',
            phoneNumber: '025985321',
        },
        {
            firstName: 'Peter',
            lastname: 'Miller',
            phoneNumber: '15684613',
        },]

header.component.html

In der View der Header-Komponente binden wir mittels des Tags <ui5-shellbar> die Shellbar ein:

<header className="app-header">
    <ui5-shellbar primary-title="Simple UI5 Web Components App">
    </ui5-shellbar>
</header>

user-input.component.html

In der User-Input-View platzieren wir die beiden Controls: <ui5-input> und <ui5-button>. CSS-Klassen, Properties und Events werden innerhalb des HTML-Tags festgelegt.

<div class="create-contact-wrapper" style="display: flex">
    <ui5-label>My new contact:</ui5-label>
    <ui5-input #firstNameInput placeholder="Firstname" class="add-contact-element-width" id="add-input"> </ui5-input>
    <ui5-input #lastNameInput placeholder="Lastname" class="add-contact-element-width" id="add-input"> </ui5-input>
    <ui5-input #phoneNumberInput placeholder="Phonenumber" class="add-contact-element-width" id="add-input"> </ui5-input>
    <ui5-button (click)="handleAddcontact()" design="Emphasized" class="add-contact-element-width">Add contact
    </ui5-button>
</div>

user-input.component.ts

Die Applikationslogik des Buttons wird in der Komponentenklasse des user-inputs definiert. Beim Klicken werden die Kontakte in app.component.ts um ein Element ergänzt.

handleAddContact() {
    this.parent.contacts.push({
      firstName: this.firstname.nativeElement.value,
      lastName: this.lastname.nativeElement.value,
      phoneNumber: this.phonenumber.nativeElement.value,
    });
  }
Simple UI5 Web Components App
Simple UI5 Web Components App

Fazit

Mit aktuellen UI-Frameworks können mit dem richtigen Know-How Apps entwickelt werden, deren User-Experience und Design sehr nahe an native SAPUI5-Apps kommen. Eine intuitive und einfache User-Experience kommt durch die Verwendung der Controls ohne zusätzliche Aufwände zustande. Dies ist besonders für Unternehmen interessant, die UI5-Apps entwickeln möchten aber mehr Know-How in anderen UI-Frameworks besitzen und dieses weiterhin nutzen möchten. UI5 Web Components liefert hierfür genau die richtige Basis. Das Angebot von UI-Controls ermöglicht es Entwickler/innen, verschiedenste Apps in ihrer gewohnten Entwicklungsumgebung und Programmiersprache mit relativ wenig Aufwand zu entwickeln und dabei die etablierte Fiori-Designlinie umzusetzen. Sie profitieren dabei weiterhin von den Features anderer Entwicklungsplattformen, wie der Möglichkeit in Angular und damit auch in TypeScript zu entwickeln. Aktuell umfasst UI5 Web Components viele UI5-Controls, mit denen bereits produktiv entwickelt werden kann. SAP veröffentlich regelmäßig neue UI5-Controls, sodass davon ausgegangen werden kann, dass die Bibliothek in den kommenden Jahren stark erweitert wird. Die aktuelle Roadmap und Releaseplanung sind auf GitHub veröffentlich.

Falls Sie ähnliche Anforderungen haben, einen qualifizierten Berater benötigen oder sich gerne austauschen möchten, kontaktieren Sie uns gerne.

Update:

Am 10.11.2021 ging SAP den nächsten Schritt mit UI5 Web Components und beendete offiziell die Beta-Phase und veröffentlichte den ersten stabilen Release (Version 1.0).

In dem Release wurden folgenden Punkte auf Basis des Feedbacks von Beta Usern umgesetzt:

  • Verbesserung und Erweiterung der Funktionen bestehender Controls
  • Bereitstellung neuer Controls (bspw. Dynamic Side Content)
  • Erweiterung der Dokumentation
  • Weiterentwicklung der Fiori-Designlinien und Bereitstellung des neuen Themes „Horizon“

UI5 Web Components ist mittlerweile produktiv bei SAP-Lösungen im Einsatz, bspw. bei SAP Success Factors und SAP Graph.

In Zukunft sind weitere Releases mit neuen Controls und Features geplant.

Autor: Marcel Krebs

Kontakt: https://quanto-solutions.de/#kontakt

Tags