Custom dialog with people finder select button

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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>