Technical Articles
Displaying a PDF File in SAP Analytics Cloud, Analytic App with Custom Widget
In this tutorial, we’ll learn how we can create a custom widget to display a PDF document in SAC Analytic App.
sap.m.PDFViewer
We will leverage the SAPUI5 library sap.m.PDFViewer and call the code in the custom widget WebComponents code.
Here is the code for the XML view:
<mvc:View controllerName="myView.Template" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" height="100%">
<ScrollContainer height="100%" width="100%" horizontal="true" vertical="true">
<PDFViewer id="pdf" source="{/Source}" title="{/Title}" height="{/Height}" loaded="onloaded" error="onerror" sourceValidationFailed="onsourceValidationFailed">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</PDFViewer>
</ScrollContainer>
</mvc:View>
Custom Widget
Create an Analytic App and insert the custom widget PDFViewer_1. Also insert the input area InputField_1 and button PDFViewer_1. With that we can load and display the PDF document from the URL.
On the Button_1: onClick() property, enter the following code to call the custom widget setPDFURL() function with the input the URL to the PDF document.
And that’s it.
References
- Build a Custom Widget in SAP Analytics Cloud, Analytics Application
- github.com/ferrygun/SACPDFViewer
Hi Ferry,
thanks for sharing, I got the following problem.
Huimin
Hi Huimin,
Thanks for feedback. I forgot to mention that we need to define the initial parameter:
If you unable to display the PDF in Chrome, I guess it is something related to this:
https://sapui5.hana.ondemand.com/#/api/sap.m.PDFViewer%23events/sourceValidationFailed
Check if you see this log in console.
p.s. I have updated the code aps_pdfviewer.js to resolve a minor bug.
Best,
Ferry
Hi Ferry,
Thanks for providing this information. Will this custom widget work with standard SAC export functionality using exportView() API? I added the parameter "supportsExport": true in JSON file but didn't work. Any leads here will be helpful.
Thanks,
Ajith