SAP Document AI: UI-Integration per Fiori App.

Im Einführungsartikel unserer Blogreihe haben wir SAP Document AI als strategischen Baustein für eine Clean-Core-Architektur betrachtet. In diesem ersten Deep Dive widmen wir uns dem am häufigsten nachgefragten Muster in der Praxis: Der benutzerzentrierten UI-Integration nach dem „Human-in-the-loop“-Prinzip. Hierbei überlassen wir der künstlichen Intelligenz die schwere Arbeit der Datenextraktion, behalten aber die volle Kontrolle durch ein maßgeschneidertes Validierungs-Frontend.

Business Szenario: Schluss mit dem Abtippen

In vielen Unternehmen sieht die Realität der Rechnungsverarbeitung noch immer so aus: Eine Rechnung trifft als PDF-Anhang per E-Mail ein. Ein Sachbearbeiter öffnet das Dokument auf dem einen Bildschirm und tippt im anderen Bildschirm mühsam Kreditorennummer, Rechnungsbetrag, Steueranteile und Positionsdaten manuell in das SAP-System ein. Das kostet wertvolle Zeit und ist zudem extrem fehleranfällig.

Das Ziel unseres Szenarios: Der Sachbearbeiter lädt das Dokument über eine intuitive Web-Oberfläche hoch. Die SAP Document AI extrahiert die Daten im Hintergrund in Sekundenschnelle. Der Nutzer sieht das Ergebnis sofort visuell aufbereitet, korrigiert bei Bedarf minimale Abweichungen und gibt den Beleg mit einem Klick zur Buchung frei.

Lösungsarchitektur

Die Architektur dieses Szenarios basiert vollständig auf dem Side-by-Side-Extensibility-Ansatz auf der SAP Business Technology Platform (BTP).

1. Frontend (SAPUI5 Freestyle): Eine maßgeschneiderte Applikation, die dem Nutzer den Upload ermöglicht und die extrahierten Daten neben dem Original-PDF anzeigt.

2. Backend (SAP CAP Service): Das Cloud Application Programming Model agiert als zentraler Orchestrator. Es nimmt das Dokument entgegen, leitet es an die Document AI API weiter und stellt die Business-Logik (z.B. Validierungsregeln) bereit.

3. Connectivity Layer (BTP Destination Service): Kapselt die Verbindungsparameter und die Authentifizierung zur KI-Schnittstelle.

4. SAP Document AI: Der eigentliche Business Service, der die Extraktion durchführt und das strukturierte JSON-Ergebnis zurückliefert.

Technische Umsetzung

Die technische Umsetzung kombiniert die Stärken des CAP-Frameworks mit der Flexibilität von SAPUI5.

Das CAP-Backend als API-Brücke

Der CAP-Service konsumiert die Schnittstellen der SAP Document AI, wie sie im SAP Business Accelerator Hub definiert sind. Da die Verarbeitung bei größeren Dokumenten asynchron erfolgt, implementieren wir im CAP-Handler eine entsprechende Logik:

• Schritt A (Upload): Der Service sendet die Payload per POST-Request an den Endpunkt /document-jobs und erhält als Antwort eine Job-ID.
• Schritt B (Status-Check): Über den Endpunkt /document-jobs/{id} fragt das System den Status ab oder nutzt das BTP-Callback-Szenario.
• Schritt C (Datenabruf): Sobald der Status auf SUCCESS steht, rufen wir das extrahierte JSON-Objekt ab.

Das SAPUI5-Frontend zur Visualisierung

Ein kritischer Erfolgsfaktor für die Akzeptanz durch die Anwender ist die UI-Gestaltung. Wir nutzen hierfür eine Fiori Freestyle App, da wir maximale Kontrolle über das Layout benötigen. Eine Split-Screen-Ansicht bietet sich an: links das PDF im Viewer, rechts die extrahierten Eingabefelder. Ein echtes Highlight im Code ist die Auswertung des confidence-Scores, den die SAP Document AI für jedes extrahierte Feld mitliefert:

• Ein Wert > 0.9 (90% Sicherheit) wird im UI grün (ValueState.Success) markiert.

• Ein Wert < 0.7 wird auffällig gelb oder rot hervorgehoben (ValueState.Warning / ValueState.Error), damit das Auge des Sachbearbeiters sofort auf die kritische Stelle gelenkt wird.

Voraussetzungen

Um dieses Szenario in Ihrer eigenen BTP-Landschaft zu implementieren, müssen folgende Voraussetzungen erfüllt sein:

• BTP Subaccount & Space: Ein eingerichtetes Cloud Foundry- oder Kyma-Environment

• Entwicklungsumgebung: SAP Business Application Studio (BAS), SAP Build Code oder eine lokale VS Code-Installation

• SAP Document AI Instanz: Eine Service-Instanz des Typs document-information-extraction im Space inklusive eines Service Keys für die Credentials

• BTP Destination: Eine konfigurierte Destination auf Subaccount-Ebene, welche die Credentials aus dem Service Key nutzt (OAuth2ClientCredentials), um den sicheren Aufruf aus CAP zu gewährleisten

• Optional: Eine Application Subscription für die Standard-UI von SAP Document AI zu Test- und Schemadefinitionszwecken

Fazit

Dieses Integrationsmuster ist immer dann die perfekte Wahl, wenn eine menschliche Interaktion und Validierung zwingend erforderlich ist. Das gilt besonders bei regulatorischen Vorgaben oder stark schwankender Datenqualität der Quellbelege.

Warum eine eigene CAP/UI5-App statt des SAP-Standards?

AP liefert über die Application Subscription bereits eine Standard-Oberfläche für Document AI mit. Warum lohnt sich dennoch der Aufwand einer Eigenentwicklung?

1. Das Berechtigungs-Problem: Die Standard-UI von SAP bietet bezüglich der Rollen oft nur ein Alles-oder-nichts-Modell. Im Enterprise-Kontext möchten Sie jedoch häufig, dass Sachbearbeiter aus Team A nur Dokumente aus Buchungskreis A sehen. Das lässt sich über gefilterte Ansichten in einer eigenen App sauber abbilden.
2. User Experience (UX): Mit einer eigenen UI5-App bauen Sie einen maßgeschneiderten, hürdenfreien Einstieg für die Endanwender, der exakt auf den bestehenden Geschäftsprozess optimiert ist.

Im nächsten Teil unserer Blogreihe verlassen wir die Benutzeroberfläche und wechseln in die Welt der vollständigen Automatisierung. In Teil 2 schauen wir uns an, wie wir mit der SAP Integration Suite eine komplette Dunkelverarbeitung für hohe Belegvolumina realisieren.

Möchten Sie die Effizienz Ihrer Sachbearbeitung durch intelligente Frontends steigern?

Die Experten von Rewion unterstützen Sie umfassend bei der Konzeption und Umsetzung Ihrer maßgeschneiderten BTP-Apps. Kontaktieren Sie uns noch heute für ein unverbindliches Beratungsgespräch. Vertiefende Informationen zu modernen Erweiterungen finden Sie auch in unseren Artikeln über SAP BTP Governance und zukunftssichere Erweiterungsstrategien für S/4HANA.