Invoquer le formulaire d'édition de propriétés d'un document depuis un dashlet

cancel
Showing results for 
Search instead for 
Did you mean: 
jeanw
Member II

Invoquer le formulaire d'édition de propriétés d'un document depuis un dashlet

Bonjour à tous.

Je pense que mon titre est assez clair.
J'ai un dashlet qui m'affiche toutes les métadonnées de mon document. Je veux rajouter un mode édition des métadonnées en invoquant tout simplement le formulaire d'édition qui est utilisé lorsqu'on clique sur le lien "edit properties" dans "documentlibrary".
Dans mon ftl, j'ai le code suivant:
<blockcode><#– Uncomment to use a client-side JavaScript component in conjunction with the dashlet –>

<script type="text/javascript">//<![CDATA[

(function() {
   var getDataDoc = new se.dashlet.GetDataDoc("${args.htmlid}").setOptions(
   {
      "componentId": "${instance.object.id}",
     "siteId": "${page.url.templateArgs.site!""}"
   }).setMessages(${messages});
  
   new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");
  
   var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
   editDashletEvent.subscribe(getDataDoc.onConfigGetDataDocClick, getDataDoc, true);
   new Alfresco.widget.DashletTitleBarActions("${args.htmlid?html}").setOptions(
   {
      actions:
      [

      <#if userIsSiteManager>
         {
            cssClass: "edit",
            eventOnClick: editDashletEvent,
            tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
         },
      </#if>
         {
            cssClass: "help",
            bubbleOnClick:
            {
               message: "${msg("dashlet.help")?js_string}"
            },
            tooltip: "${msg("dashlet.help.tooltip")?js_string}"
         }
      ]
   }); 
})();
//]]></script>
<div class="dashlet">

   <div class="title">${msg("header")}</div>

   <div class="body scrollableList" <#if args.height??>style="height: ${args.height}px;"</#if>>

     <div class="detail-list-item first-item last-item">
      
        <table class="metadata">
         <tbody>
            <#list result?keys as data>
            <tr>
               <td class="white">${data}</td>
               <td class="yellow">${result[data]}</td>
            </tr>
            </#list>
         </tbody>
      </table>
     </div>
   </div>
</div>
</blockcode>

Dans mon js, j'ai le code suivant:
<blockcode>
/**
* se root namespace.
*
* @namespace se
*/
if (typeof se == "undefined" || !se)
{
   var se = {};
}

/**
* se dashlet namespace.
*
* @namespace se.dashlet
*/
if (typeof se.dashlet == "undefined" || !se.dashlet)
{
   se.dashlet = {};
}

/**
* Sample GetDataDoc dashboard component.
*
* @namespace se.dashlet
* @class se.dashlet.GetDataDoc
* @author
*/
(function()
{
   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML,
      $combine = Alfresco.util.combinePaths;


   /**
    * Dashboard GetDataDoc constructor.
    *
    * @param {String} htmlId The HTML id of the parent element
    * @return {se.dashlet.GetDataDoc} The new component instance
    * @constructor
    */
   se.dashlet.GetDataDoc = function GetDataDoc_constructor(htmlId)
   {
      this.configDialog = null;
      return se.dashlet.GetDataDoc.superclass.constructor.call(this, "se.dashlet.GetDataDoc", htmlId);
      /**
      * Register this component
      */
      Alfresco.util.ComponentManager.register(this);

      /**
      * Load YUI Components
      */
      Alfresco.util.YUILoaderHelper.require(["button", "container", "datasource", "datatable", "paginator", "json", "history", "tabview"], this.onComponentsLoaded, this);

      return this;
   };

   /**
    * Extend from Alfresco.component.Base and add class implementation
    */
   YAHOO.extend(se.dashlet.GetDataDoc, Alfresco.component.Base,
   {
      /**
       * Object container for initialization options
       *
       * @property options
       * @type object
       */
      options:
      {
      componentId: "",
      siteId: "",
      containerId: "documentlibrary",
      },

      /**
       * Fired by YUI when parent element is available for scripting
       *
       * @method onReady
       */
      onReady: function GetDataDoc_onReady()
      {
         // Code goes here
       var me = this;
      },
     onConfigGetDataDocClick: function getDataDoc_onConfigGetDataDocClick(e)
        {
         var nodeRef = "workspace://SpacesStore/9e07c849-19f5-4e6e-a709-4c5d2f995069";
         var record = new Alfresco.util.NodeRef(nodeRef);
         //this.onActionDetails(node);
         alert("Test PopUp");
         
         //My code test
         var scope = this,
            nodeRef = record.nodeRef,
            jsNode = record.jsNode;

         // Intercept before dialog show
         var doBeforeDialogShow = function dlA_onActionDetails_doBeforeDialogShow(p_form, p_dialog)
         {
            // Dialog title
            var fileSpan = '<span class="light">' + $html(record.displayName) + '</span>';

            Alfresco.util.populateHTML(
               [ p_dialog.id + "-dialogTitle", scope.msg("edit-details.title", fileSpan) ]
            );

            // Edit metadata link button
            this.widgets.editMetadata = Alfresco.util.createYUIButton(p_dialog, "editMetadata", null,
            {
               type: "link",
               label: scope.msg("edit-details.label.edit-metadata"),
               href: $siteURL("edit-metadata?nodeRef=" + nodeRef)
            });
         };

         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: "doclib-simple-metadata"
         });

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

         this.configDialog.setOptions(
         {
            width: "40em",
            templateUrl: templateUrl,
            actionUrl: "",
            destroyOnHide: true,
            doBeforeDialogShow:
            {
               fn: doBeforeDialogShow,
               scope: this
            },
            onSuccess:
            {
               fn: function dlA_onActionDetails_success(response)
               {
                  // Reload the node's metadata
                  Alfresco.util.Ajax.request(
                  {
                     url: $combine(Alfresco.constants.URL_SERVICECONTEXT, "components/documentlibrary/data/node/", jsNode.nodeRef.uri) + "?view=" + this.actionsView,
                     successCallback:
                     {
                        fn: function dlA_onActionDetails_refreshSuccess(response)
                        {
                           var record = response.json.item
                           record.jsNode = new Alfresco.util.Node(response.json.item.node);

                           // Fire "renamed" event
                           YAHOO.Bubbling.fire(record.node.isContainer ? "folderRenamed" : "fileRenamed",
                           {
                              file: record
                           });

                           // Fire "tagRefresh" event
                           YAHOO.Bubbling.fire("tagRefresh");
                    
                     // Fire "registerAction" event
                           YAHOO.Bubbling.fire("registerAction",
                     {
                        actionName: "onActionDetails",
                        fn: onActionDetails
                     });

                           // Display success message
                           Alfresco.util.PopupManager.displayMessage(
                           {
                              text: this.msg("message.details.success")
                           });
                        },
                        scope: this
                     },
                     failureCallback:
                     {
                        fn: function dlA_onActionDetails_refreshFailure(response)
                        {
                           Alfresco.util.PopupManager.displayMessage(
                           {
                              text: this.msg("message.details.failure")
                           });
                        },
                        scope: this
                     }
                  });
               },
               scope: this
            },
            onFailure:
            {
               fn: function dLA_onActionDetails_failure(response)
               {
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: this.msg("message.details.failure")
                  });
               },
               scope: this
            }
         });
       //Display module
       this.configDialog.show();
      }
   });
})();

</blockcode>

Pour le moment je fixe le nodeRef en dure pour mes tests.
 var nodeRef = "workspace://SpacesStore/9e07c849-19f5-4e6e-a709-4c5d2f995069";

J'ai fais une alerte pour voir si ma fonction etait bien invoqué.
alert("Test PopUp");


Merci d'avance

JeanW
2 Replies
jeanw
Member II

Re: Invoquer le formulaire d'édition de propriétés d'un document depuis un dashlet

Avec Firebug, je vois bien que je recupère bien mon formulaire mais la popUp ne se lance pas.
Firebug console:
<blockcode> <script type="text/javascript">//<![CDATA[
      new Alfresco.FormUI("page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog–form", "page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog-").setOptions(
      {
         mode: "edit",
         enctype: "application/json",
         fields:
         [
            {
               id : "prop_metadatadev_administrativeInformation_projectPhase"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_contractID"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_OTPWBS"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_technicalTenderID"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_orderPurpose"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_projectName"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_clientName"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_businessTenderID"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_countryOfPerformance"
            }
            ,
            {
               id : "assoc_metadatadev_administrativeInformationType_ProjectManager_person"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_taisOrderID"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_directCustomer"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_entity"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_commercial"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_clientOrderRef"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_clientCountry"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_projectRef"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_projectAdministrator"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_contractType"
            }
            ,
            {
               id : "prop_metadatadev_administrativeInformation_finalClientCountry"
            }
           
         ],
         fieldConstraints:
         [
            {
               fieldId : "page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog-_prop_metadatadev_administrativeInformation_entity",
               handler : Alfresco.forms.validation.inList,
               params : {"sorted":false,"caseSensitive":true,"allowedValues":["EDM|EDM","PCL|PCL"]},
               event : "blur",
               message : null
            }
            ,
            {
               fieldId : "page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog-_prop_metadatadev_administrativeInformation_projectPhase",
               handler : Alfresco.forms.validation.inList,
               params : {"sorted":false,"caseSensitive":true,"allowedValues":["FAT|FAT","PAC|PAC","SAT|SAT"]},
               event : "blur",
               message : null
            }
            ,
            {
               fieldId : "page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog-_prop_metadatadev_administrativeInformation_clientCountry",
               handler : Alfresco.forms.validation.inList,
               params : {"sorted":false,"caseSensitive":true,"allowedValues":["FRANCE|FRANCE","GERMANY|GERMANY","IRAK|IRAK","SENEGAL|SENEGAL","SPAIN|SPAIN"]},
               event : "blur",
               message : null
            }
            ,
            {
               fieldId : "page_x002e_component-2-1_x002e_site_x007e_test00_x007e_dashboard_x0023_default-configDialog-_prop_metadatadev_administrativeInformation_finalClientCountry",
               handler : Alfresco.forms.validation.inList,
               params : {"sorted":false,"caseSensitive":true,"allowedValues":["FRANCE|FRANCE","GERMANY|GERMANY","IRAK|IRAK","SENEGAL|SENEGAL","SPAIN|SPAIN"]},
               event : "blur",
               message : null
            }
           
         ]
      }).setMessages(
         {"form.control.object-picker.items-list.search": "Saisir un terme de recherche", "form.control.date-picker.display.time.format": "HH:MM (24 Hour)", "form.control.size.label": "Taille", "form.field.incomplete": "Ce champ est obligatoire et aucune valeur n'a \u00e9t\u00e9 renseign\u00e9e.", "form.control.mimetype.label": "Type MIME", "form.field.constraint.length": "Ce champ doit comporter entre {0} et {1} caract\u00e8res.", "form.control.association.message.error": "Impossible d'effectuer la recherche", "form.control.checkbox.no": "Non", "form.control.object-picker.create-new.success": "El\u00e9ment cr\u00e9\u00e9", "form.control.object-picker.search": "Recherche", "form.control.mimetype.unknown": "Inconnu", "form.control.object-picker.current.failure": "Impossible d'afficher les valeurs actuelles.", "form.control.selectone.missing-options": "&lt;Pas d'option disponible&gt;", "form.required.fields": "Champs requis", "form.button.reset.label": "R\u00e9initialiser", "form.control.date-picker.choose": "S\u00e9lectionner une date :", "form.field.help": "Cliquer pour afficher et cacher le texte d'aide pour le champ.", "form.jsonsubmit.failed": "\u00c9chec de l'envoi des donn\u00e9es JSON", "form.control.object-picker.create-new.failure": "\u00c9chec de la cr\u00e9ation de l'\u00e9l\u00e9ment.", "form.control.association.message.instructions": "Saisir un terme de recherche", "form.control.period.type": "Point", "form.control.date-picker.entry.datetime.format.nojs": "YYYY-MM-DDThh:mm:ss.sTZD", "form.control.association.message.empty": "Pas d'\u00e9l\u00e9ment trouv\u00e9", "form.control.date-picker.entry.date.format": "d\/M\/yyyy", "form.control.date-range.to": "\u00c0", "form.control.date-range.from": "De", "form.control.range.max": "Max.", "form.notset": "Non d\u00e9fini", "form.control.object-picker.items-list.empty": "Pas d'\u00e9l\u00e9ment trouv\u00e9", "form.control.lists.item.exists": "L''\u00e9l\u00e9ment est d\u00e9ja dans la liste", "form.control.period.expression": "Expression", "form.control.association.message.searching": "Recherche…", "form.control.checkbox.yes": "Oui", "form.control.date-picker.entry.time.format": "HH:mm", "form.control.object-picker.description": "Description", "form.control.object-picker.items-list.loading": "Chargement…", "form.control.novalue": "(Aucun)", "form.field.not.editable": "Ce champ est en lecture seule car le syst\u00e8me interdit sa modification.", "form.control.encoding.unknown": "Inconnu", "form.control.object-picker.workflow.view_more_actions": "Afficher plus d'actions", "form.required.fields.marker": "*", "form.control.object-picker.remove-item": "Retirer", "form.control.upload.uploading": "T\u00e9l\u00e9versement …", "form.control.object-picker.edit.failure": "\u00c9chec de la mise \u00e0 jour.", "form.control.object-picker.add-item": "Ajouter", "form.control.date-picker.display.date.format": "JJ\/MM\/AAAA", "form.control.date-picker.view.date.format": "EEE dd MMM yyyy", "form.control.date-picker.view.time.format": "EEE dd MMM yyyy HH:mm:ss", "form.field.constraint.number": "Ce champ doit inclure un nombre.", "form.control.object-picker.create-new": "Cr\u00e9er un \u00e9l\u00e9ment", "form.control.range.min": "Min.", "form.control.object-picker.modified-on": "Modifi\u00e9 :", "form.field.ambiguous": "est ambigu, veuillez contacter votre administrateur pour enlever ce message.", "form.default.set.label": "D\u00e9faut", "form.button.cancel.label": "Annuler", "form.control.encoding.label": "Encodage", "form.control.object-picker.edit.success": "Mise \u00e0 jour de l''\u00e9l\u00e9ment", "form.control.object-picker.selected-items.empty": "Pas d'\u00e9l\u00e9ment s\u00e9lectionn\u00e9", "form.control.object-picker.header": "S\u00e9lectionner…", "form.not.present": "Aucun formulaire n'a \u00e9t\u00e9 trouv\u00e9. Un 'itemKind' et un 'itemId' ont-ils \u00e9t\u00e9 fournis ?", "form.field.constraint.minmax": "Ce champ doit inclure une valeur comprise entre {0} et {1}.", "form.control.object-picker.edit": "Mettre \u00e0 jour", "form.button.submit.label": "Soumettre", "form.control.object-picker.search.enter-more": "Saisir au moins {0} caract\u00e8re(s) \u00e0 rechercher"}
      );
   //]]></script>
</blockcode>
tonyrivet
Customer

Re: Invoquer le formulaire d'édition de propriétés d'un document depuis un dashlet

Bonjour,

La console Firebug n'affiche aucune erreur ?
La fonction doBeforeDialogShow() se termine-t-elle correctement ?
Je pense notamment à l'alias $siteURL qui ne semble pas déclaré dans votre code…