Edition « insitu » de la description des documents

Alfresco 4.0 est arrivé avec un lot de nouvelles fonctionnalités bien pratiques pour les utilisateurs. On compte parmi elles l’édition in-situ des métadonnées.
Ce billet a pour objectif de présenter ce principe et d’illustrer quelques améliorations possibles.

L’édition in-situ, qu’est ce que c’est ?

L’édition in-situ est la possibilité offerte à un utilisateur de modifier la valeur de certaines méta données, directement depuis la liste des nœuds, sans avoir à ouvrir la fiche de propriétés. Illustration !
L’état de démarrage est celui-ci : dans un espace, les différents nœuds sont listés.

Rien de particulier jusque là


Après avoir positionné le curseur de la souris sur le titre du document (par exemple), un stylo apparaît sur la gauche après quelques instants :

Un crayon est affiché sur la gauche de la méta donnée


Un clique sur ce stylo transforme le titre du dossier en zone éditable :

L'édition du nom du dossier est possible sans ouvrir la page de propriétés


On peut alors saisir le nouveau titre et valider le changement avec le bouton Enregistrer.

Comment faire mieux que ce qui existe déjà ?

Ce principe d’utilisation particulièrement simple et l’intérêt pour les utilisateurs est indéniable. Toutefois, certains manques existent et sont plutôt surprenants :

  • l’édition in-situ est disponible pour le titre et les tags, mais elle est étrangement absente pour la description
  • sur Firefox, l’icône « stylo » est présente à gauche du titre, mais à droite des tags.

Le stylo n'est pas toujours à la même place


Il ne nous reste plus qu’à combler ces lacunes !

Rendre un champ éditable en ligne

L’analyse du fichier documentlist.js permet d’étudier le paramétrage qui est fait pour les tags : dans l’appel à registerRenderer, qui a pour objectif de mettre en forme les tags, on constate l’appel suivant :
// Add the tags insitu editor
this.insituEditors.push(
{
  context: id,
  params:
  {
    type: "tagEditor",
    nodeRef: jsNode.nodeRef.toString(),
    name: "prop_cm_taggable",
    value: record.node.properties["cm:taggable"],
    validations: [
    {
      type: Alfresco.forms.validation.nodeName,
      when: "keyup",
      message: this.msg("validation-hint.nodeName")
    }
    ],
    title: this.msg("tip.insitu-tag"),
    errorMessage: this.msg("message.insitu-edit.tag.failure")
  },
  callback:
  {
    fn: this._insituCallback,
    scope: this,
    obj: record
  }
});

Les éléments essentiels sont :

  • value: record.node.properties["cm:taggable"] : définition de la propriété à modifier lors de l’enregistrement
  • validations: : méthodes de validation du texte saisi à utiliser
  • title: this.msg(« tip.insitu-tag ») : définition du « tooltip » lors du survol du stylo

Pour ajouter l’édition en ligne à la méta donnée « description », il va suffire d’ajouter la définition d’un « insituEditor » lié aux descriptions.
La méthode la plus immédiate pour cela est de modifier directement le fichier documentlist.js, mais c’est également la moins maintenable.

La solution que j’ai choisi est de définir mon propre composant Amexio.CustomDocumentList qui étend le composant standard Alfresco.DocumentList. Mon composant personnel va se contenter de surcharger la définition de la « description » pour lui ajouter l’édition en ligne.
Extrait du fichier JavaScript de définition du composant :
/**
* Augment prototype, ensuring overwrite is enabled
*/
YAHOO.lang.augmentObject(Amexio.CustomDocumentList.prototype,
{
  onReady: function DL__onReady()
  {
    Amexio.CustomDocumentList.superclass.onReady.call(this);
    // Set-up custom metadata renderers
    this._setupCustomMetadataRenderers();
  },

  /**
  * Defines our own renderers
  */
  _setupCustomMetadataRenderers: function DL__setupCustomMetadataRenderers()
  {
    this.registerRenderer("description", function(record, label)
    {
      var jsNode = record.jsNode,
      properties = jsNode.properties,
      id = Alfresco.util.generateDomId(),
      html = '' + label + this.msg("details.description.none") + '';
      // Description non-blank?
      if (properties.description && properties.description !== "")
      {
        html = '' + label + $links($html(properties.description)) + '';
      }

      // AJOUT DE L'EDITION EN LIGNE
      if (jsNode.hasPermission("Write") && !jsNode.isLocked)
      {
        // Add the description insitu editor
        this.insituEditors.push(
        {
          context: id,
          params:
          {
            type: "textBox",
            nodeRef: jsNode.nodeRef.toString(),
            name: "prop_cm_description",
            value: record.node.properties["cm:description"],
            validations: [],
            title: this.msg("tip.insitu-description"),
            errorMessage: this.msg("message.insitu-edit.description.failure")
          },
          callback:
          {
            fn: this._insituCallback,
            scope: this,
            obj: record
          }
        });
      }
      return html;
    });
  }
}, true);

Pour faire appel à cette classe, il va être nécessaire de redéfinir le webscript qui appel normalement la classe Alfresco.DocumentList que nous venons de dériver. Ce webscript est documentlist.get (/components/documentlibrary/documentlist) et le plus simple est de le dupliquer avant de modifier le .head pour charger notre JavaScript et le .html pour faire usage de Amexio.CustomDocumentList.

Une fois ces modifications réalisées, le résultat est visible dès le survol de la description :

Le champ "Description" peut maintenant être éditer en ligne

Uniformiser le positionnement du stylo

Pour identifier le problème, j’ai utilisé Firebug qui m’a permis d’identifier que le problème lié à l’utilisation de l’attribut « float: left ». En le modifiant pour « float: none », l’affichae est correct aussi bien dans Firefox que Chrome.
Le css que j’ai utilisé est extrêmement simple :
.doclist .documents .detail span.item, .doclist .documents .detail span.tag {
  float: none;
}

Place au packaging

Maintenant que tout le code est prêt, il ne reste plus qu’à en faire un composant pour Share.
<extension>
  <modules>
    <module>
      <id>Description Insitu Extension</id>
      <auto-deploy>true</auto-deploy>
      <components>
        <component>
          <region-id>documentlist</region-id>
          <source-id>documentlibrary</source-id>
          <scope>template</scope>
          <sub-components>
            <sub-component id="default">
              <url>/fr/amexio/documentlirary/custom-documentlist</url>
              <properties>
                <pagination>true</pagination>
              </properties>
            </sub-component>
          </sub-components>
        </component>
      </components>
    </module>
  </modules>
</extension>

Le tout est disponible dans le jar ci-joint : description-insitu-share-module

Cette entrée a été publiée dans Alfresco, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Protected by WP Anti Spam