Open web page from Mobile Application

Hello, 

I have button in mobile application, it's onClick function builds url of our api.

I want to navigate user on that url from onClick handler function, to open browser.

 

How I can navigate user to my url?

Like 0

Like

14 comments

Hello Luka,

 

Please add this function to the module that defines your custom button:

 

execute: function openLink () {

    var appWindow = window.open("https://www.wikipedia.org/","_blank");

    setTimeout( function () {if (!appWindow) {

        appWindow.location ="https://academy.creatio.com/";

            }

            },1000);

}

 

As a result once the button is clicked the function will be executed and in this example the https://www.wikipedia.org/ link will be opened.

 

Best regards,

Oscar

Oscar Dylan,

Is your code fragment for Mobile Application? 

Luka Grdzelishvili,

 

Yes, it was added to the custom module that was then added to the 

CustomSchemas of the mobile application manifest (the button was created using this article https://community.creatio.com/articles/adding-custom-user-action-mobile…) and this function was an example provided in this StackOverflow article https://stackoverflow.com/questions/11710902/can-i-make-a-link-that-wil….

 

Best regards,

Oscar

Oscar Dylan,

Nope, my question is not about opening mobile application from web page.

my question is about, opening web page from mobile application.

Luka Grdzelishvili,

 

Please apply this code, it opens the 

https://www.wikipedia.org/ website upon clicking a custom button inside the mobile app.

 

Best regards,

Oscar

Mark as 'Best reply'

Oscar Dylan,

This solution is not working, as I already said it is for Web Browser. When I start test tool for application, it runs using chrome and window.open works, but in android application, it has error. 

I have this fragment in my execute function

var winPrint = window.open("", "_blank");
winPrint.document.write(response.value.data.agreementText);
winPrint.document.close();

 

I saw error log, and there is problem at winPrint.document.write, Cannot read property 'write' of undefined.

 

I tried var winPrint = window.open("https://google.com", "_blank"); and it works. Now I have what is that view? and how can I set HTML content.

 

My api returns HTML string. I wrote question about url because I thought it was impossible to open web view from JS execute function.

It works, thanks

I have another problem now.

I need to print opened document, but there is error winPrint.print is not a function.

Can I somehow print opened page ?

Hi Luka,

 

Could you please specify where you are trying to write your code? Is this related to the mobile app needs described above or you want to implement another feature? What is your business task? Could you please also clarify what schema you use and provide a full code so we will be able to test it at our end? 

 

Regards,

Anastasiia

Anastasiia Markina,

Hello,

My business task is:

  1. add button to get General Agreement (we have Html format at our API, if needed we can return URL)
  2. after successful response, take returned html (or url) and show document to user
  3. show print preview to print document.

In web, we have small JS code to handle it.

// url parameter is empty because we are writing html in document.
// also we can generate blob url and set it without writing directly in document
var winPrint = window.open("", "", "left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0");
winPrint.document.write(response.value.data.agreementText);
winPrint.document.close();
 
setTimeout(function() {
    winPrint.print();
}, 1000);

On mobile app, I tried to generate blob url and code fragment is 

var blobUrl = URL.createObjectURL(
    new Blob([response.value.data.agreementText], { type: "text/html" })
);
var winPrint = window.open(blobUrl);
 
setTimeout(function() {
    winPrint.print();
}, 1000);

this code, opens webview and shows my html, but print function is not defined, beacuse winPrint doesn't owns it.

 

After it, I tried another way, added new field and set blobUrl as its value. new field type is link, so user must click on it. but second problem appeared, Terrasoft.Utils library has metod getUrl as I remember, which is calling on click, this method validates url, but in this case it makes url invalid. blob url is "blob:file:///..." and this method prepends http:// and because of it blob url is invalid. 



But now I have new workaround, upload pdf on storage, return storage url from API, set it to new field and click on it.



But if print function is implemented and needs specific usage I want to know it. It is not good to upload temp files on storage :( 

Hi Luka,

 

Could you please provide a step-by-step description of your business task? Alas, it is still a bit unclear. 

 

Could you please describe where the button should be located? What section from the left-panel list (menu) should I open? Could you please do it in a way like "go to Cases section > open a case > choose such-and-such field/button > it opens the web-page we need"? The link is the HTML from your API, am I correct? 

 

As for the third point ("show a print preview to print document"), could you please specify how you want to print it? The user opens the General Agreement by clicking the newly-created custom button, then see the Agreement itself in the HTML format and how it will be printed? Will a user be asked to print it (like an alert notification)? Are you going to print it through a usual wireless printer machine like an average hard-printed paper? 

 

Looking forward to hearing from you!

 

Regards,

Anastasiia

Anastasiia Markina,

Hello,

First of all, I already done this task, using business rule, setting API url in custom field and then user must click on it. It opens chrome and our API will show html content and calls print preview in chrome.

 

Yes, We want to print document using wireless printer, using chrome print preview.

 

Here is task:

- Go to contacts -> Select contact -> Open actions -> Click Print General Agreement button.

 

Button action:

  1. Send API request
  2. Read html content of general agreement from response
  3. Show this html content as web page
  4. Initiate print preview

To achieve this, I tried:

  1. Open new window using window.open and set document content from api response. this case was failed, because opened window object hasn't Print function to print document, because opened window object isn't fully same as base window object.
  2. Tried to create Blob url using native js functionality, I got link, set it to my custom field value, but on click, bpm utils has function to validate url getUrl and this function cant validate blob url, because it is blob:file:///..... and this function adds http:// from behind.
  3. I made some changes at my api, added new endpoint to return rendered html view. In bpm 'Print general agreement' button makes api request and sets url in custom field value. So user can click on api url, all bpm validations working because url starts with https:// and opens chrome where document is rendered from api.

Luka Grdzelishvili,

 

Let's consider your business task implementation from the very beginning.

 

1. Here is the instruction by the link below on how you can add a button to the mobile app: 

 

https://community.creatio.com/articles/adding-custom-user-action-mobile…

 

2. This code opens a new web-page: 

 

Ext.define("Terrasoft.MyAction", {
    extend: "Terrasoft.ActionBase",
 
    config: {
        useMask: false,
        title: "MyActionTitle",
        iconCls: Terrasoft.ActionIcons.Copy
    },
 
    execute: function(record) {
        this.callParent(arguments);
        var appWindow = window.open("https://www.wikipedia.org/", "_blank");
		setTimeout(function() {
  		if (!appWindow) {
    		appWindow.location = "https://academy.creatio.com/";
  		}
		}, 1000);
    	}
});

Please do not forget to add a local string as the instructions state, restart the application pool, and re-login to the mobile app. 

 

All these steps described above create a working button and open a web-page (it works correctly at both our end and yours). 

 

Thus, as the main part is implemented and works well, please double-check your API and printer settings. Alas, this point is not our expertise and could not be considered within Creatio development tools. 

 

Regards,

Anastasiia

Anastasiia Markina,

Thanks for very detailed answer. 

 

But, my business task isn't only this what you describe. After opening window with my location, I want to initiate print() function of window object, but it hasn't implemented because opened window object is not same as in chrome or other browser.

 

As I mentioned, I Already done this task, with small workaround. After clicking button, which brings url from API, I set that url to my custom field (viewType: url) . So user click that field and it opens chrome or other browser, and there I can use print() function.

Show all comments