- SAP Managed Tags:
Attachment Viewer
This plugin enhances the viewing of an attachment within a WebView. 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 (as is the case on Android for a Word document). It displays an error message if an appropriate viewer is not installed (Android only), ensures the application is not reloaded when returning from the viewer (this occurs with HTML or image files that are opened in the same WebView) and on Android, opens the file in a secure way and deletes the file after the viewer has been closed.
Specifically on iOS and Android, it opens the appropriate viewer or a separate InAppBrowser window when
window.open(url_to_attachment_or_html_page)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 file C:\SAP\MobileSDK3\KapselSDK\plugins\attachmentviewer\www\attachmentviewer.js or Using the Attachment Viewer Plugin.
The following examples will demonstrate this plugin.
Viewing Attachments in Chrome
Viewing Attachments using a Cordova WebView
Viewing Attachments using the Attachment Viewer Plugin
Viewing Attachments in Chrome
- Create a file named C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\AttachmentTest.html.
The contents of this file are shown below.
<html>
<head>
<!--<script type="text/javascript" charset="utf-8" src="cordova.js"></script>-->
<script>
window.onerror = onError;
function onError(msg, url, line) {
var idx = url.lastIndexOf("/");
var file = "unknown";
if (idx > -1) {
file = url.substring(idx + 1);
}
navigator.notification.alert("An error occurred in " + file + " (at line # " + line + "): " + msg);
return false; //suppressErrorAlert;
}
function myopen(aURL, target) {
try {
window.open(aURL, target, 'location=yes,toolbar=yes,toolbarposition=bottom');
}
catch (e) {
console.log("ERROR");
console.log(e);
}
}
</script>
</head>
<body onload="console.log('in onload')">
<h1>Attachment Viewer Test</h1>
The goal of this page is demonstrate some different ways in which a link to an attachment can be opened. Ideally, the user should be able to press the back button to return to the original page without having the page reload. This is accomplished by opening the attachment in a separate browser window. Notice that when this page is reloaded, an alert is shown.
<br>Cordova provides the InAppBrowser plugin that can be used to open a link in a separate WebView.
<br>The SMP 3.0 server can be used as a webserver by placing this page and the attachments used by it in C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest.
<h3>Using Standard Link (<a href="http://...file.extension"></a>)</h3>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf">PDF</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf" download="http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf">Download PDF</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/word.docx">Word</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/pic.jpg">JPG</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/sample.html">sample.html</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/missinglink.html">missinglink.html</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype.foo">unknowntype.foo</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype2.foo">unknowntype2.foo</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3">mp3.mp3</a><br>
<a href="http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4">mp4.mp4</a><br>
When opened in Chrome the PDF, JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 open in same tab. Pressing back causes the page to reload. The word document, Download PDF and unknowntype2.foo are saved to the downloads folder.<br><br>
Note the above links are not opened in the InAppBrowser as only attachments opened with window.open(URL, "_blank", options) are opened in a separate InAppBrowser window.<br><br>
When opened in the Android WebView the PDF file is opened in Adobe Acrobat (separate install). The pdf file is publicly available in Download\Adobe Acrobat\pdf.pdf. Each time the link is clicked on and Adobe is exited, a new copy of the file is placed there such as pdf-1.pdf, pdf-2.pdf etc.<br>
Download PDF appears to have no effect.<br>
The Word file and unknowntype2.foo are downloaded by Chrome to the downloads folder (which is visible to any user). A notification is shown when the file is downloaded. The user can then click on the notification to open the file.<br>
The JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 files are opened in a new tab in Chrome. This may be due to the Whitelist plugin not allowing navigation to other files in the WebView by default.<br><br>
When opened in the iOS WebView, all links open but there is no way to return to the index.html without force closing the app. The Download PDF link on iOS 8.3 opens the PDF rather than downloading it.<br><br>
Note the above links are not opened by the attachmentviewer plugin as only attachments opened with window.open(URL) or links with a target of _blank are opened by the attachmentviewer plugin.<br><br>
<h3>Using Standard Link to a Local File (<a href="file.extension">)</a></h3>
<a href="pdf.pdf">PDF</a><br>
<a href="pdf.pdf" download="pdf.pdf">Download PDF</a><br>
<a href="word.docx">Word</a><br>
<a href="pic.jpg">JPG</a><br>
<a href="sample.html">sample.html (local html file)</a><br>
<a href="missinglink.html">missinglink.html</a><br>
<a href="unknowntype.foo">unknowntype.foo</a><br>
<a href="unknowntype2.foo">unknowntype2.foo</a><br>
<a href="mp3.mp3">mp3.mp3</a><br>
<a href="mp4.mp4">mp4.mp4</a><br>
When opened in Chrome the PDF, JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 open in same tab. Pressing back causes the page to reload. The word document, Download PDF and unknowntype2.foo are saved to the downloads folder.<br><br>
Note the above links are not opened in the InAppBrowser as only attachments opened with window.open(URL, "_blank", options) or via cordova.InAppBrowser.open are opened in a separate InAppBrowser window.<br><br>
When opened in the Android WebView clicking on the links to the PDF file, Download PDF, Word and unknowntype2.foo have no effect.<br>
The app exits when opening missinglink.html. This can likely be addressed via the Android setting ErrorURL. See <a href="http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_config.md.html#Android%20Configuration">Android Configuration</a>.<br><br>
JPG, sample.html, unknowntype.foo mp3, and mp4 open in the WebView replacing this file. When the back button is pressed the index.html page is reloaded. The Whitelist plugin allows local files by default to be loaded into the WebView.<br><br>
When opened in the iOS WebView, all links open but there is no way to return to the index.html without force closing the app. The Download PDF link on iOS 8.3 opens the PDF rather than downloading it.<br>
Clicking on the missinglink.html appears to have no effect.<br><br>
Note the above links are not opened by the attachmentviewer plugin on Android or iOS as only attachments opened with window.open(URL) or links with a target of _blank are opened by the attachmentviewer plugin.<br>
<h3>Using Standard Link with _blank (<a target="_blank" href="http://...file.extension">)</h3>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf">PDF</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf" download="pdf.pdf">Download PDF</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/word.docx">Word</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/pic.jpg">JPG</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/sample.html">sample.html</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/missinglink.html">missinglink.html</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype.foo">unknowntype.foo</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype2.foo">unknowntype2.foo</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3">mp3.mp3</a><br>
<a target="_blank" href="http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4">mp4.mp4</a><br>
When opened in Chrome the PDF, JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 open in new tab. Closing the tab shows the original page without reloading it. The word document, Download PDF and unknowntype2.foo are saved to the downloads folder.<br><br>
Note the above links are opened in the InAppBrowser as the window.open call has been mapped to the inAppBrowser method in inappbrowser.js.<br>
When opened in the Android WebView the PDF, Word and unknowntype2 are opened in an inAppBrowser window but do not display anything.<br>
The JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 files are opened in an inAppBrowser window.<br><br>
When opened in the iOS WebView, all links open but there is no way to return to the index.html without force closing the app. The Download PDF link on iOS 8.3 opens the PDF rather than downloading it.<br><br>
Note the above links are handled by the AttachmentViewer plugin when present. See also attachmentviewer.js.<br>
On Android and iOS, after adding the attachmentviewer plugin, all the links open and pressing back does not cause index.html to be reloaded. No files are left in public folders. Download PDF, opens the PDF rather than downloading it.<br>
Note, an issue was seeing on iOS where the mp3 and mp4 file did not open. The following error message was seen. Warning: Attempt to present UIAlertController: 0x13eaca5d0 on MainViewController: 0x13d63a3d0 while a presentation is in progress!. <!-- BCP issue 1580225909 -->
<h3>Using window.open (onclick="window.open('http://...file.extension'))</h3>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf')">PDF</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/word.docx')">Word</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pic.jpg')">JPG</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/sample.html')">sample.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/missinglink.html')">missinglink.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype.foo')">unknowntype.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype2.foo')">unknowntype2.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3')">mp3.mp3</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4')">mp4.mp4</button><br>
When opened in Chrome the PDF, JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 open in new tab. Closing the tab shows the original page without reloading it. The word document, Download PDF and unknowntype2.foo are saved to the downloads folder.<br><br>
Note the above links are not opened in the InAppBrowser as only attachments opened with window.open(URL, "_blank", options) are opened in a separate InAppBrowser window.<br><br>
Actually, when opened in the Android WebView the PDF, Word and unknowntype2 are opened in an inAppBrowser window but do not display anything. Why??? Perhaps the cordova_plugin.js clobbers section?<br>
The JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 files are opened in an inAppBrowser window.<br><br>
When opened in the iOS WebView, all links open but there is no way to return to the index.html without force closing the app. The Download PDF link on iOS 8.3 opens the PDF rather than downloading it.<br><br>
Note the above links are handled by the AttachmentViewer plugin when present. See also attachmentviewer.js.<br>
On Android, after adding the attachmentviewer plugin, clicking on the PDF file no longer creates a copy of the file in the shared downloads folder.<br>
Clicking on Word opens the document directly. The file is not present on shared download folder.<br>
Clickin on unknowntype2.foo shows a No Viewer message.<br><br>
On Android and iOS, after adding the attachmentviewer plugin, all the links open and pressing back does not cause index.html to be reloaded.<br><br>
<h3>Using window.open to a Local File (onclick="window.open('file.extension'))</h3>
<button onclick="window.open('pdf.pdf')">PDF</button><br>
<button onclick="window.open('word.docx')">Word</button><br>
<button onclick="window.open('pic.jpg')">JPG</button><br>
<button onclick="window.open('sample.html')">sample.html</button><br>
<button onclick="window.open('missinglink.html')">missinglink.html</button><br>
<button onclick="window.open('unknowntype.foo')">unknowntype.foo</button><br>
<button onclick="window.open('unknowntype2.foo')">unknowntype2.foo</button><br>
<button onclick="window.open('mp3.mp3')">mp3.mp3</button><br>
<button onclick="window.open('mp4.mp4')">mp4.mp4</button><br>
When opened in the Android WebView, as the files are local, and _blank is not specified, the files are opened in the WebView.
pic.jpg, sample.html, unknowntype.foo, mp3, mp4<br>
Opening missinglink.html closes the app.<br>
After PDF, Word or unknowntype2.foo, is clicked on, none of the other links appear to work. Not sure why.<br>
<br><br>
On Android, after adding the attachmentviewer plugin, clicking on the PDF file no longer creates a copy of the file in the shared downloads folder.<br>
Clicking on Word opens the document directly. The file is not present on shared download folder.<br>
Clickin on unknowntype2.foo shows a No Viewer message.<br><br>
Works well on iOS and Android with the attachmentviewer added.<br><br>
<h3>Using window.open with _blank (onclick="window.open('http://...file.extension', '_blank'))</h3>
Passing _blank instructs the InAppBrowser to display the content in a separate inappbrowser window.<br>
Note, the below items require the InAppBrowser plugin to be added and for the app to be run on an Android or iOS device or simulator.<br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">PDF</button><br><!-- toolbarposition is an iOS only setting -->
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/word.docx', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">Word</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pic.jpg', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">JPG</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/sample.html', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">sample.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/missinglink.html', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">missinglink.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype.foo', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">unknowntype.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype2.foo', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">unknowntype2.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">mp3.mp3</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4', '_blank', 'location=yes,toolbar=yes,toolbarposition=bottom')">mp4.mp4</button><br>
Note the above links are opened in the InAppBrowser as _blank is used as a parameter to window.open.<br><br>
When opened in the Android WebView, unable to open PDF, Word or unknowntype2.foo.<br>
JPG, HTML, mp3 and mp4 open in a separate InAppBrowserWindow. Pressing back does not cause the original page to reload.<br><br>
When opened in the iOS WebView, all links open and there is now a toolbar shown enabling the viewer to be closed. Note there is a load error message in the toolbar but the mp3 and mp4 files play.<br><br>
Note the above links are handled by the AttachmentViewer plugin when present.
On Android, after adding the attachmentviewer plugin, clicking on the PDF file no longer creates a copy of the file in the shared downloads folder.<br>
Clicking on Word opens the document directly. The file is not present on shared download folder.<br>
Clickin on unknowntype2.foo shows a No Viewer message.<br><br>
Works well on iOS with the attachmentviewer added although there is a load error message shown when opening mp3 or mp4 files even though the file plays.<br><br>
<h3>Using window.open with _system (onclick="window.open('http://...file.extension', '_system'))</h3>
Passing _system instructs the InAppBrowser to display the content in the system web browser.<br>
Note, the below items require the InAppBrowser plugin to be added and for the app to be run on an Android or iOS device or simulator.<br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pdf.pdf', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">PDF</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/word.docx', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">Word</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/pic.jpg', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">JPG</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/sample.html', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">sample.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/missinglink.html', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">missinglink.html</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype.foo', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">unknowntype.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/unknowntype2.foo', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">unknowntype2.foo</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">mp3.mp3</button><br>
<button onclick="window.open('http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4', '_system', 'location=yes,toolbar=yes,toolbarposition=bottom')">mp4.mp4</button><br>
When opened in the Android WebView, the PDF opens in Acobat<br>
Word and unknowntype2.foo are downloaded using Chrome<br>
The JPG, sample.html, missinglink.html, unknowntype.foo, mp3 and mp4 are opened in Chrome.<br><br>
When opened in the iOS WebView on iOS 8.3, all links open in a separate window. The app can be returned to by pressing the Home button twice and selecting the app.<br><br>
On iOS, after adding the attachmentviewer plugin, the error seen previously does not occur.
<h3>Music and Videos using HTML 5</h3>
<audio controls>
<source src="http://10.7.168.124:8080/sapui5/AttachmentTest/mp3.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<video width="320" height="240" controls>
<source src="http://10.7.168.124:8080/sapui5/AttachmentTest/mp4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
In a text editor, perform a find and replace so the IP address is correct for your SMP server.
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.foo was a text document with Hello World in it renamed to unknowntype.foo. Unknowntype2.foo was a .zip file renamed to unknowntype2.foo.
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.foo
C:\SAP\MobilePlatform3\Server\webapps\sapui5\AttachmentTest\unknowntype2.foo
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.foo), it simply downloads it.
Viewing Attachments using a Cordova WebView
- Create the project.
cordova create C:\Kapsel_Projects\AtttachmentDemo com.mycompany.attachmenviewer AttachmentDemo
cd C:\Kapsel_Projects\AtttachmentDemo
cordova platform add android
cordova create ~/Documents/Kapsel_Projects/AtttachmentDemo com.mycompany.attachmenviewer AtttachmentDemo
cd ~/Documents/Kapsel_Projects/AtttachmentDemo
cordova platform add ios
- Add the Cordova InAppBrower.
cordova plugin add cordova-plugin-inappbrowser
Notice the version of this plugin.
C:\Kapsel_Projects\AtttachmentDemo>cordova plugins
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-whitelist 1.0.0 "Whitelist"
- Replace www\index.html with the contents of AttachmentTest.html.
In a text editor, perform a find and replace so the IP address is correct for your SMP server.
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.foo
C:\Kapsel_Projects\AtttachmentDemo\www\unknowntype2.foo
C:\Kapsel_Projects\AtttachmentDemo\www\mp3.mp3
C:\Kapsel_Projects\AtttachmentDemo\www\mp4.mp4
- Prepare, build and deploy the app with the following command.
cordova run android
or
cordova run ios
- On Android a problem is that a downloaded file such as a PDF is downloaded to the download directory and each time the link is clicked on a new version is saved.
With a Word document, the file is downloaded using Chrome and then the user has to click on a notification to open it when the download completes.
The file is also available in the download folder. 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 window.open(url, '_blank) which opens the attachment using a separate InAppBrowserWindow. Without this, the attachment opens and there is no way to return to the original app without closing and re-opening it.
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 plugin remove cordova-plugin-inappbrowser
cordova plugin add kapsel-plugin-attachmentviewer --searchpath %KAPSEL_HOME%/plugins
or
cordova plugin add kapsel-plugin-attachmentviewer --searchpath $KAPSEL_HOME/plugins
Notice the version of the InAppBrowser is now the version that is included as part of Kapsel.
C:\Kapsel_Projects\AtttachmentDemo>cordova plugins
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-whitelist 1.0.0 "Whitelist"
kapsel-plugin-attachmentviewer 3.9.1 "AttachmentViewer"
kapsel-plugin-authproxy 3.9.1 "AuthProxy"
kapsel-plugin-corelibs 3.9.1 "CoreLibs"
kapsel-plugin-i18n 3.9.1 "i18n"
kapsel-plugin-inappbrowser 0.6.0-patched "InAppBrowser"
- Prepare, build and deploy the app with the following command.
cordova run android
or
cordova run ios
The issues mentioned above are now addressed by the attachmentviewer plugin.
Note that when opening unknowntype2.foo 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.
- When an attachment is opened by the attachment viewer plugin on Android, it downloads the attachment to a location private to the app (no other app on the device can access it). It then uses the provider interface Setting Up File Sharing to allow access to the file to an intent that can view whatever type the attachment is. When focus returns to the Kapsel app from the 3rd party viewer, the attachment viewer plugin deletes the attachment.
Back to Getting Started With Kapsel
1 Comment
