I am developing a Master-Detail application which should show an embedded PDF in its detail view. The project is based on UI5 version 1.48, so the new PDFViewer control can be used.
In desktop mode, everything works as expected:
But on a mobile screen, PDF is not showing properly:
The data source property binding at the PDFViewer is done by OData path.
<FlexBox id="fbPDFViewer"
direction="Column"
renderType="Div"
class="sapUiSmallMargin">
<PDFViewer id="idPDFViewer"
source="{myModel>/myPDFUrl}"
title=""
busy="true"
showDownloadButton="false"
height="700px"
width="95%"
loaded="onPDFLoaded"
errorMessage="{i18n>notFoundText}"
errorPlaceholderMessage="{i18n>notFoundText}">
</PDFViewer>
</FlexBox>
Even the SAP sample for embedded usage doesn't work on mobile devices.
According to the source code (1.48), the viewer renders its PDF document directly in the app / iframe only when ..:
The source is valid
It's coming from the same domain
It has a valid URI format
UI5 thinks the user is using a desktop computer (Device.system.desktop returns true) or the displayTypeapi, available since 1.58, is set to Embedded.
UI5 detects that the user agent (browser) has a certain type of PDF plugin enabled. Currently, there are no known mobile browsers which support displaying PDF documents directly in the page.
The steps 2 and 3 explain why the PDF is not rendered on a mobile device even if the source is valid. In such cases, I guess the only option is to provide a download option instead of trying to render the PDF forcefully in the mobile app.
You can use nabi.m.PDFViewer from the the nabi.m library. It works cross device, even on iOS (where you typically don't have the adobe PDF plugin). For details see https://github.com/nzamani/ui5-nabi-m
There you will find also how to try it out on localhost. I have also added some detailed instructions for deployment of the library to NW ABAP as well as SAP CP.
You can find live demos at http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.PDFViewer and http://ui5lab.io/browser/#/Samples/nabi.m/Sample/nabi.m.PDFViewer.InPagePDFViewer
Open the two links on your iOS device or any other device to see how it looks like.
On mobile devices (smartphones and tablets), the PDF viewer control renders a toolbar with the title and a download icon, which behaves as a standard device/browser file link. We've made this note in Fiori Design Guidelines 1.48 and we'll add it to the SDK documentation.
(More in openui5 issue 1759 on GitHub)
Thank you for your responses and hints...
Installing an Adobe Acrobat viewer on the mobile devices was not an option here.
Source of the PDF had same domain like app itself and had a valid URI format too
Due to project timeline in meantime I decided to fall back to a solution that SAP provided with it's "Paystub" (Fiori 1.0). Therein they're using a 3rd-Party control for displaying PDF's which unfortunately has an overhead of code and implementations steps but it works (with minor issues only) perfect on desktop devices as well as on mobile devices.
So far, this is workaround solved my requirement.
Thanks.
Related
I'm trying to write an application that offers toast notifications on Windows 8 and newer.
Is it possible instead of referencing an image file on the local disk to use data URIs in order to display an image via the XML that one passes to show the toast? I was unable to come up with any documentation so far and I am still in the research phase for my project (so no code to "simply" try, yet).
No. DataUris are not supported for images in toasts (or tiles)
Update/documentation/proof:
For 8
From https://msdn.microsoft.com/en-us/library/windows/apps/hh761494.aspx
In this set of templates, the image element is expressed using one of
these protocols:
•http:// or https:// A web-based image.
•ms-appx:/// An image included in the app package.
•ms-appdata:///local/ An image saved to local storage.
•file:/// A local image. (Only supported for desktop apps.)
And for 10
From https://msdn.microsoft.com/en-us/library/windows/apps/br230844.aspx
The URI of the image source, using one of these protocol handlers:
•http:// or https:// A web-based image.
•ms-appx:/// An image included in the app package.
•ms-appdata:///local/ An image saved to local storage.
•file:/// A local image. (Supported only for desktop apps. This protocol cannot be used by Windows Store apps.)
Bonus, on WP 8.X you couldn't even specify the image, it just used the app icon.
The Safari 7 inspector is marvelously line-mapping compiled javascript back to the coffeescript it came from. There are times, though, when I want to interact directly with the compiled javascript in inspector. How do I toggle source mapping off so I can play with the raw javascript?
In Safari 7, Source Maps are not something that you have to toggle on or off they are just always on like resources are always available in the web developer tool. If you want to jump to the raw source you can:
"...Command-click the file name to jump to the position in the original source file."
The Safari Developer Guide has more info on this.
I have an Adobe AIR application that I am using to stream some video using RED5. The AIR application has the following Flex code:
<s:VideoDisplay id="vidBox" autoPlay="true" autoRewind="true" x="6" y="11" width="95%" height="90%" scaleMode="zoom">
<s:source>
<s:DynamicStreamingVideoSource host="rtmp://localhost/TestMovie" streamType="recorded">
<s:DynamicStreamingVideoItem streamName="2hourmovie.flv" />
</s:DynamicStreamingVideoSource>
</s:source>
</s:VideoDisplay>
When I run the Air Application, I am seeing a rather pretty set of flickering and changing colors instead of the movie. The sound, amazingly, comes through very well.
I use the exact same code in a web- based application, and the movie plays without problems. I see picture and sound and all is well.
I suspect that there is something wrong with AIR that is screwing up the picture, or perhaps I am interacting with AIR in a less- than- correct manner? Or I have found a bug in either AIR or RED5?
Someone please advise. I am using Red5 v1.0.1, Adobe AIR v3.7, and am developing in Flex Builder 4.6.
UPDATE:
More information about this problem: It appears to occur only with very large FLV files. I included some 1- hour movies in my streams directory and ran the AIR application, and the movies displayed without problems. Other files of longer length have the same display failure. Note that the failure does not occur in the web browsers, regardless of FLV file size.
Apparently, AIR has some limitation that prevents it from properly displaying FLVs beyond a certain length. Either that, or an AIR application must handle longer FLVs differently from shorter ones. I am uncertain and cannot find any documentation on this matter.
I am working to narrow down how large a file is required to make an AIR video object fail.
Have I found a bug in Adobe AIR? Or is there some coding or configuration I need to adjust in order to make a viewer work properly with larger FLV files?
Someone please advise...
We are working on creating mobile app using sencha touch frame work. one of our requirements is when user hits view pdf, the user entered form details which stored locally has json format should be rendered and view as pdf and also it can be saved as a pdf locally.
i found that itext is one of the java library which is widely used for pdf generation. but i couldn't find any article inter relating both sencha touch and itext. let me know is that a possible way or any other method available for json to pdf generation in sencha touch.
Regards
java has nothing to do with javascript.
A quick Google search of "javascript pdf generation" lists some libraries that may work but getting them to run on a device might be more trouble than its worth id look at submitting the form results to a server and downloading the resultant PDF.
this might point you in the right direction:
generating-pdf-files-with-javascript
We are going to develop a mobile app (iOS and Android), which should provide downloading and storing several user-selected PDF files and viewing them within the app (iOS with WebView) or with an external PDF Viewer (Android).
My Question is: Is this possible with Trigger.io? I didn't find anything concerning this in the official documentation. Can we do something with the file or the child browser / tabs module? If yes, do you have any examples?
Note: We will use Backbone.js and jQuery Mobile as additional libraries.
The Android webview doesn't allow for inline opening of PDFs - you can test that by opening e.g. http://trigger.io/cross-platform-application-development-blog/wp-content/uploads/2012/05/trigger.io-whitepaper.pdf in your stock browser.
On iOS, you can use:
forge.tools.getURL('my_file.pdf',
function (file) {
forge.tabs.open(file);
}
);
But that won't work on Android (tested on 2.3, 3 and 4.0).
Short answer - yes.
Downloading, storing, then showing/referencing later can definitely be done. Check out the forge.file documentation.
I have not tried the child browser feature yet. Although the tabs module will work, I think its best to just let the device (and its user settings) decide how to display/render the PDF. I am only saying this because my devices (especially the Android ones... 2.3 and 4.x) tend to behave differently. Either way... the device's "back button" always gets me back to where I left off in my trigger.io app.