title: JSF/PrimeFaces - Approaches for creating reusable data table dialogs
body: <p>I am using JSF 2.0 with Primefaces. I have a page with a data table containing a list of users in the system. Each user can have a collection of roles, so i would like to have a button to select a bunch of roles. I wanted this to be an ajax selector and reusable from other pages, so this is how i have laid it out. </p>
  
  <p><strong>User List page</strong></p>
  
  <pre><code>&lt;h:form prependId="false"&gt;
  &lt;p:dataTable id="userList" var="user" value="#{userBean.users}"&gt;
      &lt;p:column id="modelHeader"&gt;
          &lt;f:facet name="header"&gt;
                  Name
          &lt;/f:facet&gt;
          &lt;h:outputText value="#{user.name}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column&gt;
          &lt;f:facet name="header"&gt;
                  Select Roles
          &lt;/f:facet&gt;
         &lt;p:commandButton id="selectButton" oncomplete="roleDialog.show()" icon="ui-icon-search" title="Select Roles" /&gt;               
      &lt;/p:column&gt;
  
  &lt;/p:dataTable&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p><strong>Dialog defined inside user list page, but the contents will be moved to an include to promote reusability</strong></p>
  
  <pre><code>&lt;p:dialog header="Roles" widgetVar="roleDialog" resizable="true" id="roleDialog" modal="true"&gt;
  
      &lt;h:form prependId="false"&gt;
      &lt;h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;"&gt;
  
      &lt;p:dataTable id="roleList" var="user" value="#{roleBean.roles}"&gt;
      &lt;p:column id="modelHeader"&gt;
          &lt;f:facet name="header"&gt;
                  Name
          &lt;/f:facet&gt;
          &lt;h:outputText value="#{role.name}" /&gt;
      &lt;/p:column&gt;
  
  
      &lt;p:commandButton id="selectButton" actionListener="#{roleBean.selectRoles}" title="Select Roles" /&gt;               
  
  
      &lt;/h:panelGrid&gt;
      &lt;/h:form&gt;
  &lt;/p:dialog&gt;
  </code></pre>
  
  <p>My question is, I am not sure how to achieve the following.</p>
  
  <ul>
  <li>I would like to pass arguments to the role selector as criteria before rendering the content in the dialog.I can do this via f:setPropertyActionListener.. correct?</li>
  <li>After the role is selected, i would like to pass the selected id back to the user list page. I can do this via addCallbackParam, correct?</li>
  <li>Then i would like to pass that value back into the userList bean to an action listener to associate this role(s) to the user</li>
  </ul>
  
  <p>What is the best pattern to achieve this workflow in JSF. I do not want to duplicate my role selector in each page as i would like to re-use that. 
  Thank you for your patience in reading through this long post. I appreciate your response and 
  suggestions. </p>