DIsplay two PDF Files in SAP UI5 PDFViewer

Question

I want to mdisplay to local PDF files in my sap ui5 application but it is not showing the files.

I tried the following but it does not work.

I cannot make the path work properly

I have the files on my src folder inside the APP.

Controller:

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

    var PageController = Controller.extend("PdfViewTest.controller.App", {

        onInit : function () {
            this._sValidPath = sap.ui.core.URI("webapp/src/dummy.pdf") //sap.ui.core.URI("sap/m/sample/PdfViewTest") + "/sample.pdf"; 
            this._sInvalidPath = sap.ui.require.toUrl("sap/m/sample/PdfViewTest") + "/sample_nonexisting.pdf";
            this._oModel = new JSONModel({
                Source: this._sValidPath,
                Title1: "My Title 1",
                Title2: "My Title 2",
                Height: "600px"
            });
            this.getView().setModel(this._oModel);
        },

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

        onIncorrectPathClick: function() {
            this._oModel.setProperty("/Source", this._sInvalidPath);
        }
    });

    return PageController;

View:

<mvc:View
        controllerName="PdfViewTest.controller.App"
        displayBlock="true"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:pdf="PdfViewTest.control">
    <App>
        <ScrollContainer
        height="100%"
        width="100%"
        horizontal="true"
        vertical="true">
        <FlexBox class="sapUiSmallMargin" direction="Column" renderType="Div">
            <FlexBox>
                <Button text="Correctly Displayed" press="onCorrectPathClick"/>
                <Button text="Loading Error" press="onIncorrectPathClick"/>
            </FlexBox>
            <FlexBox direction="Row" fitContainer="true" renderType="Div">
                <PDFViewer class="sapUiSmallMarginEnd" source="webapp/src/dummy.pdf" title="{/Title1}" height="{/Height}" width="auto">
                    <layoutData>
                        <FlexItemData growFactor="1"/>
                    </layoutData>
                </PDFViewer>
                <PDFViewer class="sapUiSmallMarginBegin" source="{/Source}" title="{/Title2}" height="{/Height}" width="auto">
                    <layoutData>
                        <FlexItemData growFactor="1"/>
                    </layoutData>
                </PDFViewer>
            </FlexBox>
            <!-- <Page title="PdfView Test">
                
                <content>
                    <pdf:PdfView id="pdfView"></pdf:PdfView>
                </content>
            </Page> -->
        </FlexBox>
        </ScrollContainer>
    </App>
</mvc:View>

Piyush aggarwal · Accepted Answer · 2023-07-30 16:45:21Z

0

your source shall be a path relative from ypir XML view. For example if yur directly strucutre is like below:

webapp/
   -/XML/app.view.xml
   -/controller/app.controller.js
   -/files/sample.pdf

Then in your XML path should be ../files/sample.pdf

answered Jul 30, 2023 at 16:45

Piyush aggarwal

7722 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

DIsplay two PDF Files in SAP UI5 PDFViewer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related