RichFaces Component Control is a universal component that allows to call JS API functions on the components after defined events.

In this simple example componentControl components are used to open and close modal panel. The component is attached to links and calls "show" and "hide" functions on Modal Panel.

Component Control with modal panel example

Main component attributes:

- for - specifies client identifier of the target component.
- attachTo - specifies client identifier of the component or id of the existing DOM element that is a source for a given event. If attachTo is not defined, the event is attached on the server to the closest in the component tree parent component.
- event - is used to trigger the operation on the target component
  Note: the component could use "oncontextmenu" event to call the JS API on right click event. But in this case this component should be defined via for attribute rather than using a4j:support style. In case of support-like definition, the component will not work properly, as many of the components don't encode this event.
- operation - name of the javascript function that will be invoked on a target component. The API method is attached to the 'component' property of the root DOM element that represents the target component. The function has two parameters - event and params.
- params - a set of parameters passed to the function of Javascript API that will be invoked. The JSON syntax is used to define the parameters, but without open and closed curve bracket. As an alternative, a set of f:param can be used to define the parameters passed to the API function.

Thus, one of the main features is that Component Control component allows to transfer parameters to managed components.

You may put f:param components as nested to component control component (instead of params attribute usage) and all the parameters that are defined will be available from target component.

In the next example, component control is used inside rich:dataTable component. Component control is defined with two parameters which have the current row values. Hence the rich:contextMenu component that called by this Component Control will take this parameters and will be able to display them in its items values.

Click at any table row to see the context menu that generated individually for every row using parameters.

Component Control with rich:dataTable example