Custom Share Actions with Forms

Let's imagine that you work on a task which should allow you to show a specific form by clicking on an action. So this tutorial shows how to achive this. For demo purposes we use an 'Edit title' action.

The action could look like the following one and needs to be configured in your 'share-config-custom.xml' file:

   <config evaluator="string-compare" condition="DocLibActions">
        <actions>
            <action id="my-edit" type="javascript" label="Edit title">
                <param name="function">onMyEdit</param>
            </action>
         </actions>
       
         <actionGroups>
            <actionGroup id="document-browse">
                <action index="101" id="my-edit"/>
            </actionGroup>
         </actionGroups>
   </config>

As you can see there is a JavaScript function bound to this Document Library Action. So we need to include a JavaScript file. Because we are currently focusing on the Document Library we could just override the 'actions-common.get.head.ftl' by copying it to '$TOMCAT_HOME/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/documentlibrary'. There we can see which JS files are already included. One of these files is for instance '${page.url.context}/res/js/documentlibrary-actions-min.js'. So it would be possible to add an addtional <script> tag to this head freemarker template. However, the better way is to use the following configuration in the 'share-config-custom.xml' file:

<config evaluator="string-compare" condition="DocLibCustom" replace="true">
      <dependencies>
            <js src="components/myactions/actions.js"/>
      </dependencies>
 </config>


In the next step, we have to provide the JavaScript function for the 'my-edit' action . For this purpose we just create a new JavaScript file in '$TOMCAT_HOME/webapps/share/components/myactions/actions.js'. It registers the 'onMyEdit' function.

(function()
{

    var mydlA_onMyEdit = function(record)
    {
         var scope = this,
            nodeRef = record.nodeRef,
            jsNode = record.jsNode;

         // Intercept before dialog show
         var doBeforeDialogShow = function mydlA_onMyEdit_doBeforeDialogShow(p_form, p_dialog)
         {
            // Dialog title
            var fileSpan = '<span class="light"> MyEdit </span>';

            //var dialogTitleSuffix = "-dialogTitle";
            var dialogTitleSuffix = "-form-container_h";
           
            Alfresco.util.populateHTML(
               [ p_dialog.id + dialogTitleSuffix , fileSpan ]
            );
         };

         var templateUrl = YAHOO.lang.substitute(Alfresco.constants.URL_SERVICECONTEXT + "components/form?itemKind={itemKind}&itemId={itemId}&destination={destination}&mode={mode}&submitType={submitType}&formId={formId}&showCancelButton=true",
         {
            itemKind: "node",
            itemId: nodeRef,
            mode: "edit",
            submitType: "json",
            formId: "my-edit-form"
         });

         // Using Forms Service, so always create new instance
         var myEdit = new Alfresco.module.SimpleDialog(this.id + "-myedit-" + Alfresco.util.generateDomId());

         myEdit.setOptions(
         {
            width: "auto",
            templateUrl: templateUrl,
            actionUrl: null,
            destroyOnHide: true,
            doBeforeDialogShow:
            {
               fn: doBeforeDialogShow,
               scope: this
            },
            onSuccess:
            {
               fn: function mydlA_onMyEdit_success(response)
               {
                  var successMsg = this.msg("Success!");
                 
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: successMsg
                  });
               },
               scope: this
            },
            onFailure:
            {
               fn: function mydLA_onMyEdit_failure(response)
               {
                  var failureMsg = this.msg("Failure!");
                
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: failureMsg
                  });
               },
               scope: this
            }
         });
       
         myEdit.show();
     };


    YAHOO.Bubbling.fire("registerAction",
    {
        actionName: "onMyEdit",
        fn: mydlA_onMyEdit
    });
})();

What we finally need is to define a form for our custom edit dialog. This happens also by using the configuration file 'share-config-custom.xml':

<config evaluator="node-type" condition="cm:content">
      <forms>
        <form id="my-edit-form">
            <field-visibility>
               <show id="cm:title" force="true" />
            </field-visibility>
            <appearance>
                <field id="cm:title">
                  <control template="/org/alfresco/components/form/controls/textfield.ftl" />
               </field>
            </appearance>
         </form>
      </forms>
</config>

Voila! Here a short summary:

1. Define a Share Custom Action which calls JavaScript
2. Implement a JavaScript function by registering it with a specific action name. The action name in your JavaScript file matches the function parameter in the Share configuration.
3. Use the 'Alfresco.module.SimpleDialog' by passing it the form id as a parameter.
4. Define a form with a specific id.