[Linjian]

Hello,

Is it possible to change Display Mode of grid/fields by Javascripts in Dynaform, if yes, how to compile the scripts, can you make an example.

Thanks.

[marceloramirez1981]

Hello Linjian:

Take a look at this link:
http://wiki.processmaker.com/3.0/Form#External_Libs

hope this help you .

regards

[Linjian]

Thank you, I will check the details.

[amosbatto]

Linjian, There is an example in the wiki about how to set the "disabled" property of a field using JavaScript. See:
http://wiki.processmaker.com/3.0/JavaSc ... thods#attr

This should work for most fields in DynaForms. You can also use the "readOnly" property for textboxes and textareas.

PS: Using external libs won't help you.

[ekaboom]

I tried this example in PM 3.0 but when I go to preview, the text box in my grid didn't change to disabled at all. So am I missing something or is this a bug?

Here's what I added to my form's javascript:

Code: Select all

$("#checkbox0000000001").setOnchange( function(newVal, oldVal) {  
    if (newVal = '"["1"]"') {
        $("#text0000000021").getControl().attr('disabled', true);
    } 
} );

checkbox0000000001 is the checkbox in my grid and text0000000021 is the textbox in the same grid.

[amosbatto]

setOnchange() does not work for fields inside grids. You need to use form.setOnchange().
See:
http://wiki.processmaker.com/3.0/Grid_C ... s_in_grids

Also keep in mind that the value of checkboxes in grids is "1" (checked) or "0" (not checked). Their values are different from normal checkboxes.

[ekaboom]

Thank you. I am still curious if/when setOnChange is/was implemented. Because even when I try to make a textbox become disabled when a checkbox is checked and both are outside of the grid, it's still not working for me. But maybe my code is wrong too. Here is what I have to try to make a text box disabled when a checkbox is checked (again both are outside of any grids):

Code: Select all

function enableDisableText(newVal, oldVal) {
  if( newVal === '["1"]' ) {
        $("#storysource20").getControl().attr('disabled', true);
    } else {
        $("#storysource20").getControl().attr('disabled', false);  
    }
}
$('#checkboxVar001').setOnchange(enableDisableText);

This doesn't seem to work on my install (3.0)

[amosbatto]

Which version of PM are you using? PM 3.0.1.7 has a bug which prevents setOnchange() from working with checkboxes.

In PM 3.1 and later, you need to do this:

Code: Select all

function enableDisableText(newVal, oldVal) {
  if( newVal == "1" ) {
        $("#storysource20").getControl().attr('disabled', true);
    } else {
        $("#storysource20").getControl().attr('disabled', false); 
    }
}
$('#checkboxVar001').setOnchange(enableDisableText);

I just discovered this change. I will add code examples on the wiki.

[ekaboom]

Thanks for the reply

I am actually running PM 3.1 and that still doesn't seem to work for me.
PMUI JS Lib. Ver. 0.1.1
MAFE JS Lib. Ver. HEAD.d6c56d2
PM Dyanaform JS Lib. Ver. 3.1.3f6417c

Is it possible the bug carried over to version 3.1?

Thanks

[amosbatto]

Try it this way:

Code: Select all

function enableDisableText(newVal, oldVal) {
  if( newVal == '"1"' ) {
        $("#storysource20").getControl().attr('disabled', true);
    } else {
        $("#storysource20").getControl().attr('disabled', false);
    }
}
$('#checkboxVar001').setOnchange(enableDisableText);

[ekaboom]

Thanks again.

I tried that as well but it doesn't work either on a local PM 3.1 or my online one.

I think maybe that bug wasn't fixed for 3.1.

Is there an easy way for me to quickly test setOnChange to see if it works?

Have you tried setOnChange on PM 3.1?

Thanks

[amosbatto]

I just tried it in PM 3.1.2 and it works. What kind of field are you trying to disable? Attached is an example you can look at:

check setOnchange.json

(2.18 KiB) Downloaded 827 times

[ekaboom]

Ok, you are brilliant and I'm an idiot.

testing your example helped me find the issue.

When yours worked and mind didn't, I knew something was interfering on my end.

I ended up realizing that I had added some javascript in a panel that was interfering with setOnChange so I removed it and now it works!

Thanks so much for your help and patience.

you rock!

[ekaboom]

How could this be modified so it will be set Onload and not setOnchange?

Code: Select all

function enableDisableText() {
  if( $('#storyapproved001').getValue() == '"1"' ) {
        $("#storysouce1").getControl().attr('disabled', true);
    } else {
        $("#storysouce1").getControl().attr('disabled', false);
    }
}
$('#storyapproved001').getValue(enableDisableText);

or something more like this?

Code: Select all

$('#storyapproved001').getValue(function () {
  if( $('#storyapproved001').getValue() == 1 ) {
        $("#storysouce1").getControl().attr('disabled', true);
    } else {
        $("#storysouce1").getControl().attr('disabled', false);
    }
} );

[amosbatto]

To make it execute when the DynaForm loads, do this:

Code: Select all

function enableDisableText() {
  if( $('#storyapproved001').getValue() == '"1"' ) {
        $("#storysouce1").getControl().attr('disabled', true);
    } else {
        $("#storysouce1").getControl().attr('disabled', false);
    }
}
enableDisableText();

[ekaboom]

Thanks. That does make sense, but it doesn't appear to disable the field.

I tried it with your "test checkonchange" example above too and it didn't work with that one either (so I know there isn't any interference from other javascript).

Thanks for your suggestion.

[amosbatto]

Probably something hasn't finished loading. Try it this way:

Code: Select all

function enableDisableText() {
  if( $('#storyapproved001').getValue() == '"1"' ) {
        $("#storysouce1").getControl().attr('disabled', true);
    } else {
        $("#storysouce1").getControl().attr('disabled', false);
    }
}
$( document ).ready( enableDisableText );

[ekaboom]

Thank you again.

Unfortunately, it's still not working.

I tested it on your sample dynaform too (attached) with no luck.

test onchange on load.json

(2.52 KiB) Downloaded 803 times

I also tried using these to load it:

Code: Select all

$( window ).on( "load", enableDisableText );
$( "document" ).ready( enableDisableText );
$().ready( enableDisableText );

and just for fun these:

Code: Select all

$( "img" ).ready( enableDisableText )
$(document).on( "ready", enableDisableText )

I also tried changing this line:

Code: Select all

  if( $('#storyapproved001').getValue() == '"1"' ) {

with these alternatives:

Code: Select all

  if( $("#storyapproved001").getValue() == '["1"]' ) {
  if( $('#storyapproved001').getValue() == '"["1"]"' ) {
  and a few others

The strange part is that it works fine with the onchange but not on loading the form.

[amosbatto]

The problem is that getValue() returns '1' or '0', whereas setOnchange() sees the value as '"1"' or '"0"'.
If you use this code it will work:

Code: Select all

function enableDisableText() {
  if( $('#disableCountry').getValue() == '1' ) {
        $("#country").getControl().attr('disabled', true);
    } else {
        $("#country").getControl().attr('disabled', false);
    }
}
enableDisableText();  

I have documented all this craziness:
http://wiki.processmaker.com/3.1/Checkb ... checkboxes

[ekaboom]

That was it! Such a simple change too. I tried so many variations, I can't believe I didn't try that one!

Thanks a ton for helping me figure this one out!

[nycmwr3]

Is there any way this can be done using a php trigger instead of javascript before a dynaform loads ? I am trying to disable fields using a php trigger and I am not sure how to go about this . I couldn't find any examples on the processmaker wiki either.

[amosbatto]

Is there any way this can be done using a php trigger instead of javascript before a dynaform loads ? I am trying to disable fields using a php trigger and I am not sure how to go about this . I couldn't find any examples on the processmaker wiki either.

Let's say that you want to enable a field whose ID is "selectCountry" if the "exportAbroad" checkbox is marked or disable it if it isn't marked.

Add the following trigger to your process:

Code: Select all

@@enableSelectCountry = "yes"; //enabled by default

//if exportAbroad is not marked, then disable the "selectCountry" field in the next form:
if (is_array(@=exportAbroad) and @=exportAbroad[0] == '0') {
    @@enableSelectCountry = "no";
}

Set this trigger to execute before the DynaForm.

In the DynaForm, add a hidden field associated with the "enableSelectCountry" variable.
Then, add the following JavaScript code to the DynaForm:

Code: Select all

$("#enableSelectCountry").getValue()  == "no") {
   $("#selectCountry").getControl().attr("disabled", true);
}

[nycmwr3]

thank you very much for the example . The javascript in the above example is not loading. The dynaform just displays the spinning wheel when I load it.

Another question: How do I disable fields with triggers without having an enable disable checkbox ? For Example : When the first user fills in the selectCountry textbox with some value and sends it for approval to the second user , the selectCountry checkbox is automatically disabled when the second user loads the dynaform.

[amosbatto]

When you have an error in the JavaScript, press F12 in your web browser to open the browser's debugger and go to the "Console" tab to see the error.
I have created a sample process to show you how to disable a field in the second task. See the trigger executed before the form in the second task and the JavaScript code.

enable_disable_field_from_trigger-1.pmx

(35.66 KiB) Downloaded 735 times

I found that dropdowns in Firefox need to be disabled this way:

Code: Select all

$("#dropdownID").getControl().prop("disabled", true);

For some reason the attr() function doesn't work.