UI5 PDF Viewer Control – Einfache Integration in Ihre SAPUI5-Fiori-App

In diesem Beitrag möchte ich Ihnen zeigen, wie einfach sie den Nubexx UI5 PDF Viewer in Ihre App integrieren.

Installation und Einbindung

Der Nubexx PDF Viewer wird als Library auf Ihrem SAP-System per Transport zur Verfügung gestellt.
Damit die Library in Ihrer Entwicklungsumgebung geladen werden kann, sollte die Destination Ihres SAP-Systems in der ui5.yaml entsprechend konfiguriert sein.

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
           - path: /resources/com/nbx/pdfviewer
             url: your.sap-system.tld
             client: "001"
             destination: MyDestination
             pathPrefix: /sap/bc/ui5_ui5/nbx/libpdf/

• In Zeile 7: Unter diesem Pfad werden die Viewer-Ressource in der Entwicklungsumgebung verfügbar gemacht (VSCode bzw. BAS)
• In Zeile 8 - 10 geben Sie die URL, die Client-ID und den Destination Name, welcher in VSCode oder BAS bereits konfiguriert sein muss.
• In Zeile 11 ist angegeben unter welchem Pfad die Nubexx PDF Viewer Ressourcen auf Ihrem SAP-System verfügbar sind.
   

Zusätzlich muss die Library noch in der manifest.json als Abhängigkeit eingetragen sein.

"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.m": {},
      "sap.ui.core": {},
      "com.nbx.pdfviewer": {}
    }
  },
}

• In Zeile 6: wird der Namespace für den Nubexx PDF Viewer registriert.

Verwendung in der XML-View

Anschließend können Sie den PDF Viewer einfach in Ihrer View verwenden.

<mvc:View
    controllerName="com.nbx.PDFViewer.Example.Simple.Page"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:nbx.PDFViewer="com.nbx.pdfviewer"
    height="100%">
    <FlexBox direction="Column" class="sapUiSmallMargin" height="100%">
        <nbx.PDFViewer:PDFViewer id="idPDFViewer"
            source="Example.pdf"
            title="Demo-PDF"
            height="100%">
            
            <nbx.PDFViewer:layoutData>
                <FlexItemData growFactor="1" />
            </nbx.PDFViewer:layoutData>
        </nbx.PDFViewer:PDFViewer>
    </FlexBox>
</mvc:View>

• In Zeile 5: erfolgt die XML Namespace Declaration für den Nubexx PDF Viewer
• Die Nutzung des Nubexx PDF Viewer erfolgt identisch zum bekannten SAP PDF Viewer. In Zeile 8 und 16 erfolgt der Verweis auf das Controll über den zuvor deklarierten XML Namespace.