Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Getting Started with Kapsel - Part 17 -- Attachment Viewer

Dan_vL
Product and Topic Expert
Product and Topic Expert
‎11-09-2014 6:01 PM
0 Kudos

         

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.



Back to Getting Started With Kapsel

12 Comments
Labels in this area
Popular Blog Posts