In der modernen Geschäftswelt ist es entscheidend, agil und effizient auf neue Anforderungen zu reagieren. SAPUI5 ist ein leistungsstarkes Framework, das dir genau das ermöglicht: ansprechende, browserbasierte Anwendungen zu erstellen, die mit SAP-Systemen integriert sind. Doch wie fängt man an? Und wie entwickelt man in kürzester Zeit eine funktionale App, die Mehrwert bietet? Dieser Blogartikel SAPUI5 für Einsteiger gibt dir eine kompakte Einführung und zeigt dir Schritt für Schritt, wie du loslegen kannst.
Martin Koch
SAP BTP Enthusiast / SAP Alumni / Champagner Händler
Ich bin SAP Cloud Consultant, Architekt und Entwickler der ersten Stunde – um es auf neudeutsch zu sagen ein „SAP Cloud Veteran und Enthusiast“. Neben der SAP Business Technology Platform entwickle ich seit dem allerersten Release SAPUI5 und SAP Fiori Apps. Für SAP bin ich weltweit erfolgreich als Trainer im Bereich neuer Technologien (SAP BTP, Integration, SAPUI5, Fiori, Mobile, SAP HANA, Security, SAP Build Apps, SAP Build Workzone) im Einsatz. Besonders stolz bin ich darauf, zu den weltweit am besten bewerteten Trainern zu gehören.
Seit 2021 bin ich SAP Press Autor im Bereich der SAP Business Technology Platform und User Experience. Hier gibt es voerst neun Publikationen zu den Themen Sicherheit in der SAP BTP, SAP Cloud Connector, Git und SAP, Mobile Service, SAP Fiori Elements und SAP Build Apps.
Was ist SAPUI5?
SAPUI5 (SAP User Interface for HTML5) ist ein UI-Framework, das auf gängigen Webtechnologien wie HTML5, CSS und JavaScript basiert. Es wurde von SAP entwickelt, um die Erstellung benutzerfreundlicher Oberflächen zu erleichtern, insbesondere im SAP-Ökosystem. Das Framework bietet eine Vielzahl vorgefertigter UI-Komponenten, eine starke Entwicklungsinfrastruktur und umfassende Tools zur Erstellung mobiler und desktopfähiger Anwendungen.
Vorteile von SAPUI5:
- Responsives Design: Eine App funktioniert nahtlos auf verschiedenen Geräten (Desktop, Tablet, Smartphone)
- Vorgefertigte Komponenten: Du sparst Zeit durch die Nutzung von Buttons, Tabellen und anderen Elementen.
- Integration mit SAP: Optimal abgestimmt auf SAP-Systeme wie SAP S/4HANA oder die SAP Business Technology Platform.
- Flexibilität: Anpassungen sind leicht möglich, um den spezifischen Anforderungen deines Unternehmens gerecht zu werden.
Warum SAPUI5 lernen?
Für Unternehmen, die auf SAP-Technologien setzen, ist SAPUI5 der Standard für die Entwicklung moderner Benutzeroberflächen. Wenn du SAPUI5 beherrschst, kannst du:
- Eigenständig Anwendungen entwickeln, ohne tief in die Backend-Logik eintauchen zu müssen.
- Prozesse optimieren und benutzerfreundliche Interfaces bereitstellen.
- Wertvolle Kompetenzen in einem stark gefragten Bereich aufbauen.
Der erste Schritt: Die Entwicklungsumgebung einrichten
Bevor du loslegst, brauchst du eine funktionierende Entwicklungsumgebung. Hier sind die grundlegenden Schritte:
SAP Business Application Studio oder Visual Studio Code
Das SAP Business Application Studio (BAS) ist die empfohlene Cloud-Entwicklungsumgebung von SAP. Alternativ kannst du mit Visual Studio Code arbeiten, das ebenfalls viele (nahzu alle Funktionen des BAS) Funktionen bietet.
So richtest du die Umgebung ein:
- SAP Business Application Studio:
- Melde dich bei deiner SAP BTP (Business Technology Platform) an.
- Erstelle ein neues Dev-Space für SAP Fiori oder SAPUI5.
- Lokale Entwicklungsumgebung:
- Installiere Node.js und den SAPUI5-Toolkit-Generator.
- Nutze Visual Studio Code als Editor.
SAPUI5 SDK
Das SAPUI5 SDK bietet umfassende Dokumentationen, Beispiele und Tutorials. Es ist eine unverzichtbare Ressource für Einsteiger und Profis gleichermaßen.
Schritt-für-Schritt-Anleitung: Deine erste SAPUI5-App erstellen
Nun geht es an die Praxis. Hier zeigen wir dir, wie du eine einfache App erstellst, die Daten anzeigt und auf Benutzerinteraktionen reagiert.
Schritt 1: Projekt anlegen
- Öffne deine Entwicklungsumgebung.
- Erstelle ein neues SAPUI5-Projekt mit dem Generator oder manuell.
- Lege die grundlegende Projektstruktur an:
- index.html: Startpunkt der App.
- Component.js: Hauptkomponente der Anwendung.
- view/Main.view.xml: XML-basierte Ansicht der App.
- controller/Main.controller.js: Logik für die Ansicht.
Schritt 2: Basis-Layout erstellen
Erstelle in der Datei
ein einfaches Layout, z. B. mit einem Button und einer Tabelle:
Main.view.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="myApp.controller.Main">
<Page title="Meine erste App">
<content>
<Button text="Klick mich" press="onButtonPress" />
<Table id="myTable">
<columns>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Alter" />
</Column>
</columns>
</Table>
</content>
</Page>
</mvc:View>Schritt 3: Controller-Logik hinzufügen
In der Datei
implementierst du die Logik, um z. B. Daten an die Tabelle zu binden:
Main.controller.ts
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("myApp.controller.Main", {
onInit: function () {
// Beispiel-Daten
const oData = {
Personen: [
{ Name: "Max", Alter: 25 },
{ Name: "Anna", Alter: 30 }
]
};
// Modell erstellen und Ansicht zuweisen
const oModel = new sap.ui.model.json.JSONModel(oData);
this.getView().setModel(oModel, "Personen");
},
onButtonPress: function () {
alert("Button wurde geklickt!");
}
});
});
Schritt 4: Daten an die Tabelle binden
Binde die Daten aus dem Modell an die Tabelle, indem du in der XML-Datei
folgende Zeilen ergänzt:
Main.view.xml
<Table id="myTable" items="{Personen>/Personen}">
<columns>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Alter" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Personen>Name}" />
<Text text="{Personen>Alter}" />
</cells>
</ColumnListItem>
</items>
</Table>
Jetzt zeigt die Tabelle die Beispiel-Daten aus deinem Modell an.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Die App verbessern: Erweiterungen und Best Practices
1. Navigation hinzufügen
Für komplexere Anwendungen möchtest du mehrere Seiten einbauen. Mit dem SAPUI5-Router kannst du leicht zwischen Ansichten navigieren.
2. Daten aus einem OData-Service
SAPUI5 unterstützt die Integration mit OData-Services. So kannst du Daten aus deinem SAP-System abrufen und anzeigen.
3. Responsives Design
Nutze Layout-Komponenten wie sap.ui.layout.Grid, um sicherzustellen, dass deine App auf jedem Gerät gut aussieht.
4. Testing und Debugging
Teste deine App in verschiedenen Browsern und nutze Tools wie den SAPUI5 Support Assistant, um Performance- und Designprobleme zu identifizieren.
Fazit: Dein Einstieg in SAPUI5
Mit SAPUI5 kannst du in kürzester Zeit funktionale, benutzerfreundliche Apps erstellen. Es ist ein vielseitiges Framework, das dir alle Werkzeuge an die Hand gibt, um moderne Benutzeroberflächen zu entwickeln – egal ob für mobile Geräte oder den Desktop.
Die hier gezeigte Beispiel-App ist nur der Anfang. In unserem Buch „SAPUI5: Der umfassende Leitfaden für Einsteiger“ findest du eine Schritt-für-Schritt-Anleitung, detaillierte Erklärungen und viele Praxistipps, die dir helfen, tiefer in die Materie einzusteigen. Egal, ob du Entwickler, Berater oder einfach nur neugierig bist – unser Buch zeigt dir den Weg.
Jetzt loslegen: Besuche unsere Buchseite und sichere dir dein Exemplar. Werde zum SAPUI5-Profi und baue Anwendungen, die begeistern!