SAP Business One Web-Client-Oberflächen erweitern

UI API Extension Entwicklung mit Visual Studio Code

In einem kürzlich veröffentlichten Video stellt das SAP Business One Product Management die Entwicklung von UI API Erweiterungen für den SAP Business One Web Client vor. Dieser Prozess ermöglicht es dabei Unternehmen, ihre Web-Client-Benutzeroberflächen an spezifische Geschäftsanforderungen anzupassen. Als Entwicklungsumgebung verwendet SAP Business One Visual Studio Code (VS Code) verwendet.

Vorbereitung und Installation

Zu Beginn des Videos erfährt man, dass man die Anpassung des Web-Clients durch UI API-Erweiterungen vornehmen kann. Zunächst muss man den Visual Studio Code mit dem entsprechenden Plug-in sowie dem Web Client Inspector ausgestattet. Diese Erweiterungen sind dabei notwendig, um ein UI API-Projekt zu erstellen. Nach der Installation kann man den Assistenten zur Projekterstellung starten.

Projekterstellung Schritt für Schritt

Der Assistent zur Projekterstellung führt den Entwickler durch mehrere Schritte. Zuerst wählt man bei Minute 0:40 die „SAP Business One Web Client Extension UI API“. Danach müssen grundlegende Informationen wie etwa die Anwendungs-ID, die Anwendungsversion und der Anbieter der Anwendung eingetragen werden. Diese Angaben demonstriert das Video ab Minute 0:51 im Video demonstriert.

Auswahl der zu erweiternden Ansicht

Im nächsten Schritt, ab Minute 1:16, kommt es zur Auswahl der Ansicht, die im SAP Business One Web-Client die man erweitern will. Hierbei kann man sich zwischen einem Systemobjekt oder einem benutzerdefinierten Objekt (UDO) entscheiden. Im Beispielvideo wird die „Business Partner Detail“-Ansicht gewählt. Die URL dieser Ansicht wird bei Minute 1:40 in den Assistenten eingefügt, um die Erweiterung zu starten.

Struktur des Projekts

Nach der Einrichtung erläutert das Video die Struktur des Projekts ab Minute 2:08. Das Layout wird in einer JSON-Datei beschrieben, die alle UI-Elemente enthält. Entwickler müssen lediglich festlegen, wo man das neue UI-Element platzieren will. Als Beispiel im Video legt man einen neuen Button an, der vor dem „Edit“-Button eingefügt wird.

JavaScript-Controller

Der nächste Schritt, der ab Minute 2:48, führt in den JavaScript-Controller, der die gesamte Logik der Anwendung enthält. In diesem Fall erstellt man einen Event-Handler für den neuen Button, der bei einem Klick alle Unternehmensinformationen aus der Service-Schicht abruft und in einer Nachricht-Box anzeigt.

Vorschau und Test des SAP Business One Web-Client

Das Video präsentiert eine neue Funktion mit der Vorschau-Option, die ab Minute 3:13. Diese ermöglicht es, das Projekt vor der Veröffentlichung zu testen. Im Video wird gezeigt, wie der neue Button „Get Company Information“ im SAP Business One Web-Client erscheint und funktioniert.

Fazit

Die Möglichkeit, UI API-Erweiterungen mit Visual Studio Code zu entwickeln, bietet Unternehmen eine flexible Methode, um ihre SAP Business One Web-Client-Oberflächen individuell anzupassen. Dieser Prozess ist strukturiert und benutzerfreundlich, sodass Entwickler schnell und effizient arbeiten können. Mit der neuen Vorschau-Funktion kann man Änderungen sofort testen, was die Entwicklungszeit erheblich verkürzt.

Zusammenfassend zeigt das Video, dass die Anpassung von Web-Client-Ansichten mit dem UI API und Visual Studio Code nicht nur möglich, sondern auch relativ einfach zu handhaben ist. Entwickler können spezifische Geschäftsanforderungen besser umsetzen und die Benutzerfreundlichkeit ihrer SAP Business One Umgebung verbessern.

SAP B1 Blog