CODEWITHSUNDEEP
pdfsapui5
Jens Wronna
Jens Wronna

Reputation: 11

Issue with sap.m.PDFViewer (1.48) on mobile devices

I am developing a Master-Detail application which should show an embedded PDF in its detail view. The project is based on UI5 version 1.48, so the new PDFViewer control can be used.

In desktop mode, everything works as expected:
PDFViewer on Desktop

But on a mobile screen, PDF is not showing properly:
PDFViewer on Mobile

The data source property binding at the PDFViewer is done by OData path.

<FlexBox id="fbPDFViewer"
    direction="Column"
    renderType="Div"
    class="sapUiSmallMargin">
    <PDFViewer id="idPDFViewer"
        source="{myModel>/myPDFUrl}"
        title=""
        busy="true"
        showDownloadButton="false"
        height="700px"
        width="95%"
        loaded="onPDFLoaded"
        errorMessage="{i18n>notFoundText}"
        errorPlaceholderMessage="{i18n>notFoundText}">
    </PDFViewer>
</FlexBox>

Even the SAP sample for embedded usage doesn't work on mobile devices.

Upvotes: 1

Views: 2958

Answers (4)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18064

According to the source code (1.48), the viewer renders its PDF document directly in the app / iframe only when ..:

  1. The source is valid
  2. UI5 thinks the user is using a desktop computer (Device.system.desktop returns true) or the displayTypeapi, available since 1.58, is set to Embedded.
  3. UI5 detects that the user agent (browser) has a certain type of PDF plugin enabled. Currently, there are no known mobile browsers which support displaying PDF documents directly in the page.

The steps 2 and 3 explain why the PDF is not rendered on a mobile device even if the source is valid. In such cases, I guess the only option is to provide a download option instead of trying to render the PDF forcefully in the mobile app.

Upvotes: 2

Ondrej &#39;O&#39; Bohaciak
Ondrej &#39;O&#39; Bohaciak

Reputation: 11

On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link. We've made this note in Fiori Design Guidelines 1.48 and we'll add it to the SDK documentation.

(More in openui5 issue 1759 on GitHub)

Upvotes: 1

Nabi
Nabi

Reputation: 2566

You can use nabi.m.PDFViewer from the the nabi.m library. It works cross device, even on iOS (where you typically don't have the adobe PDF plugin). For details see https://github.com/nzamani/ui5-nabi-m

There you will find also how to try it out on localhost. I have also added some detailed instructions for deployment of the library to NW ABAP as well as SAP CP.

You can find live demos at http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.PDFViewer and http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.InPagePDFViewer

Open the two links on your iOS device or any other device to see how it looks like.

Upvotes: 1

Jens Wronna
Jens Wronna

Reputation: 11

Thank you for your responses and hints...

  • Installing an Adobe Acrobat viewer on the mobile devices was not an option here.
  • Source of the PDF had same domain like app itself and had a valid URI format too

Due to project timeline in meantime I decided to fall back to a solution that SAP provided with it's "Paystub" (Fiori 1.0). Therein they're using a 3rd-Party control for displaying PDF's which unfortunately has an overhead of code and implementations steps but it works (with minor issues only) perfect on desktop devices as well as on mobile devices.

So far, this is workaround solved my requirement. Thanks.

Upvotes: 0

Related Questions