Disabling UI Component With ADF Faces JavaScript API
Following example illustrates how to disable UI component using ADF Faces Java Script API. This example disables af:inputText when you click the button.
Note that af:inputText has set unsecure="disabled" and clientComponent="true". You must set these properties appropriately to set component properties in the client side.
A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty('attribute', newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty('disabled', false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
Note that af:inputText has set unsecure="disabled" and clientComponent="true". You must set these properties appropriately to set component properties in the client side.
- unsecure
A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty('attribute', newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty('disabled', false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
- clientComponent
whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="test.jsf" id="d1">
<af:resource type="javascript">
function disableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", true);
//The following line is for partial refresh, in this case
//its taken care by framework
//AdfPage.PAGE.addPartialTargets(nameInputText);
actionEvent.cancel();
}
function enableField(actionEvent) {
var nameInputText = actionEvent.getSource().findComponent("nameFld");
nameInputText.setProperty("disabled", false);
actionEvent.cancel();
}
</af:resource>
<af:form id="f1">
<af:panelGroupLayout id="pgl1">
<af:commandButton text="Disable Name Field" id="disableBtn"
partialSubmit="true">
<af:clientListener type="action" method="disableField"/>
</af:commandButton>
<af:commandButton text="Enable Name Field" id="enableBtn"
partialSubmit="true">
<af:clientListener type="action" method="enableField"/>
</af:commandButton>
</af:panelGroupLayout>
<af:inputText unsecure="disabled" clientComponent="true" label="Name" id="nameFld"/>
</af:form>
</af:document>
</f:view>
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
ReplyDeleteAlena
Diverticulitis Treatment Diverticulitis Diet
This comment has been removed by the author.
ReplyDeleteThat's cool. But to properly disable a commandButton you should do a little more. Check out this post. Also, AFAIK, disabling/enabling of af:inputDate does not work (as of ADF 11.1.1).
ReplyDeleteThanks for the post.
ReplyDeleteHow to add CompOper to an Implicit Search (Advanced Mode) as I dont see a ViewCriteria / ViewCriteriaRow for Implicit Search which comes by default
Hi Jobinesh,
ReplyDeleteThe code you have pasted in the article is not working, do we need to do anything else, my usecase is i just need to enable a disabled inputtext on click of a radio button. For this i followed the same approach, but its not working. Please suggest any recommendations.
Thanks.
What is the version of JDev/ADF that you tried? Is it the same piece of code shown in my post that you tried? Its supposed to work without issues.
ReplyDeletehey Jobinesh,
ReplyDeleteI am using PS5 JDeveloper, i just copied and pasted in the jspx page and tried. Do i need to use R2 for the above use case.
Hey Jobinesh,
ReplyDeleteIf you want, i can send the recording, please do let me know your email.
Thanks.
This comment has been removed by the author.
ReplyDeleteTry adding the following to refresh the comp in enableField() and disableField() methods. You can see this line commented in the source code. Look like in PS5 you need this magic line to work.
ReplyDeleteAdfPage.PAGE.addPartialTargets(nameInputText);
Hi Jobinesh,
ReplyDeleteI wanted to know if there is a way we can display operators only in Advanced mode for only a specific attribute. I do not want to display operators for all attributes even in Advanced Mode.
Thanks,
Akash
Akash
ReplyDeleteCheck out this post http://jobinesh.blogspot.in/2012/06/hiding-unwanted-operators-in-advanced.html
Jobinesh,
ReplyDeleteDoes this mean my only option is to add this compoper tag for every operator to every attribute . Is there no option that can help me to add a single operator to a single attribute instead of removing all operators from all attributes ?
Thanks,
Akash.
Hi Jobinesh,
ReplyDeleteI tried adding my .css and .js files as resources to my jsf page on JDeveloper but my Page Template stopped working after adding these files to document.
Then i tried to add them as in-page scripts but the result was the same. Do you have any idea about why this happens?
I'm using JDeveloper Studio Edition Version 11.1.2.3.0 by the way.
Thanks in advance
Hi Jobinesh,
ReplyDeleteI am new to adf. can u please tell me about how to add to numbers using javascript.I want to develop calculator using adf java script?
Hi Jobinesh...thank you so much for the code. This is exactly what I am looking for. It serves my purpose of disabling the column when clicked but I want the value to be set as "LOCKED" upon disabling and this has to be updated in the database. I am very new to Jdeveloper. Can you please help me?
ReplyDeleteThank you soo much
Shwetha :)
Hi Jobinesh...thank you so much for the code. This is exactly what I am looking for. It serves my purpose of disabling the column when clicked but I want the value to be set as "LOCKED" upon disabling and this has to be updated in the database. I am very new to Jdeveloper. Can you please help me?
ReplyDeleteThank you soo much
Shwetha :)
Hi,
ReplyDeleteI want to get value of my UI component through javascript.But i am not able to
I using this code:-
var component=actionEvent.getSource();
var id=component.getId();
alert(id.value);
Can you please tell me how i can get
Hi! I was much time to spend your post, it is very impressed to me. so I am regularly following your post. I would like more ideas from your blog...
ReplyDeletePrimavera Training in Chennai
Primavera Course in Chennai
Excel Training in Chennai
Corporate Training in Chennai
Embedded System Course Chennai
Linux Training in Chennai
Tableau Training in Chennai
Spark Training in Chennai
Oracle Training in Chennai
I am happy to find this post Very useful for me, as it contains lot of information
ReplyDeleteindiaunimagined
Article submission sites
Good explanation with appropriate solution.
ReplyDeletebusinessexceltemplates
Guest posting sites
Package of more pieces of information. Thank you.
ReplyDeleteTally Course in Madurai
Tally Training in Madurai
Tally Course in Coimbatore
Tally Training Coimbatore
Tally Classes in Coimbatore
Best Tally Classes in Coimbatore
This comment has been removed by the author.
ReplyDeleteThank you for excellent article.Great information for new guy like antimalware service executable
ReplyDelete