Examples

PDFViewer Documentation Showcase.
Each sample project can be used as a singe project

For more information about this examples see the Documentation and the API Reference.

Name	Description
PDF Viewer - Simple	Simple example for PDF viewer	Download
PDF Viewer - Dynamic control loading	Dynamic load of Nubexx or SAP PDFViewer	Download
PDF Viewer - Watermark	PDFViewer with watermark overlay	Download

Simple usage

Page.view.xml

<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%">
        <FlexBox>
            <OverflowToolbar>
                <Button text="Valid PDF file" press="onCorrectPathClick" />
                <Button text="Invalid PDF file" press="onIncorrectPathClick" />
                <Button text="Toggle Print-Button" press="onTogglePrintButton" />
                <Button text="Toggle Download-Button" press="onToggleDownloadButton" />
            </OverflowToolbar>
        </FlexBox>

        <nbx.PDFViewer:PDFViewer id="idPDFViewer" source="{/Source}" title="{/Title}" height="{/Height}">
            <nbx.PDFViewer:pdfViewerOptions>
                <nbx.PDFViewer:Option name="allowOverrideProtectedApiSettings" value="true" />
                <nbx.PDFViewer:Option name="toolbarShowSignedFlag" value="true" />
                <nbx.PDFViewer:Option name="askForFileNameOnDownload" value="true" />
            </nbx.PDFViewer:pdfViewerOptions>

            <nbx.PDFViewer:layoutData>
                <FlexItemData growFactor="1" />
            </nbx.PDFViewer:layoutData>
        </nbx.PDFViewer:PDFViewer>
    </FlexBox>

</mvc:View>

Page.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"], function (Controller, JSONModel) {
  "use strict";

  const PageController = Controller.extend("com.nbx.PDFViewer.Example.Simple.Page", {
    onInit: function () {
      this._sValidPath = sap.ui.require.toUrl("com/nbx/PDFViewer/Example/Simple/Example.pdf");

      this._oModel = new JSONModel({
        Source: this._sValidPath,
        Title: "Nubexx PDFViewer - Example Simple",
        Height: "100%"
      });

      const oView = this.getView();
      oView.setModel(this._oModel);

      this._oPdfViewer = oView.byId("idPDFViewer");
      this._oPdfViewer.setShowDownloadButton(false);
    },

    onCorrectPathClick: function () {
      this._oModel.setProperty("/Source", this._sValidPath);
    },

    onIncorrectPathClick: function () {
      this._oModel.setProperty("/Source", "com/nbx/PDFViewer/Example/Simple/nonexisting.pdf");
    },

    onTogglePrintButton: function () {
      this._oPdfViewer.setShowPrintButton(!this._oPdfViewer.getShowPrintButton());
    },

    onToggleDownloadButton: function () {
      this._oPdfViewer.setShowDownloadButton(!this._oPdfViewer.getShowDownloadButton());
    }
  });

  return PageController;
});

manifest.json

{
  "_version": "1.28.0",
  "sap.app": {
    "id": "com.nbx.PDFViewer.Example.Simple",
    "type": "application",
    "title": "Nubexx PDFViewer - Example Simple",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "com.nbx.PDFViewer.Example.Simple.Page",
      "type": "XML",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.71.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "com.nbx.pdfviewer": {}
      }
    },
    "resourceRoots": {
      "com.nbx.pdfviewer": "ui5_libpdf"
    },
    "config": {
      "sample": {
        "stretch": true,
        "files": ["Page.view.xml", "Page.controller.js", "manifest.json"]
      }
    }
  }
}

Dynamic control loading

Page.view.xml

<mvc:View
    controllerName="com.nbx.PDFViewer.Example.Dynamic.Page"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%">

    <FlexBox direction="Column" class="sapUiSmallMargin" height="100%">
        <FlexBox>
            <SegmentedButton id="idSegmentedButton" class="sapUiSmallMarginBottom"
                selectionChange="onSegmentedButtonSelectionChange">
                <items>
                    <SegmentedButtonItem text="Nubexx PDFViewer" key="nbx" />
                    <SegmentedButtonItem text="SAP PDFViewer" key="sap" />
                </items>
            </SegmentedButton>
        </FlexBox>
        <PDFViewer id="idPDFViewer" source="{/Source}" isTrustedSource="true" title="{/Title}">
            <layoutData>
                <FlexItemData growFactor="1" />
            </layoutData>
        </PDFViewer>
    </FlexBox>
</mvc:View>

Page.controller.js

sap.ui.define(
  [
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "com/nbx/PDFViewer/Example/Dynamic/PdfViewerLoader",
    "sap/base/Log"
  ],
  function (Controller, JSONModel, PdfViewerLoader, Log) {
    "use strict";

    const PageController = Controller.extend("com.nbx.PDFViewer.Example.Dynamic.Page", {
      onInit: function () {
        this.byId("idSegmentedButton").setWidth("300px");
        const oModel = new JSONModel({
          Source: sap.ui.require.toUrl("com/nbx/PDFViewer/Example/Dynamic/Example.pdf"),
          Title: "Nubexx PDFViewer - Example Dynamic control loading"
        });

        this.getView().setModel(oModel);
        this._pdfViewer = this.byId("idPDFViewer");
        this._updatePdfViewer("nbx");
      },

      _updatePdfViewer: function (pdfViewerType) {
        PdfViewerLoader.create(pdfViewerType)
          .then(
            function (modules) {
              const PDFViewer = modules.PdfViewer;
              const oNewPdfViewer = new PDFViewer();

              if (pdfViewerType === "nbx") {
                const aPdfViewerOptions = [
                  new modules.Option({ name: "allowContextMenu", value: true }),
                  new modules.Option({ name: "toolbarShowSignedFlag", value: true })
                ];
                aPdfViewerOptions.forEach(function (pdfViewerOption) {
                  oNewPdfViewer.addAggregation("pdfViewerOptions", pdfViewerOption);
                });
              }

              PdfViewerLoader.replaceControl(this._pdfViewer, oNewPdfViewer);
              this._pdfViewer = oNewPdfViewer;
            }.bind(this)
          )
          .catch(function (error) {
            Log.error(error);
          });
      },

      onSegmentedButtonSelectionChange: function (event) {
        const sPdfViewerType = event.getParameter("item").getKey();
        this._updatePdfViewer(sPdfViewerType);
      }
    });

    return PageController;
  }
);

PdfViewerLoader.js

sap.ui.define(["sap/base/Log"], function (Log) {
  "use strict";

  return {
    /**
     * Create an instance of Nubexx or SAP PDFViewer control.
     *
     * @param {string} type                    - Pass "nbx" to load Nubexx PDFViewer control
     * @returns {Promise<sap.ui.core.Control>} - Promise of the loaded control
     */
    create: function (type) {
      return new Promise(function (resolve, reject) {
        const aRequiredModules =
          type === "nbx" ? ["com/nbx/pdfviewer/PDFViewer", "com/nbx/pdfviewer/Option"] : ["sap/m/PDFViewer"];

        sap.ui.require(aRequiredModules, function (...aLoadedModules) {
          if (!aLoadedModules) {
            return reject("Required modules could not be loaded:", aLoadedModules);
          }

          const [PdfViewer, Option] = aLoadedModules;
          return resolve({ PdfViewer, Option });
        });
      });
    },

    /**
     * Replace oControlToReplace width oNewControl and transfer selected properties
     * _copyAggregations and  _copyBindings;
     *
     * @param {sap.ui.core.Control} oControlToReplace   - Control to replace
     * @param {sap.ui.core.Control} oNewControl         - New control
     */
    replaceControl: function (oControlToReplace, oNewControl) {
      const aIgnoreProperties = ["showPrintButton", "showToolbar", "showWatermark", "downloadFileName"];
      const aIgnoreAggregations = ["pdfViewerOptions"];

      if (!oControlToReplace) {
        Log.error("Control to replace could not found control.");
        return;
      }

      this._copyProperties(oControlToReplace, oNewControl, aIgnoreProperties);
      oNewControl.sId = oControlToReplace.getId();

      this._copyAggregations(oControlToReplace, oNewControl, aIgnoreAggregations);
      this._copyBindings(oControlToReplace, oNewControl);

      const oParent = oControlToReplace.getParent();
      const iIndex = oParent.getItems().indexOf(oControlToReplace);

      oParent.removeItem(oControlToReplace);
      oControlToReplace.destroy();
      oParent.insertItem(oNewControl, iIndex);
    },

    /**
     * Copy control properties with exceptions.
     *
     * @param {sap.ui.core.Control} oSource - Source control
     * @param {sap.ui.core.Control} oTarget - Target control
     * @param {Array} ignoreProperties  - Array with properties to ignore
     */
    _copyProperties: function (oSource, oTarget, ignoreProperties) {
      for (const sProperty of Object.keys(oSource.getMetadata().getAllProperties())) {
        if (ignoreProperties.indexOf(sProperty) === -1) {
          oTarget.setProperty(sProperty, oSource.getProperty(sProperty));
        }
      }
    },

    /**
     * Copy control aggregations.
     *
     * @param {sap.ui.core.Control} oSource - Source control
     * @param {sap.ui.core.Control} oTarget - Target control
     * @param {Array} ignoreAggregations    - Array with aggregation names to ignore
     */
    _copyAggregations: function (oSource, oTarget, ignoreAggregations) {
      const aAggregations = oSource.getMetadata().getAllAggregations();
      Object.keys(aAggregations).forEach(function (aggregationName) {
        if (ignoreAggregations.indexOf(aggregationName) === -1) {
          const vAggregation = oSource.getAggregation(aggregationName);
          if (Array.isArray(vAggregation)) {
            vAggregation.forEach(function (item) {
              oTarget.addAggregation(aggregationName, item);
            });
          } else if (vAggregation) {
            oTarget.setAggregation(aggregationName, vAggregation);
          }
        }
      });
    },

    /**
     * Copy control bindings.
     *
     * @param {sap.ui.core.Control} oSource - Source control
     * @param {sap.ui.core.Control} oTarget - Target control
     */
    _copyBindings: function (oSource, oTarget) {
      const oBindingInfos = oSource.mBindingInfos;

      Object.keys(oBindingInfos).forEach(function (propertyName) {
        const oBindingInfo = oBindingInfos[propertyName];
        if (oBindingInfo.parts) {
          oTarget.bindProperty(propertyName, {
            parts: oBindingInfo.parts,
            formatter: oBindingInfo.formatter,
            mode: oBindingInfo.mode
          });
        } else {
          // single binding
          oTarget.bindProperty(propertyName, {
            path: oBindingInfo.path,
            model: oBindingInfo.model,
            type: oBindingInfo.type,
            formatter: oBindingInfo.formatter,
            mode: oBindingInfo.mode
          });
        }
      });
    }
  };
});

manifest.json

{
  "_version": "1.28.0",
  "sap.app": {
    "id": "com.nbx.PDFViewer.Example.Dynamic",
    "type": "application",
    "title": "Nubexx PDF Viewer - Example Dynamic control loading",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "rootView": {
      "viewName": "com.nbx.PDFViewer.Example.Dynamic.Page",
      "type": "XML",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.71.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "com.nbx.pdfviewer": {}
      }
    },
    "resourceRoots": {
      "com.nbx.pdfviewer": "ui5_libpdf"
    },
    "config": {
      "sample": {
        "stretch": true,
        "files": ["Page.view.xml", "Page.controller.js", "manifest.json"]
      }
    }
  }
}

Watermark

Page.view.xml

<mvc:View
    controllerName="com.nbx.PDFViewer.Example.Watermark.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%">
        <FlexBox>
            <OverflowToolbar>
                <Button text="Toggle Watermark" press="onToggleWatermark" />
            </OverflowToolbar>
        </FlexBox>

        <nbx.PDFViewer:PDFViewer id="idPDFViewer" source="{/Source}" title="{/Title}"
            showWatermark="{/ShowWatermark}" showDownloadButton="false">

            <nbx.PDFViewer:pdfViewerOptions>
                <nbx.PDFViewer:Option name="allowOverrideProtectedApiSettings" value="true" />
                <nbx.PDFViewer:Option name="defaultZoomValue" value="page-fit" />
            </nbx.PDFViewer:pdfViewerOptions>

            <nbx.PDFViewer:watermark>
                <nbx.PDFViewer:Watermark.Text text="{/WatermarkText}" color="rgba(0, 0, 0, 0.25)"
                    positionHorizontal="57" positionVertical="50"
                    alignHorizontal="Center" alignVertical="Middle" rotate="-45"
                    outlineColor="rgba(255, 255, 255, 0.5)" outlineWidth="1"
                    fontSize="15%" fontWeight="bold"
                />
                <nbx.PDFViewer:Watermark.Image src="{/WatermarkImage}" opacity="0.5" width="25"
                    positionHorizontal="5" positionVertical="5"
                    alignHorizontal="Left" alignVertical="Top"
                />
            </nbx.PDFViewer:watermark>

            <nbx.PDFViewer:layoutData>
                <FlexItemData growFactor="1" />
            </nbx.PDFViewer:layoutData>
        </nbx.PDFViewer:PDFViewer>
    </FlexBox>
</mvc:View>

PdfViewerLoader.js

sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"], function (Controller, JSONModel) {
  "use strict";

  const PageController = Controller.extend("com.nbx.PDFViewer.Example.Watermark.Page", {
    onInit: function () {
      this._oModel = new JSONModel({
        Source: sap.ui.require.toUrl("com/nbx/PDFViewer/Example/Watermark/Example.pdf"),
        WatermarkImage: "/Example.svg",
        WatermarkText: "For internal\nuse only",
        Title: "Nubexx PDFViewer - Example Watermark",
        ShowWatermark: true
      });

      const oView = this.getView();
      oView.setModel(this._oModel);

      this._oPdfViewer = oView.byId("idPDFViewer");
    },

    onToggleWatermark: function () {
      this._oPdfViewer.setShowWatermark(!this._oPdfViewer.getShowWatermark());
    }
  });

  return PageController;
});

manifest.json

{
  "_version": "1.28.0",
  "sap.app": {
    "id": "com.nbx.PDFViewer.Example.Watermark",
    "type": "application",
    "title": "Nubexx PDFViewer - Example Watermark",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "rootView": {
      "viewName": "com.nbx.PDFViewer.Example.Watermark.Page",
      "type": "XML",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.71.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "com.nbx.pdfviewer": {}
      }
    },
    "resourceRoots": {
      "com.nbx.pdfviewer": "ui5_libpdf"
    },
    "config": {
      "sample": {
        "stretch": true,
        "files": ["Page.view.xml", "Page.controller.js", "manifest.json"]
      }
    }
  }
}