Erste Schritte

Diese Anleitung führt Sie durch den ersten Aufruf des Designers, das Anlegen einer Applikation und die wichtigsten Bedienelemente. Voraussetzung ist eine abgeschlossene Installation im SAP-System (On-Prem bzw. S/4HANA Cloud).

Designer öffnen

On-prem rufen Sie im SAPGUI die Transaktion /mobbuild/designer auf; in der S/4HANA Cloud öffnen Sie den Designer über seine Launchpad-Kachel. Es öffnet sich die Übersichtsseite des Mobile Builders im Browser:

Auf der Übersichtsseite sehen Sie alle bereits angelegten Applikationen Ihres Mandanten. Standardmäßig sind sie nach Änderungsdatum sortiert – die zuletzt bearbeitete App steht oben.

Listen- und Kachelansicht

Über die Schalter der Toolbar steuern Sie die Darstellung der Anwendungen:

Schalter	Funktion
Listenansicht / Kachelansicht	Umschalten zwischen Tabelle und Karten. Die Wahl wird im Browser gemerkt und beim nächsten Aufruf wiederhergestellt.
Sortieren	Sortierung wählen – nach Geändert am, Name oder Status.
Geschlossene Anwendungen anzeigen	Abgeschlossene App-Versionen (Status geschlossen) sind standardmäßig ausgeblendet und lassen sich hierüber wieder einblenden.
Suchen	Filtert über Name, Beschreibung, Transport, Paket und Benutzer. Wirkt in beiden Ansichten.
Aktualisieren	Lädt die Liste der Anwendungen neu.
Designer-Einstellungen (Zahnrad, rechts in der Werkzeugleiste)	Öffnet die Designer-Einstellungen – Theme und automatisches Speichern (siehe Designer-Einstellungen).

Die Kachelansicht zeigt dieselben Anwendungen als Karten – kompakter und übersichtlicher. Ein Klick auf eine Karte öffnet die App im Designer (wie ein Klick auf eine Tabellenzeile):

Die Listenansicht ist responsiv: Auf schmalen Bildschirmen rücken die weniger wichtigen Spalten (Paket, Transport, Benutzer …) automatisch in einen Aufklapp-Bereich unter der Zeile, während Name, Status und Aktionen sichtbar bleiben.

Aktionen je Anwendung

In der Zeile bzw. auf der Karte stehen – abhängig vom Status der Version – folgende Aktionen:

Aktion	Verfügbar	Wirkung
Löschen	alle Apps außer den mitgelieferten Beispiel-Apps	Verschiebt die App in den Papierkorb; über das Papierkorb-Symbol der Toolbar stellen Sie sie wieder her (siehe Versionsverlauf → Papierkorb)
Neue Version anlegen	nur geschlossene Versionen	Erzeugt aus der Version eine neue Kopie mit hochgezählter Versionsnummer (siehe Neue Version anlegen)
FLP-Registrierung wiederholen / entfernen	je nach Registrierungsstatus	Registriert die gebaute App erneut im Fiori Launchpad bzw. hebt die Registrierung auf (on-prem: Fiori Launchpad, Cloud: Registrierungsstatus)
App undeployen	on-prem nur offene Versionen, Cloud jede deployte App	Entfernt die gebaute App aus dem SAP-System (on-prem: App undeployen, Cloud: Undeploy)

In der Toolbar finden Sie außerdem den Papierkorb der Anwendungen und, nur on-prem, FLP-Gruppen verwalten (Fiori Launchpad → FLP-Gruppen).

Neue Applikation anlegen

Klicken Sie auf Anlegen. Es öffnet sich der Anlege-Dialog.

Feld	Bedeutung
Module Name	Technischer Name der Applikation – zugelassen sind Kleinbuchstaben, Ziffern und Unterstrich, beginnend mit einem Buchstaben; ab 15 Zeichen weist der Dialog auf die Kürzung des Repository-Namens beim Build hin
Application Namespace	Namespace der generierten UI5-App
Application Titel	Anzeigename der Applikation
Transport	Pflicht – eine offene Aufgabe aus Ihren eigenen Transportaufträgen, per Wertehilfe auswählbar (on-prem: Transport-Requests, Cloud: Pakete und Aufträge)
Paket	SAP-Paket, in dem die Applikation abgelegt wird; wird beim Speichern im Backend geprüft (on-prem: SAP-Pakete, Cloud: Pakete und Aufträge)
Beschreibung	Freitext zur Applikation

Nach dem Speichern öffnet sich der Designer mit der neuen, noch leeren Applikation. Legen Sie über View hinzufügen im Reiter App-Baum (View-Tree (App)) die erste View an.

Designer-Übersicht

Der Designer ist in sechs Bereiche aufgeteilt:

Nr.	Bereich
1	Komponenten & Templates – Sidebar links
2	View-Tree (Inhalt) – Reiter View-Baum, Baumstruktur der aktuellen View
3	Eigenschaften-Panel – Sidebar rechts
4	View-Tree (App) – Reiter App-Baum, Übersicht aller Views
5	Meta-Funktionen – Werkzeugleiste des Designers (App bauen, Speichern, Ausführen, …)
6	Landefläche & Vorschau – Arbeitsfläche in der Mitte

Die Panels in der linken und rechten Spalte lassen sich in der Höhe verschieben und einzeln einklappen – siehe Panels anpassen.

Erste Komponente platzieren

Aus der Sidebar links eine Komponente in die Landefläche ziehen. Beispiel: ein Button.

Sobald die Komponente platziert ist, sehen Sie auf der rechten Seite das Eigenschaften-Panel mit allen verfügbaren Attributen. Über den Reiter Eigenschaften können Sie z.B. den Text, den Typ oder die Breite einstellen.

Backend-Klasse anbinden

Selektieren Sie im Reiter App-Baum die View. Im Eigenschaften-Panel tragen Sie im Reiter Bindung in die View-Eigenschaft class den Namen einer ABAP-Klasse ein. Dort haben Sie dann zwei Optionen:

Aktion	Effekt
Backend Klasse generieren	Erzeugt eine neue ABAP-Klasse mit Standard-Methoden im selben Paket
Verbindung zur Backend-Klasse prüfen	Prüft, ob die eingetragene Klasse existiert und zur Anbindung passt

Über die Klasse kommunizieren Sie zur Laufzeit mit dem SAP-System – siehe Backend-Anbindung.

Vorschau

Über die Meta-Funktion Ausführen (Vorschau) starten Sie die App mit voller Funktionalität, ohne sie vorher zu bauen. Eingaben werden an das Backend geschickt, Methoden werden ausgeführt – ideal zum schnellen Testen während der Entwicklung.

Speichern und Bauen

Aktion	Effekt
Speichern	Persistiert den aktuellen Stand als Version im Versionsverlauf
App bauen	Baut die Applikation als eigenständige UI5-Anwendung im SAP-System – on-prem als BSP-Anwendung, in der S/4HANA Cloud als UI5-Repository mit Launchpad-Registrierung

Nach erfolgreichem Build steht die App im SAP-System als eigenständige Anwendung bereit und kann separat aufgerufen werden.

Nächste Schritte

• Designer-Oberfläche – die sechs Bereiche im Detail
• Backend-Anbindung – Logik im SAP-System implementieren
• Funktionen – Validatoren, Logic Flow, Funktionsbausteine