/wp-content/uploads/2014/11/sap_logo_581390.png

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.

    image1.PNGimage2.PNGimage3.PNG

  • 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.
    image4.PNG

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

Back to Getting Started With Kapsel

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

      1. Manuel Ramirez

        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!

        (0) 
        1. Daniel Van Leeuwen Post author

          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

          (0) 
          1. Manuel Ramirez

            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.

            (0) 
            1. Daniel Van Leeuwen Post author

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



              (0) 
              1. Manuel Ramirez

                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.

                (0) 
                1. Daniel Van Leeuwen Post author

                  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.

                  Documents/Kapsel_Projects/AtttachmentDemo/platforms/ios/www/plugins/com.sap.mp.cordova.plugins.attachmentviewer/www/attachmentviewer.js

                  On line 70, add an extra check like the one below.

                  || element.href.indexOf("data") === 0
                  

                  Hope that helps,

                  Dan van Leeuwen

                  (0) 

Leave a Reply