UI5 PDF Viewer Control - Easy integration into your SAPUI5 / Fiori APP

In this post I would like to show you how easy it is to integrate the Nubexx UI5 PDF Viewer into your app.

Installation and integration

The Nubexx PDF Viewer is provided as a library to your SAP system via transport.
To enable the library to be loaded in your development environment, the destination of your SAP system should be configured accordingly in ui5.yaml

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 line 7: The viewer resources are made available in the development environment (VSCode or BAS) under this path.
• In lines 8–10, enter the URL, client ID and destination name, which must already be configured in VSCode or BAS.
• Line 11 specifies the path under which the Nubexx PDF Viewer resources are available on your SAP system.
   

In addition, the library must be entered as a dependency in manifest.json

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

• In line 6: the namespace for the Nubexx PDF Viewer is registered.

Usage in the XML View

You can then simply use the PDF Viewer in your view.

<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 line 5: the XML namespace declaration for the Nubexx PDF Viewer is made.
• The Nubexx PDF Viewer is used in exactly the same way as the familiar SAP PDF Viewer. In lines 8 and 16, the reference to the controller is made via the previously declared XML namespace.