Custom dialog with people finder select button

[suman_nitt]

I created a custom form using webscript which gets loaded in a Simple dialog. One of the fields in the form is user picker select button, which should open a dialog for searching user. Selected user should get displayed in the form. How do i get this user picker field in my custom form? Below is my userform.get.html.ftl code.

<#assign el=args.htmlid?html>
<div id="${el}-dialog" class="review-session">
   <div id="${el}-dialogTitle" class="hd">${msg("title")}</div>
   <div class="bd">
      <form id="${el}-form" action="" method="post">
         <div class="yui-g">
            <h2 id="${el}-dialogHeader">${msg("header")}</h2>
         </div>

    <div class="yui-gd">
            <div class="yui-u"><label for="${el}-name">${msg("label.title")}:</label></div>
            <div class="yui-u"><input id="${el}-name" type="text" name="name" tabindex="0" /> *</div>
         </div>

        <!– People Finder start –>

        <!– People Finder end –>
        
    <div class="yui-gd">
            <div class="yui-u"><label for="${el}-title">${msg("label.requiredApproval")}:</label></div>
            <div class="yui-u"><input id="${el}-title" type="text" name="title" tabindex="0" /></div>
         </div>
         <div class="bdft" style="float:left">
            <input type="submit" id="${el}-ok" value="${msg("button.ok")}" tabindex="0" />
            <input type="button" id="${el}-cancel" value="${msg("button.cancel")}" tabindex="0" />
         </div>
      </form>
   </div>
</div>


Please help

[mincd_evolpe]

You have to use client side javascript and add finder to the FTL to achieve that. Take a look at:
\tomcat\webapps\share\components\workflow\task-edit-header.js
\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\workflow\task-edit-header.get.html.ftl
Here is an example, where I've added the people finder in user profile.
FTL:

<#– includes –>
   <@link href="${url.context}/res/components/people-finder/people-finder.css" group="profile"/>
<#– … –>

   <@script src="${url.context}/res/components/people-finder/people-finder.js" group="group_name"/>

<#– … –>

<@markup id="html">
   <@uniqueIdDiv>
      <#include "../../include/alfresco-macros.lib.ftl" />
<#– … –>
            <!– People Finder Dialog –>
             <div style="display: none;">
                <div id="${el}-reassignPanel" class="substitute-edit-header reassign-panel">
                   <div class="hd">${msg("label.substitute")}</div>
                   <div class="bd">
                      <div style="margin: auto 10px;">
                         <div id="${el}-peopleFinder"></div>
                      </div>
                   </div>
                </div>
             </div>

<#– … –>
<#– field for value changed by finder and button for opening the finder: –>
            <div class="row">
               <span class="label"><label for="${el}-input-substitute">${msg("label.substitute")}:</label></span>
               <span><input readonly="readonly" type="text" maxlength="256" size="30" id="${el}-input-substitute" value="" <@immutablefield field="substitute" /> /></span>
               <span class="reassign"><button id="${el}-reassign">${msg("button.reassign")}</button></span>
            </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In your custom JS:
<javascript>

//…
$hasEventInterest = Alfresco.util.hasEventInterest;
//…
onReady: function UP_onReady()
{
   //…

Alfresco.util.Ajax.request(
                 {
                    url: Alfresco.constants.URL_SERVICECONTEXT + "components/people-finder/people-finder",
                    dataObj:
                    {
                       htmlid: this.id + "-peopleFinder"
                    },
                    successCallback:
                    {
                       fn: this.onPeopleFinderLoaded,
                       scope: this
                    },
                    failureMessage: "Could not load People Finder component",
                    execScripts: true
                 });
   //…
}
//…
/**
       * Called when the people finder template has been loaded.
       * Creates a dialog and inserts the people finder for choosing substitute.
       *
       * @method onPeopleFinderLoaded
       * @param response The server response
       */
      onPeopleFinderLoaded: function UP_onPeopleFinderLoaded(response)
      {
         // Inject the component from the XHR request into it's placeholder DIV element
         var finderDiv = Dom.get(this.id + "-peopleFinder");
         finderDiv.innerHTML = response.serverResponse.responseText;

         // Create the Assignee dialog
         this.widgets.reassignPanel = Alfresco.util.createYUIPanel(this.id + "-reassignPanel");

         // Find the People Finder by container ID
         this.widgets.peopleFinder = Alfresco.util.ComponentManager.get(this.id + "-peopleFinder");

         // Set the correct options for our use
         this.widgets.peopleFinder.setOptions(
         {
            singleSelectMode: true,
            addButtonLabel: this.msg("button.select")
         });

         // Make sure we listen for events when the user selects a person
         YAHOO.Bubbling.on("personSelected", this.onPersonSelected, this);
        
         //—
         this.widgets.reassignButton = Alfresco.util.createYUIButton(this, "reassign", this.onReassignButtonClick);
         Dom.removeClass(Selector.query(".actions .reassign", this.id), "hidden");
        
      },

      /**
       * Called when the user has selected an assigne from the people finder.
       *
       * @method onPersonSelected
       * @param e DomEvent
       * @param args Event parameters (depends on event type)
       */
      onPersonSelected: function UP_onPersonSelected(e, args)
      {
         // This is a "global" event so we ensure the event is for the current panel by checking panel visibility.
         if ($hasEventInterest(this.widgets.peopleFinder, args))
         {
            this.widgets.reassignPanel.hide();
            this._updatePeopleProperties(
            {
               "sun_substitute": args[1].userName
            }, "reassign");
         }
      },
     
      /**
       * Event handler called when the "reassign" button is clicked
       *
       * @method: onReassignButtonClick
       */
      onReassignButtonClick: function UP_onReassignButtonClick(layer, args)
      {
         this.widgets.peopleFinder.clearResults();
         this.widgets.reassignPanel.show();
      },
     
      /**
       * Updates a people property substitute
       *
       * @method: _updatePeopleProperties
       * @private
       */
      _updatePeopleProperties: function UP_updatepeopleProperties(properties, action)
      {
          Dom.get(this.id + "-input-substitute").value = properties.sun_substitute;
         
      },

</javascript>