RichFaces components client-side JavaScript API

Many rich components (from rich: tag library) provide client-side JavaScript API. Being client-side means it’s happening only in the browser. We would have to click submit or fire an Ajax request to submit the changes. How do you find what JavaScript functions are available on a particularity component? The place to find this information is in the User Guide.

Let’s take a rich:listShuttle as an example. Here is a link to the component in User Guide. If you look at the very top, you will see five links. Click on Reference Data. You will now see JavaScript API table. This is the place where all JavaScript functions are listed. For any other component, you would do the same.

To use these functions, we first need to use a built-in #{rich:component(‘id’)} function in RichFaces. This will give us a reference to the available API for a particular component. We then just append the function name, so it looks like this: #{rich:component(‘id’)}.functionName();

Here is rich:listShuttle component:


      Major U.S based airlines
      My favorite airlines

Looking at the available API, let’s say we would like to place four buttons under the component that would perform the same actions you can do with Copy All, Copy, Remove and Remove All. Adding the following:

We are using a standard HTML button as they are all client-side functions. We then use #{rich:component(‘id’)} built-in function and reference the appropriate JavaScript API.

Firing an Ajax request is done the same way even if you didn’t have the four buttons. We can place a button and click it once we are done with editing. This is similar to filling out a form and clicking submit. If we want an Ajax request to be fired every time we change either the list or the order, we can use a4j:support tag to accomplish that.

      Major U.S based airlines
      My favorite airlines


We added two a4j:suppor tags with appropriate events and rich:dataList to display the result.

As always, visit RichFaces Component Demo application.


  1. Alex says:

    Hi Max,

    Nice example!! Where can I download the source code especially the airlineconverter? Thanks.


  2. max says:


    public class Airline implements {
       private String name;
       private String code;
       private String logoImage;
       // getters and setters
       public Airline(String name, String code) {
    		super(); = name;
    		this.code = code;
    		this.logoImage = "/images/air.png";
       public int hashCode() {
       public boolean equals(Object obj) {

    public class AirlineConverter
       implements javax.faces.convert.Converter{
       public Object getAsObject(FacesContext context, UIComponent component,
    			String value) {
    	String[] words = value.split(":");
    	String name = words[0];
    	String code = words[1];
    	Airline airline = new Airline(name, code);
    	return airline;
       public String getAsString(FacesContext context, UIComponent arg1, Object value) {
    	return value.toString();
  3. leo says:

    hi max you had a great articles,,
    btw do you ever think that you give the demo as well because it will help us alot to know from you,, btw i would like to asking

    i had an issue
    so im using richfaces and in my case i would like to adding dynamic table

    e.g–> when the value in the form is submmited via commandlink or command button the value will appear on the table below the form with row is added along with command link is clicked
    and the value on the row we could directly change for ex : if in the row COUNT(this is the name of the rows) the value is 5 after appear we could change the value directly

    do you have an idea how to do that because i try to find the answer and till now i havent any answer,,
    help me out thanks

    thanks for your help

  4. max says:

    @leo: you need to add the record to the list that’s bound to the table and then rerender the entire table.

  5. leo says:

    how could i to do that πŸ™‚
    because i’m new in java and richfaces

    thanks for your info max

  6. leo says:

    hi max i’ve been doing so but in your case value in the row could not be edited the row is increase but the value on the inside we could not be edited
    is there a way to do that??

  7. max says:

    @leo: I don’t quite understand what you are asking. If you need to update a value inside the row (record), then RichFaces supports partial table update. You need to use ajaxKeys attribute. See more in RichFaces docs.

  8. leo says:

    thanks max πŸ˜›

    sorry my english is bad but thanks for your passion
    gbu alot

  9. Ernesto Hernandez says:

    Hi Max!

    I’m wondering if you could tell me how can I iterate the target list from a rich:pickList with Javascript, in order to display the elements or items using an alert(); or at least to know which element is selected in the target list.
    What I really need is to disabled the remove button when I select a certain item in the target list. It may be that I have some items that should not be removed from the target list.

    I wish you can help me. I have been searching in many sites without success.
    Thanks in advance!


    1. max says:

      You should have access to jQuery on the page. Just do a select on the target list.

      1. Ernesto Hernandez says:

        Im new to jQuery. Now I have the text of the selected item, just text, I got it just with simple JS: That helps me but I can’t figure out how to get the button in order to disable it. Is there a way to obtain the Object represented by the item that is seleceted?

        Thanks for your response.

  10. Majid says:

    Can you provide the source code of this web ap example ?

    1. max says:

      Page code is in the post. Java code is in the comments (see above).

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.