How to reuse the (jsf) richfaces Modal panel dialog box? - jsf

Question

In my application I have implemented an employee search functionality using the RichFaces 3.3 modal panel on Facelets. I'm trying to make this reusable across my application, so I have added the following code in facelet-taglib_1_0.xml
<tag>
<tag-name>employeeSearch</tag-name>
<source>employee-search.xhtml</source>
</tag>
The xhtml page contains the following components
search input field
search button
result datatable
I have also mapped a backing bean.
My issue is that I'm not able to get the value from the search input field
I wonder whether the approach given above is correct or if there's any better approach for this?
Thanks for your reply Arjan...i tried but result not binding in result datatable list. my code is here.
EmployeeSearchBean is request scope.
Calling reusable tag code :
<foo:employeeSearch orgSearchId="empHistSearch" bean="#{EmployeeSearchBean}" action="findEmployee" renderedVal="#{empHist.editable}" />
Model panel code :
<a4j:jsFunction name="submit" action="#{bean[action]}" />
<rich:modalPanel id="orgUnitSearchPanel_empHistSearch" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE_Search}" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/pics/buttons/fenster_schliessen.gif" id="hideOrgUnitSearchPanel_#{orgSearchId}" styleClass="hidelink" />
<rich:componentControl for="orgUnitSearchPanel_#{orgSearchId}" attachTo="hideOrgUnitSearchPanel_#{orgSearchId}" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<table class="dispinputTable" cellspacing="2" cellpadding="0">
<tr>
<td style="width: 75px;">
<h:outputText value="#{messages.mepit_OE}" />
</td>
<td>
<h:inputText id="empHist_oeExecutingName" value="#{EmployeeSearchBean.empSearchCriteria}" styleClass="text" size="60" />
</td>
<td>
<a4j:commandButton styleClass="mepitButtons" onclick="submit();" value="#{dbMessages.db_search}" title="#{dbMessages.db_search}" reRender="orgUnitDT#{orgSearchId}" />
</td>
</tr>
<tr>
<td colspan="3" >
<rich:extendedDataTable width="425px" height="150px"
id="orgUnitDT#{orgSearchId}" cellspacing="0" cellpadding="0" border="0"
styleClass="inhalt" var="oeLst" value="#{EmployeeSearchBean.employeeList}" rowClasses="row0, row1">
<rich:column width="370px;" align="left">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE}" />
</f:facet>
<h:outputText id="empHist_OE" value="#{oeLst.name}" />
</rich:column>
<rich:column width="55px;">
<f:facet name="header">
<h:outputText value="#{messages.mepit_select}" />
</f:facet>
<h:commandLink value="" styleClass="edit">
<f:setPropertyActionListener value="#{oeLst}" target="#{SkillPM.executingOrgUnit}" reRender="empHist_orgUnit" />
</h:commandLink>
<h:commandLink styleClass="edit" onclick="#{rich:component(mepit:concat(orgSearchId,'orgUnitSearchPanel'))}.hide(); submit(); return false;" />
</rich:column>
</rich:extendedDataTable >
</td>
</tr>
</table>
</rich:modalPanel>

Answer 1

One thing that's immediately open for improvement is that you should not add your own tags to what looks like the standard facelets taglib file. Leave that file alone and create your own file.
If you pass a value binding to your tag, and bind your search input field to this, then it should work:
<foo:employeeSearch myValue="#{yourBackingBean.someValue}"/>
And then in employee-search.xhtml:
<h:inputText value="#{myValue}" />
Feel free to use some other name instead of myValue. The point is that the attribute name you use on your custom tag should match what the input text component binds to.