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

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="Second" initialFocusId="#{Focus.focus}">
<af:form id="f1">
<af:panelStretchLayout id="psl1">
<f:facet name="center">
<af:region value="#{bindings.employee1.regionModel}" id="r1"/>
<!-- id="af_one_column_stretched"   -->
</f:facet>
<f:facet name="top">
<af:toolbar id="t1">
<af:commandToolbarButton text="start Page" id="second"
action="start"/>

</af:toolbar>
</f:facet>  
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>

The managed bean which controls the focus

package nl.whitehorses.adf.demo.beans;

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

import oracle.adf.controller.TaskFlowId;
import oracle.adf.share.ADFContext;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;

public class Focus {

// to make this work the UIComponent must have clientComponent="true"
public String getFocus() {
FacesContext facesContext = FacesContext.getCurrentInstance();
String clientId    = null;

// only for the secondPage, this page contains no dynamic regions
if ("/secondView".equals(facesContext.getViewRoot().getViewId())){
clientId = "r1:0:it3";
}

// only for the startPage
if ("/startView".equals(facesContext.getViewRoot().getViewId())){

// what is the current Task Flow
TaskFlowId taskFlow = 
(TaskFlowId)this.getExpression("DynamicRegion.dynamicTaskFlowId");

// in the region we need to find the component
UIComponent region = facesContext.getViewRoot().findComponent("r1");
UIComponent focus  = null;

// department TF
if ( "/WEB-INF/department.xml#department".equals(taskFlow.getFullyQualifiedName()) ){

// find the Focus UIComponent in the department TF 
// and get its clientId
focus  = region.findComponent("it1");  

// employee TF  
} else if ( "/WEB-INF/employee.xml#employee".equals(taskFlow.getFullyQualifiedName())) {

// find the Focus UIComponent in the employee TF 
// and get its clientId
focus  = region.findComponent("it3");

}
if ( focus != null ) {
// found so use javascript to set the focus
clientId = focus.getClientId(facesContext);
ExtendedRenderKitService service = 
Service.getRenderKitService(facesContext,
ExtendedRenderKitService.class);
service.addScript(facesContext,
" var b = AdfPage.PAGE.findComponent('"+clientId+"'); b.focus();"
);
} else {
// nothing found then set the startPage focus  
clientId = null;
}

// nothing found then set the startPage focus, this 
// can be handled without javascript
if ( clientId == null )
clientId = "it2";
System.out.println(new java.util.Date()+" focus on "+clientId);
}
return clientId;
}

private Object getExpression(String param) {
ADFContext adfCtx = ADFContext.getCurrent();
ELContext elContext2 = adfCtx.getELContext();
ExpressionFactory elFactory2 = adfCtx.getExpressionFactory();
ValueExpression valueExp2 = 
elFactory2.createValueExpression(elContext2,
"#{"+param+"}",Object.class);
return valueExp2.getValue(elContext2);
}

}