[ethanthekiwi]

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?

[amosbatto]

You should import the jquery-ui.js libary in your DynaForm. See this example:
http://wiki.processmaker.com/3.0/JavaSc ... %20Library

You can use control.setOnchange() to display the dialog box.

[ethanthekiwi]

Thanks, that is exactly what I was looking for.

[ethanthekiwi]

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]

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 ... 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).

[ethanthekiwi]

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]

The ProcessMaker app uses webview.

Export your DynaForm and post the .json file and I will look at it.

[amosbatto]

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 394 times

Here is what it looks like in the Chrome Debugger:

ChromePMAppDebugging.png (124.73 KiB) Viewed 8221 times

[ethanthekiwi]

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 (94.41 KiB) Viewed 8216 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 ... _debugging

chromedevtool.png (35.74 KiB) Viewed 8216 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 295 times

[amosbatto]

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 ... ery-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 (36.6 KiB) Viewed 8208 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 (39.45 KiB) Viewed 8208 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 (231.32 KiB) Viewed 8208 times

[ethanthekiwi]

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

[amosbatto]

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.