SAP Mobile App Development

PDFViewer for SAPUI5 Application

                Sometimes we may have to show pdf documents in our application.Earlier SAPUI5 Developers has to use third party libraries and custom controls to achieve this requirement.Now the happy news is we no longer have to😎.
           In the latest SAPUI5 version(1.48) there is a new control called sap.m.PDFViewer.Thanks to SAPUI5 development team.In this tutorial we will see simple SAPUI5 PDFViewer.
Pre-requisites

  1. SAPUI5 application created.
Steps

  1. Open the view and paste below code.We are using our brand new sap.m.PDFViewer and give the properties title and source.

  2. <mvc:View controllerName="odataaaa.controller.View1"
     xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns:f="sap.ui.layout.form"
     xmlns:mvc="sap.ui.core.mvc"
     xmlns="sap.m"
     xmlns:core="sap.ui.core">
     <App>
       <pages>
      <Page title="{i18n>title}">
        <content>
       <PDFViewer title="New SAPUI5 PDFViewer" source="https://assets.cdn.sap.com/sapcom/docs/2015/07/c06ac591-5b7c-0010-82c7-eda71af511fa.pdf">
       </PDFViewer>
        </content>
      </Page>
       </pages>
     </App>
    </mvc:View> 
    

  3. Now run the application.I have posted my application screenshot.
Note:I faced some issues in google chrome browser.It was not loading at first time.I was also getting a warning message of synchronous xmlhttprequest.We can hope for a stable control in upcoming UI5 versions.

What are you waiting for? spread the news😏..
Visit PDFViewer Demo page by SAP

If you enjoyed this post, Please Share!!

4 comments :

  1. This comment has been removed by the author.

    ReplyDelete
  2. Its working Fine in Desktop mode , But not working in SAP Fiori Client App ?

    ReplyDelete
    Replies
    1. try using property displayType 'Embedded'.

      Delete

Powered by Blogger.