Pages

▼

Sunday, March 6, 2011

Set the Initial Focus on a component in a Page or a Fragment

In ADF 11g you can use the initialFocusId property of the af:document component to set the input focus on a UIComponent. On the UIComponent you need to set id property and set the clientComponent property to true. And use this id in the initialFocusId property of the af:document component which is only located in a ADF Page. This is not so hard to do, but sometimes it can be tricky to find the id of a component when you use regions ( Bounded Task Flows ). To solve this you can use the developer tool of Google Chrome or the Firebug plugin of  Mozilla FireFox. Select the UIComponent and take a look at this id, you can remove the ::content part.


To set the focus on an UIComponent in a dynamic Region can be hard because this id of the component is not always the same. It depends which Task Flow you open first ( sometimes it is region1:1:input1 or region1:2:input1 ) . And the second problem you have that you need to use some javascript to set the focus.
The solution is to lookup the region UIComponent and try to find the UIComponent from there, get the clientId and use this value.

Here are some screenshot of the possible scenarios.
Set the focus on the Label 2 item, this is in the ADF page.
Same page but now I set the focus on the DepartmentName in the Department Dynamic Region.
New page but with a static Employee Region.

Example page with the af:document and initialFocusId property set on a managed bean
The managed bean which controls the focus
Here is the example workspace
at

3 comments:

  1. RaajSeptember 22, 2011 at 9:57 PM

    Hi Biemond this post was very useful, it works for region with multiple pagefragments also.

    We have an issue, If an pagefragment is partially submited by a LOV, the focus goes to the first field in the page controlled by initialfocusid. How could we avoid the change of focus during partialsubmit.

    with Thanks,
    Raaj

    ReplyDelete
  2. UnknownMarch 8, 2016 at 11:05 PM

    Thanks Edwin for the nice article.But if a component present inside the af:iterator then i don't see the clientId.Is there any other way to get the clientId if the component present inside the af:iterator.

    Thanks,
    Naga

    ReplyDelete
  3. UnknownMarch 8, 2016 at 11:06 PM

    Thanks Edwin for the nice article.But if a component present inside the af:iterator then i don't see the clientId.Is there any other way to get the clientId if the component present inside the af:iterator.

    Thanks,
    Naga

    ReplyDelete