RichFaces built-in client functions

RichFaces comes with four useful functions that make it simple to work with JavaScript. The functions are:

  1. #{rich:clientId(‘id’)}
  2. #{rich:element(‘id’)}
  3. #{rich:component(‘id’)}
  4. #{rich:findComponent(‘id’)}

Suppose you have this on JSF page:


Placing this on JSF page:


will display the component client id:


Placing this on JSF page:


is a reference to HTML element in DOM:


Placing this on JSF page:


is a reference to a custom JavaScript property that allows to call JavaScript API on rich components:


For example, let’s say you have a button and you want to show calendar’s next month. This is just a regular HTML button as we are only making a JavaScript call:

Above, #{rich:component(‘calendar’)} gets us reference to calendar HTML element custom JS property and then we call nextMonth() to advance the calendar to next months on the client. Many RichFaces components define some JavaScript API that you would call exactly the same way. To find out what API is available, look for that component in Developers Guide and then for JavaScript API section (usually in Reference section). Here is the API for rich:calendar component.

Lastly, there is #{rich:findComponent(‘id’)}. It’s neat function that allows you to test, or prototype without binding components to model (you don’t need managed beans).



Above, there is h:inputText tag but it has no value with binding #{…} to managed bean. This means that value in the component will not be pushed into the model (it stays in the component). a4j:support is attached to send an Ajax request when onkeyup event occurs and rerenders ‘output’ component. To echo, or rerender the input on the next line, we use #{rich:findComponent(‘input’)}.value function. This function locates the component with id ‘input’ in the JSF tree and displays its value.


  1. Laxman says:

    Thanks for the info…It helped me a lot.

  2. nmatrix9 says:

    Excellent article.

  3. vc says:

    hihi Max,

    i am looking for a way to reference component values in EL. is this possible?

    for example:

    when the button is pressed, i want the equivalent of this to be triggered:

    myBean.myFunction( ‘eng’ )

    (assuming that “English” option was selected)

    is my approach for accomplishing this correct? are there better more elegant approaches?


  4. max says:

    @vc: did you post any code? I don’t see it, post it via

  5. vc says:

    hihi Max,

    here is the code i was trying to paste in my message:

    thank you!

  6. max says:

    @vc: that’s a feature of Expression Language (EL). Not possible with JSF 1.2 unless you use JBoss EL. Should be able to do this in JSF 2.

  7. vc says:

    i am using RichFaces 3.3.2 SR1 together with Seam 2.2.0 GA… so i think i do have JBoss EL.

    but i tried the code sample i provided and it didn’t work.

    i also tried using the client functions and none of them worked either. for example, i tried using rich:findComponent() like so:

    i tested using the rich:findComponent() by itself (i.e. not nested within any other EL expression) and it works. but it seems the problem is that it doesn’t work when it is to be used to retrieve a value that will be a parameter to another EL expression, which in my case, is a function call.

    is there any way to do what i’m trying to achieve?


  8. max says:

    I don’t think the syntax is correct, it should be like this:


  9. vc says:

    but how can i use it within a function call?

    i tried both of the following without success:

    #{ myBean.myFunction( ‘param1’, rich:findComponent(‘languageField’).value ) }

    #{ myBean.myFunction( ‘param1’, #{ rich:findComponent(‘languageField’).value } ) }

    i’m trying to use the findComponent() result as an input parameter to another function declared in an EL expression.

  10. max says:

    The first one should work…

  11. rama says:

    i try to set focus on the rich:calendar but not able to please help me with this thing

  12. max says:

    @rama: what exactly not working?

  13. rama says:

    my problem is after hitting the a4j:commandButton edit button the focus should be set to the rich:calendar text

    i tryed focus= “id of the rich:calendar” but i am not geting the focus on the rich:calendar text field

  14. rama says:

    i tryed that but the focus is not going to the date

  15. max says:

    @rama: I don’t know what is date in your case but you just need to identify the element in source into which you want to set focus.

  16. Hi

    may i know wether there is any javascript function which will called on pageload i.e. similar window.onload() and My requirement is as soon as pageload i should open a model window.. any suggestions?

  17. max says:

    jQuery/prototype.js has such capability. RichFaces has both included.

  18. edogan says:

    thanks, it saves me.

  19. monica says:

    Muy útil, gracias por la ayuda!!

  20. Satya says:

    Superb difference shown. I like it and got more clarification now.

  21. Kishore says:

    Great great post. Looking for something consice like on RichFaces JS Api for a while now.

  22. mirec says:

    Hi all,
    Is it somehow possible to use built-in client-functions in regular java-script file which is then included to main page? I tried with no success. However java-script files are somehow processed as when I include <h:outputScript library="js" name="sample-file.js" target="head" /> to my page(sample-file.js is regular name of file), I’m getting &ltscript type="text/javascript" src="/contextroot/javax.faces.resource/sample-file.js.xhtml?ln=js"> in HTML code

    1. max says:

      I doubt that, in the current form it’s a Facelet function. You could probably find the actual JavaScript function being called and call it directly.

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.