Get the html of a screen/webblock

Hi,

I'm currently working on a mobile app that needs to be able to share/export/save a PDF. The content of the PDF is the output of a calculation based on user input. The app REQUIRES that it functions without any internet (the location we are at doesn't have a guaranteed internet connection, think of in the middle of the ocean). So only client actions are possible.  

I have found a component that can help me, namely "PDF Generator Plugin". This component takes HTML input and converts it to PDF (including a download option). 

My thought now is to create a screen that shows the user the output generated (Doesn't need to be pretty/readable due to size restricting. The data is readable somewhere else in mobile friendly mode). This screen can then be saved to PDF and processed further at the users discretion. 

My problem is that I don't know if it possible to capture the HTML of the screen that I'm currently showing (or not showing if that is the way to go). I have found the following forum thread but no answer was provided there: Get HTML of a page

Any thoughts? A alternative would be to generate the HTML myself via string generation but that would be rather dirty and not "low-code" friendly. 



Hi Vincent Koning,

I have found a component that can help me, namely "PDF Generator Plugin". This component takes HTML input and converts it to PDF (including a download option). 

My problem is that I don't know if it possible to capture the HTML of the screen that I'm currently showing (or not showing if that is the way to go). I have found the following forum thread but no answer was provided there: Get HTML of a page

I would say is possible, as long you have all the page content to render in the mobile device. Meaning, in case some server data is needed (not in mobile device database), then HTML is maybe not going to be completly generated.

Regards,

Hi Marco,

Assuming that we don't need server interaction, how would you then gather the html output?

Regards,

Hi Vincent Koning,

I'd try providing to the PDF component, the URL of your app, maybe using something like "https://<your-environment-name>/<espace-name>", can help solve.

Regards,

Hi Marco,

Unfortunately that will not be a solution. It's a mobile app and as far as I know the screens inside don't have url's that I can access. And your example (page hosted on our iis environment) will surely not work because I don't have internet access on my target location. 

Thanks for the suggestion though, it's highly appreciated and I hope you have some more ideas to try out :) 

Regards,

Hi Vincent Koning,

It's allways good to think on new solutions, I'd say that a similar url could be constructed with the path location of the app. To use as example, see this post here (I did not test this one, but should be possible something like this): 

https://stackoverflow.com/questions/21450443/where-i-can-find-the-url-of-native-android-and-ios-application

Regards,

Vincent Koning wrote:

Hi Marco,

Unfortunately that will not be a solution. It's a mobile app and as far as I know the screens inside don't have url's that I can access. And your example (page hosted on our iis environment) will surely not work because I don't have internet access on my target location. 

Thanks for the suggestion though, it's highly appreciated and I hope you have some more ideas to try out :) 

Regards,


Vincent, you should find that if all the data is client side, you can still access the URL with the format https://<your-environment-name>/<espace-name> that marco provided. When you deploy the app, these pages are all synchronised locally to the device so that they can still be accessed offline.

If you preview the mobile app in the emulator, you can edit the URL to show individual pages (the same as you have called them in the OutSystems Studio), or you can right-click a specific page and View in Browser to see that URL.

Solution

Marco Arede wrote:

Hi Vincent Koning,

It's allways good to think on new solutions, I'd say that a similar url could be constructed with the path location of the app. To use as example, see this post here (I did not test this one, but should be possible something like this): 

https://stackoverflow.com/questions/21450443/where-i-can-find-the-url-of-native-android-and-ios-application

Regards,


Marco,

Your suggestion lead me on the correct path. You can grab the HTML of any page via the following javascript

var htmlContent =  new XMLSerializer().serializeToString(document);

Problem now started with the fact that Outsystems hides certain elements from view (correct!) but that the PDF module is still rendering these elements (bad!!). So I will now simply create my own HTML (due to time constraints) since that is working correctly. 

Thanks for the advice! 


Edit: I will mark this post as answer since this is the actual solution for my usecase and can perhaps quickly help others with the same problem.

Solution

Hi Vincent Koning,

Great to know you solved this challenge! Good luck for your developments!

Cheers,