Page 1 of 1

Dynamically Disabling/Enabling Buttons

Posted: Fri Oct 31, 2014 3:59 pm
by DaveLClarkI
I've created a pair of functions for our RPG programmers to call from their Profound UI screens to dynamically disable or enable CSS buttons without having to make a round trip to the RPG program. They are trying to fire these from the [on change] event of a textbox widget.

Code: Select all

/*	================================================================================
disableCssButton()	sets the "disabled" property to "true"
							sets the "css class 2" property to "faded"
							then sets the "field type" property to force a redraw.
*/
wob.disableCssButton = function(elementId)
{
	if (getObj(elementId).pui.properties["field type"] == "css button")
	{
		applyProperty(elementId, "disabled", "true");
		applyProperty(elementId, "css class 2", "faded");
		applyProperty(elementId, "field type", getObj(elementId).pui.properties["field type"]);
	}
}
/*	================================================================================
enableCssButton()	sets the "disabled" property to "false"
							sets the "css class 2" property to " "
							then sets the "field type" property to force a redraw.
*/
wob.enableCssButton = function(elementId)
{
	if (getObj(elementId).pui.properties["field type"] == "css button")
	{
		applyProperty(elementId, "disabled", "false");
		applyProperty(elementId, "css class 2", " ");
		applyProperty(elementId, "field type", getObj(elementId).pui.properties["field type"]);
	}
}
My first question is: Is there something wrong with the way I'm doing this? We stepped it through Firebug and each line does execute without errors. The problem is that we are not seeing these changes take effect on the button in question.

We have also tried it two different ways. The first way is with the two properties ("disabled" and "css class 2") bound to RPG fields and set from RPG as *ON and "faded", respectively. The second way is with the two properties hardcoded in the screen as "true" and "faded", respectively. Under the first scenario the button becomes enabled (it's clickable) but remains faded (i.e., the css class is not being removed or the button is not being redrawn). Under the second scenario the button remains disabled (not clickable) *and* faded.

So, my second question is: If a property is bound to an RPG field, does this preclude being able to use the applyProperty() API to change the bound property's value?

In the end, though, my ultimate question is: How can we make this work? Thanks.

Re: Dynamically Disabling/Enabling Buttons

Posted: Fri Oct 31, 2014 4:11 pm
by Scott Klement
There was a bug in Profound UI 5.0 and older that prevented applyProperty() from working with multi-occurrence properties that ended in 2, 3, 4, etc. (Anything beyond the first property.) So in your example, it would work with "css class", but not with "css class 2". This was fixed in PUI 5.0.1.

Are you running 5.0.1?

There might be other issues as well. When I have a moment, I'll try to set up your JS and see if I can reproduce the problem. (I'll need to do that to troubleshoot it further.)

Re: Dynamically Disabling/Enabling Buttons

Posted: Fri Oct 31, 2014 4:24 pm
by DaveLClarkI
Scott Klement wrote:Are you running 5.0.1?
Thanks. Still on 4.8.4 but have 5.0.1 downloaded and will get it installed. Will let you know if we still have problems with this scenario.

Re: Dynamically Disabling/Enabling Buttons

Posted: Fri Oct 31, 2014 4:40 pm
by DaveLClarkI
But, otherwise, does it (or should it) make a difference if a widget property is bound to an RPG field as to whether JavaScript can use the Profound applyProperty() API against it or not?

Re: Dynamically Disabling/Enabling Buttons

Posted: Fri Oct 31, 2014 6:04 pm
by Scott Klement
For most properties, you can use applyProperty() to replace the value that came from a bound field with a new value. (It will not set the value of the bound field, it will replace it with the new value you are applying.)

There are some properties on some widgets where it won't work, however. For example, the "parameter value" properties of SQL-driven controls. If all of the needed data is known to the handler (due to bound variables or hard-coded values) the hander will run the SQL statement without getting any data from the display, so changing those values via JavaScript will not work if they are bound. However if you have "script:" or "js:" in the property the Handler knows that the data can be changed by JavaScript, so in that case an unbound property will work with applyProperty() whereas a bound property will not.

But, for most properties, you can override a bound value with applyProperty().

Re: Dynamically Disabling/Enabling Buttons

Posted: Wed Nov 19, 2014 5:40 pm
by Scott Klement
Dave, I wanted to follow up on this. Did updating to 5.0.1 resolve the problem, or is there still a problem I should look into?

Re: Dynamically Disabling/Enabling Buttons

Posted: Wed Nov 19, 2014 6:18 pm
by DaveLClarkI
There was still a problem -- though we were able to find a workaround after upgrading to the 5.0.1 version. You stated that the previous bug did not allow setting a value for a multiple occurrence property. The problem now is that when you set a value for one multiple occurrence property the other occurrences of that property are wiped out. So, the workaround I created was to save the current value of existing occurrences and then set them all in addition to the one I needed to change.

Here is the code I am using:

Code: Select all

/*	================================================================================
enableCssButton()	sets the "disabled" property to "false"
						sets the "css class 2" property to " "
						then sets the "field type" property to force a redraw.
*/
wob.enableCssButton = function(elementId)
{
	var fieldType = getObj(elementId).pui.properties["field type"];
	if (fieldType == "css button")
	{
		var cssClass1 = getObj(elementId).pui.properties["css class"];
		var cssClass3 = getObj(elementId).pui.properties["css class 3"];
		applyProperty(elementId, "disabled", "false");
		applyProperty(elementId, "css class 3", cssClass3);
		applyProperty(elementId, "css class 2", " ");
		applyProperty(elementId, "css class", cssClass1);
		applyProperty(elementId, "field type", fieldType);
	}
}