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.
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
- 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.
- 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.
- 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.