Getting Started with Kapsel – Part 17 — Attachment Viewer
Attachment Viewer (New in SP05 PL03)
This plugin enhances the viewing of an attachment within a web view. When using this plugin the opening of an attachment is seamless. The user does not have to download the file and then manually open the attachment. It displays an error message if an appropriate viewer is not installed, ensures the application is not reloaded when returning from the viewer and deletes the temporary file used to view the attachment. Specifically on iOS and Android, it opens the appropriate viewer in a separate InAppBrowser window when window.open(url_to_attachment_or_html_page) is called or a link is clicked on that contains target=”_blank”. On iOS a toolbar is shown which enables the user to close the InAppBrowser window. For additional details on the InAppBrowser see org.apache.cordova.inappbrowser.
Note, Kapsel requires a slightly modified copy of this plugin that is located at C:\SAP\MobileSDK3\KapselSDK\plugins\inappbrowser.
For additional details on the attachment viewer plugin see the JavaScript file in a project that includes this plugin at
project_name\plugins\com.sap.mp.cordova.plugins.attachmentviewer\www\attachmentviewer.js
or the JS Documentation at Using the Attachment Viewer.
The following examples will demonstrate this plugin and show why it is needed.
Viewing Attachments in Chrome
Viewing Attachments using a Cordova WebView
Viewing Attachments using the Attachment Viewer Plugin
Viewing Attachments in Chrome
- Save index.html as C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\AttachmentTest.html.
Files placed in the webapps\sapui5 folder are accessible by accessing http://smp_server_host_name_or_ip:8080/sapui5 - Create a set of files that will be opened as attachments. The above AttachmentTest.html is looking for the following files. Note, unknowntype.foobar was a text document with Hello World in it renamed to unknowntype.foobar. Unknowntype2.foobar was a .zip file renamed to unknowntype2.foobar.
C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\pdf.pdf C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\pic.jpg C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\sample.html C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\word.docx C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\unknowntype.foobar C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\unknowntype2.foobar C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\mp3.mp3 C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\mp4.mp4
- Try out the first 5 sections in Chrome with the URL http://localhost:8080/sapui5/AttachmentTest/AttachmentTest.html.
Note, the sections that use the InAppBrowser are required to be run in a Cordova container. - As seen from trying the AttachmentTest.html in the Chrome desktop browser, using a standard link with the target of _blank or using window.open causes the attachment to be opened in a new tab that can be closed returning the user back to the AttachmentTest.html page without having it be reloaded. One other observation is that if the browser does not know how to handle the item being opened (word.docx and unknowntype2.foobar), it simply downloads it.
Viewing Attachments using a Cordova WebView
- Create the project.
cordova -d create C:\Kapsel_Projects\AtttachmentDemo com.mycompany.attachmenviewer AttachmentDemo cd C:\Kapsel_Projects\AtttachmentDemo cordova -d platform add android cordova -d create ~/Documents/Kapsel_Projects/AtttachmentDemo com.mycompany.attachmenviewer AtttachmentDemo cd ~/Documents/Kapsel_Projects/AtttachmentDemo cordova -d platform add ios
- Add the Cordova InAppBrower.
cordova -d plugin add org.apache.cordova.inappbrowser
Notice the version of this plugin.
C:\Kapsel_Projects\AtttachmentDemo>cordova plugins org.apache.cordova.inappbrowser 0.6.0 "InAppBrowser"
- Replace www\index.html with the contents of index.html.
Uncomment the include for cordova.js at the top of index.html. - The above index.html is looking for the following files. Place these files in the www folder of the project
C:\Kapsel_Projects\AtttachmentDemo\www\pdf.pdf C:\Kapsel_Projects\AtttachmentDemo\www\pic.jpg C:\Kapsel_Projects\AtttachmentDemo\www\sample.html C:\Kapsel_Projects\AtttachmentDemo\www\word.docx C:\Kapsel_Projects\AtttachmentDemo\www\unknowntype.foobar C:\Kapsel_Projects\AtttachmentDemo\www\unknowntype2.foobar C:\Kapsel_Projects\AtttachmentDemo\www\mp3.mp3 C:\Kapsel_Projects\AtttachmentDemo\www\mp4.mp4
- Copy the files to the platform directory by running
cordova -d prepare
- Use the Android IDE or Xcode to deploy and run the project.
- On Android the best results occur when using InAppBrowser with _system. A problem with this is that the file is downloaded to the downloads directory and a notification is displayed indicating the download completed rather than directly opening the attachment. Also note that if the same file is opened again, a second copy is persisted to the device and the previously viewed attachments are not deleted after being viewed. This process is not very seamless. Ideally, the attachment would be opened in the attachment viewer directly and the file being viewed would be deleted after the viewer is closed.
- On iOS the best results occur when using the InAppBrowser with _blank which opens the attachment using a separate InAppBrowserWindow.
Viewing Attachments using the Attachment Viewer Plugin
- Remove the Cordova InAppbrowser plugin and then add in the attachmentviewer plugin which has a dependency on the Kapsel patched InAppBrowser.
cordova -d plugin remove org.apache.cordova.inappbrowser cordova -d plugin add com.sap.mp.cordova.plugins.attachmentviewer --searchpath "C:\SAP\MobileSDK3\KapselSDK\plugins" or cordova -d plugin add com.sap.mp.cordova.plugins.attachmentviewer --searchpath "/Users/i826567/SAP/MobileSDK3/KapselSDK/plugins"
This plugin has dependencies on other plugins. This will not be a manual step in a future SP after SP08.
cordova -d plugin add com.sap.mp.cordova.plugins.i18n --searchpath "C:\SAP\MobileSDK3\KapselSDK\plugins" cordova plugins add org.apache.cordova.dialogs
Notice the version of the InAppBrowser is now the version that is included as part of Kapsel.
C:\Kapsel_Projects\AtttachmentDemo>cordova plugins com.sap.mp.cordova.plugins.attachmentviewer 3.8.1 "AttachmentViewer" com.sap.mp.cordova.plugins.authproxy 3.8.1 "AuthProxy" com.sap.mp.cordova.plugins.corelibs 3.8.1 "CoreLibs" com.sap.mp.cordova.plugins.i18n 3.8.1 "i18n" org.apache.cordova.device 0.3.0 "Device" org.apache.cordova.dialogs 0.3.0 "Notification" org.apache.cordova.inappbrowser 0.6.0-patched "InAppBrowser"
- Use the Android IDE or Xcode to deploy and run the project.
The issues mentioned above are now addressed by the attachmentviewer plugin.
Note that when opening unknowntype2.foobar on an Android, the no viewer message is displayed.
Note that on iOS, when opening an attachment via window.open(), a toolbar appears at the bottom with a Done button enabling the user to return from the program viewing the attachment.
Updated for SMP SDK 3.0 SP08
Hi Daniel Van Leeuwen
Can you please make an example on how to open a pdf if we have the base64 binary string instead of the file?
Regards.
I have attached a new file index_stream.html that may be helpful.
Note there was problem with it working in SP08 on Android. Hopefully it will be fixed an upcoming patch (SP09).
Regards,
Dan van Leeuwen
Ohh, ok, I'm doing the same I think, but it is not working, maybe because I'm using SP08, like you said is not working.
Do you know an estimation of when this new version can be released?
Thanks!
Is it working for you on iOS? The problem I mention was only occurring on Android.
As a very rough estimate, perhaps the later part of next month.
Regards,
Dan van Leeuwen
Yes, I tested on iOS now, and it's working, but I don't have the "done" button to go back.
Ok, so I can't wait to update, SP08 PL02 doesn't look like it's fixing the problem.
If I go back to a previous version at least on that particular plugin, should it work?
Regards.
<<If I go back to a previous version at least on that particular plugin, should it work?
No, I meant the problem was identified on Android in SP 08. The problem likely existed in previous versions as well. I believe a fix was made in an upcoming SP 09 release.
I will give it a try on iOS. I thought it was working there. Can you confirm that the attachment viewer plugin is added to your project?
Yes, I have the plugin added.
The first link window.open() is not working.
The second link is working, but there is no DONE button to go back to the app.
I'm downloading SP08 PL02 now, I will install that and I tell you if it's fixed.
Regards.
For me, I was having troubles clicking on the button. I added a couple of extra line breaks to move it a bit lower on the screen. Once I did that, I could open the PDF and I would see a done button.
For the anchor, I noticed the same behavior you did. I made the following change so that when clicking on an anchor tag, window.open was instead called.
On line 70, add an extra check like the one below.
|| element.href.indexOf("data") === 0Hope that helps,
Dan van Leeuwen
Thank you Daniel, I will try that. Do you know if there is any workaround for Android too?
I believe a fix was made to native part of the code for Android so that won't be available until the upcoming SP 09.
Ok, thank you for your help!