ProcessMaker jQuery popup

Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.

Moderator: amosbatto

Forum rules
Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

ProcessMaker jQuery popup

Unread postby ethanthekiwi » Thu Nov 09, 2017 10:23 am

On a Dynaform, when the user selects an option, I would like to have a popup display that has a clickable URL and a close button. I can't use an alert for this because I need a clickable URL. Is there a way to display a popup using javascript or jquery that is similar to the ones used by Processmaker in the designer when you click on Dynaform and the window pops up?

Image

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Fri Nov 10, 2017 1:41 am

You should import the jquery-ui.js libary in your DynaForm. See this example:
http://wiki.processmaker.com/3.0/JavaScript_in_DynaForms#Example%20Using%20an%20External%20Library

You can use control.setOnchange() to display the dialog box.
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)

User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

Re: ProcessMaker jQuery popup

Unread postby ethanthekiwi » Fri Nov 10, 2017 3:10 pm

Thanks, that is exactly what I was looking for.

User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

Re: ProcessMaker jQuery popup

Unread postby ethanthekiwi » Fri Nov 10, 2017 4:23 pm

Another question about this. It works well on the desktop, but it doesn't seem to work at all from the ProcessMaker mobile app (Android). Is there something extra to do for the mobile app?

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Fri Nov 10, 2017 7:32 pm

I haven't tried it with the PM app. Have you tried the latest version of jquery-ui.js? If it still doesn't work, then check the app with the Chrome debugger. See:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
If you still can't figure it out, post the json file for your DynaForm and I will try it on my machine.

You also might want to try using the Mobile User Experience (which I like more than the PM app).
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)

User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

Re: ProcessMaker jQuery popup

Unread postby ethanthekiwi » Mon Nov 13, 2017 11:58 am

I tried the latest version, but when I try to open a form in the app, it shows loading and sits their loading forever (for several minutes till I give up).

Code: Select all

https://code.jquery.com/ui/1.12.1/jquery-ui.js,
https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css

I tried removing all the Javascript code from the dynaform and just had the external libraries loading and it still wouldn't load the form.

I have connected my Samsung Note 8 to my Windows 10 computer, I went through the steps to setup Remote deugging, I see my device listed, and when I open Chrome on my phone I can see the tabs show up in Remote devices on my desktop. However, when I open the ProcessMaker app and open a dyanform, I don't see that show up on the desktop. According to their documentation if the app uses Chrome WebView it should show up there. Do you know if ProcessMaker mobile uses that? I'm guessing that perhaps it does not.

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Mon Nov 13, 2017 9:38 pm

The ProcessMaker app uses webview.

Export your DynaForm and post the .json file and I will look at it.
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Mon Nov 13, 2017 11:26 pm

I just tried it with PM 3.2.1 Enterprise, PM app 1.2.0.1, jquery-ui.js 1.11.4, Android 6.0.1 and I didn't see any problems.

Please import this process and see if you still see any problems when you click on the button in the first DynaForm:
test_jquery_ui_dialog_boxes-1.pmx
(23.02 KiB) Downloaded 1 time


Here is what it looks like in the Chrome Debugger:
ChromePMAppDebugging.png
ChromePMAppDebugging.png (124.73 KiB) Viewed 61 times
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)

User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

Re: ProcessMaker jQuery popup

Unread postby ethanthekiwi » Tue Nov 14, 2017 11:57 am

OK, so I downloaded your process and it works fine. The modal dialog window pops up on the mobile app just fine. So I copied the external library URLs to my other dynaform. When I put those in, the form won't load on mobile. It just hangs saying it's loading:
Screenshot_20171114-092310.jpg
Screenshot_20171114-092310.jpg (94.41 KiB) Viewed 56 times

I'm trying to get Chrome Dev tools to see the web view and I'm not having any luck. I can see Chrome and Samsung Internet browser, but ProcessMaker doesn't appear. According to this article, debugging mode needs to be enabled in the app itself. Is that turned on all the time? I'm running version 1.2.0.1 also, build 9c9fb01.
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews#configure_webviews_for_debugging
chromedevtool.png
chromedevtool.png (35.74 KiB) Viewed 56 times


I can get the jquery dialog box to work fine in Chrome on the desktop. But even having the library loaded on the app causes it to hang when loading the form. I tried removing all the javascript and just having those external libaries in there and it was the same thing. I also tried changing the URLs on the libraries from http to https and changed the server URL on my app from http to https with the same result.

I've uploaded the json file of my dynaform. Maybe there is something else in there that's causing this issue. I set this dialog box to open when you click the save to drafts button at the bottom of the form. That's not where it will go ultimately, but it works for now.
Purchase Full Form (3).json
(45.07 KiB) Downloaded 1 time

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Tue Nov 14, 2017 9:56 pm

I think the problem is that it is taking too long to download the external libraries and WebView in Android tries to execute other things when they haven't properly loaded.

What you need to do is place the jquery-ui files in the workflow/public_html directory and load them from there. In a Linux server:
cd /opt/processmaker/workflow/public_html
wget http://code.jquery.com/ui/1.11.4/jquery-ui.js
wget http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

Then, in your "external libs" property of the DynaForm:
http://<your-ip>/jquery-ui.js, http://<your-ip>/jquery-ui.css


As for activating the Chrome debugger with the ProcessMaker App, did you activate the option Settings > Developer Options > Enable USB Debugging in Android? Did you connect your Android device with your PC using a USB cable? On my Android device (using Android 6.0), when I swipe down from the top, I see the message: "USB debugging connected: Touch to disable debugging." Maybe you need to a touch to enable debugging.

When you are in your Chrome browser on your PC, you need to press F12 to open the Chrome Dev Tools. Then in the debugger, go to
... (three vertical dots in the upper right corner) > More tools > Inspect devices ...
ChromeDevToolsInspectDevices.png
ChromeDevToolsInspectDevices.png (36.6 KiB) Viewed 48 times


A dialog box should open in the Chrome debugger. The name of your Android device should be listed on the left side and it should say "Connected". If there are multiple connected devices to the PC, then click on the device running the ProcessMaker App. Then, click on the Inspect button on the right side of the dialog box.
InpectDeviceDialogChromeDevTools.png
InpectDeviceDialogChromeDevTools.png (39.45 KiB) Viewed 48 times


A separate window should open in Chrome which displays the WebView screen of the Android device in the left panel. In the right panel, click on the Console tab to see any error messages in the ProcessMaker App.
ErrorUsingHideJS.png
ErrorUsingHideJS.png (231.32 KiB) Viewed 48 times
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)

User avatar
ethanthekiwi
Posts: 43
Joined: Fri Sep 06, 2013 2:22 pm

Re: ProcessMaker jQuery popup

Unread postby ethanthekiwi » Wed Nov 15, 2017 10:19 am

If I'm using the hosted version of ProcessMaker Cloud, how would I upload a file to workflow/public_html?

amosbatto
Posts: 5466
Joined: Mon Jun 22, 2009 10:28 am
Country: Bolivia
Location: La Paz

Re: ProcessMaker jQuery popup

Unread postby amosbatto » Wed Nov 15, 2017 7:23 pm

ethanthekiwi wrote:If I'm using the hosted version of ProcessMaker Cloud, how would I upload a file to workflow/public_html?

Put the jquery-ui files in the Public directory of a process, then you can access the files using the ID of the process in the address.
Amos B. Batto ♦ ProcessMaker Technical Documentation Writer & Forum Manager ♦ Cofounder of ILLA (http://www.illa-a.org)


Return to “Developing processes & programming”

Who is online

Users browsing this forum: No registered users and 2 guests