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.

  •  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>

Comments

  1. UnknownJuly 18, 2012 at 5:59 AM

    This comment has been removed by the author.

    ReplyDelete
  2. UnknownJuly 18, 2012 at 6:01 AM

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

    ReplyDelete
  3. AnonymousOctober 4, 2012 at 9:55 AM

    Thanks for the post.
    How to add CompOper to an Implicit Search (Advanced Mode) as I dont see a ViewCriteria / ViewCriteriaRow for Implicit Search which comes by default

    ReplyDelete
  4. NOctober 11, 2012 at 11:58 AM

    Hi Jobinesh,

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

    ReplyDelete
  5. Jobinesh PurushothamanOctober 12, 2012 at 12:50 AM

    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.

    ReplyDelete
  6. NOctober 12, 2012 at 10:15 AM

    hey Jobinesh,

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

    ReplyDelete
  7. NOctober 12, 2012 at 10:42 AM

    Hey Jobinesh,

    If you want, i can send the recording, please do let me know your email.
    Thanks.

    ReplyDelete
  8. ROctober 18, 2012 at 3:12 PM

    This comment has been removed by the author.

    ReplyDelete
  9. Jobinesh PurushothamanOctober 18, 2012 at 10:57 PM

    Try 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.
    AdfPage.PAGE.addPartialTargets(nameInputText);

    ReplyDelete
  10. AnonymousNovember 26, 2012 at 2:47 AM

    Hi Jobinesh,

    I 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

    ReplyDelete
  11. Jobinesh PurushothamanNovember 26, 2012 at 2:50 AM

    Akash
    Check out this post http://jobinesh.blogspot.in/2012/06/hiding-unwanted-operators-in-advanced.html

    ReplyDelete
  12. AnonymousNovember 26, 2012 at 10:29 PM

    Jobinesh,
    Does 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.

    ReplyDelete
  13. BedirOctober 1, 2013 at 4:42 AM

    Hi Jobinesh,

    I 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

    ReplyDelete
  14. UnknownNovember 20, 2013 at 5:18 PM

    Hi Jobinesh,

    I 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?

    ReplyDelete
  15. AnonymousJanuary 12, 2014 at 1:05 AM

    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?

    Thank you soo much
    Shwetha :)

    ReplyDelete
  16. AnonymousJanuary 12, 2014 at 1:06 AM

    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?

    Thank you soo much
    Shwetha :)

    ReplyDelete
  17. UnknownJanuary 14, 2014 at 5:53 AM

    Hi,

    I 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

    ReplyDelete
  18. Vicky RamMarch 10, 2019 at 12:13 AM

    I am happy to find this post Very useful for me, as it contains lot of information

    indiaunimagined
    Article submission sites

    ReplyDelete
  19. janakikrishnanMarch 22, 2019 at 4:51 AM

    Package of more pieces of information. Thank you.

    Tally Course in Madurai
    Tally Training in Madurai
    Tally Course in Coimbatore
    Tally Training Coimbatore
    Tally Classes in Coimbatore
    Best Tally Classes in Coimbatore

    ReplyDelete
  20. ManipriyanJune 8, 2019 at 11:36 PM

    This comment has been removed by the author.

    ReplyDelete

Post a Comment