Tableau de données dans un formulaire

dranakan · ‎21 Nov 2011

Hello,

Je cherche à pouvoir afficher un tableau dans un formulaire. Ce tableau pourra être rempli de valeurs. Ceci sera utilisé dans un Workflow.
J'aimerais avoir un tableau sous cette forme : plusieurs colonne, l'utilisateur peut ajouter des lignes :

Workflow X
…
| Data1 | Data2 |
———————
|  val1 | val2 |
|  val3 | val4 |
|  …  |  … |
…
[NEXT]‍‍‍‍‍‍‍‍‍

Mon idée est de stocker les valeurs en type d:any. Avez-vous un exemple qui ressemble à ceci ?

Même question sur le forum en : https://forums.alfresco.com/en/viewtopic.php?f=34&t=41854

Merci bien.

(Alf 4.0b)

dranakan · ‎1 Dec 2011

Il existe un exemple qui ressemble à ce que je désire faire : http://code.google.com/p/alfresco-share-datatable-property-type/

[img]http://alfresco-share-datatable-property-type.googlecode.com/files/dtp-view.png[/img]

C'est un tableau qui est affiché pour une propriété d'un type. J'ai mis en place et tout fonctionne à merveille.

J'ai voulu le réutiliser dans mon workflow… mais cela pose problème :-(
Il semble que le js ne réagit pas du tout de la même manière s'il est appelé comme propriété d'un type (fonctionne) ou champs dans un workflow (ne fonctionne pas).

Appel du ftl (avec js) qui affiche le tableau (share-config-custom.xml)

<config evaluator="string-compare" condition="activiti$Simple">
      <forms>
         <form>
            <field-visibility>
…
               <show id="sgfwf:libelle4" />
               <show id="bpm:assignee" />
               <show id="packageItems" />
               <!–  <show id="bpm:sendEMailNotifications" /> –>
            </field-visibility>
            <appearance>
               <set id="" appearance="title" label-id="workflow.set.general" />
               <set id="info" appearance="" template="/org/alfresco/components/form/2-column-set.ftl" />
               <set id="assignee" appearance="title" label-id="workflow.set.assignee" />
               <set id="items" appearance="title" label-id="workflow.set.items" />
               <set id="other" appearance="title" template="/org/alfresco/components/form/table-5-column-set.ftl" label-id="workflow.set.other" />

               <field id="bpm:workflowDescription" label-id="workflow.field.message">
                  <control template="/org/alfresco/components/form/controls/textarea.ftl">
                     <control-param name="style">width: 25%</control-param>
                  </control>
               </field>
                <field id="sgfwf:libelle4">
                <control template="/org/alfresco/components/form/controls/datatable-property.ftl">
                        <control-param name="config">
                                                id, ID, number;
                                                name, Item, text;
                                                quantity, Quantity, number;
                                                price, Price, currency;
                                                paid, Was paid, radio, ["Yes", "No"];
                                                features, Features, checkbox, ["JPEG", "MPEG", "MOV"];
                                                color, Color, dropdown, ["Black", "White", "Blue"];
                                                date, Date, date;
                                </control-param>
                        <control-param name="debug">true</control-param>
                  </control>
               </field>
               …‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Code


<#–
   Title  : Datatable property type for Alfresco Share
   Author : Matija Svoren, msvoren@gmail.com
   Version: 1.0
–>

<link rel="stylesheet" type="text/css" href="${url.context}/yui/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="${url.context}/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script>
<#–script type="text/javascript" src="${url.context}/yui/datatable/datatable-min.js"></script–>

<style>
.delButton {
   font-size:14px; font-wight:strong; color:red;
   width: 16px;  height: 16px; cursor: pointer;
}
.addButton {
   font-size:14px; font-wight:strong; color:blue; padding: 7px;
   cursor: pointer;
}
</style>

<#if field.control.params.config?exists><#assign dtConfig = field.control.params.config><#else><#assign dtConfig = "false"></#if>
<#if field.control.params.debug?exists> <#assign debug = field.control.params.debug><#else>    <#assign debug = "false">   </#if>

<#if field??>
   <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
   <textarea id="${fieldHtmlId}" name="${field.name}"  rows="5" cols="250" 
      <#if field.control.params.styleClass?exists>class="${field.control.params.styleClass}"</#if>
      <#if debug == "false">style="visibility:hidden; height:0px;"<#else>type="text"</#if>
    >${field.value}
   </textarea>
   <div id="dtContainer">
      <div class="yui-skin-sam" id="dtp-dt"></div>
   </div>
</#if>


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

window.onload = function(e) { DTP.init("${fieldHtmlId}", "${dtConfig?html}", "${form.mode}", "${field.label?html}"); };

if (typeof(DTP) == "undefined") { var DTP = {}; }

DTP = {
   jsonProp : null,
   columnDefinitions : new Array(),
   readOnly : false,
   label : "Datatable property",

   init: function(fieldHtmlId, config, view, label){
      this.dtConfig = config;
      this.label = label;
      if ( view == "view") { this.readOnly = true; }
      this.jsonProp = YAHOO.util.Dom.get(fieldHtmlId);
      DTP.drawDatatable(YAHOO.lang.trim(this.jsonProp.value));
   },

   /*
      generates datatable using JSON string from text field
   */
   drawDatatable: function(jsonString){
      if (!jsonString || jsonString == "") jsonString = "{}";
      var jsonData = eval ("(" + jsonString + ")");

      DTP.getTableDefinition();

      /* datatable columns are retreived based on table definition */
      var getMyKeys = function() {
         var columnsList = [];
         for each(c in DTP.columnDefinitions) {
            if (c.type == "date") columnsList.push({key : c.key, parser: "date"});
            else  columnsList.push(c.key); } return columnsList; 
      }

      var jsonSource = new YAHOO.util.DataSource(jsonData);
      jsonSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      jsonSource.responseSchema = { fields: getMyKeys() };

      this.dtpDatatable = new YAHOO.widget.DataTable("dtp-dt", DTP.columnDefinitions, jsonSource);

      DTP.datatableEvents();
   },

   /*
      adds events to datatable, add row, remove row, highlight, open edit cell…
   */
   datatableEvents: function(){ 

      if (!DTP.readOnly) {
         /* create "add" button */
         //get last th cell, and attach 'add' event
         var lastCellNo = DTP.dtpDatatable.getTheadEl().rows[0].cells.length-1;
         this.newRowButton = DTP.dtpDatatable.getTheadEl().rows[0].cells[lastCellNo];
         var addButton = document.createElement('span');
         addButton.innerHTML  = '+';
         addButton.title = 'Add new row';
         addButton.className = "addButton";
         YAHOO.util.Event.addListener(addButton,'click',function(e){
            var rowData = { delete: "-" };
            var record = YAHOO.widget.DataTable._cloneObject(rowData);
            DTP.dtpDatatable.addRow(record);
         });
         this.newRowButton.appendChild(addButton);
         /* add "-" to each delete column */
              for each(e in YAHOO.util.Dom.getElementsByClassName('delButton', 'td')) e.innerHTML = "<div class='yui-dt-liner'>-</div>";
      }

      this.highlightEditableCell = function(oArgs) { var elCell = oArgs.target;
         if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { this.highlightCell(elCell); } 
      };

      DTP.dtpDatatable.subscribe("cellMouseoverEvent", this.highlightEditableCell);
      DTP.dtpDatatable.subscribe("cellMouseoutEvent", DTP.dtpDatatable.onEventUnhighlightCell);

      /* save, update json string after save event */
      DTP.dtpDatatable.subscribe("editorSaveEvent", function(oArgs) { DTP.dtToJson(); });

      /* delete row event, or, by default, open cell to edit */
      DTP.dtpDatatable.subscribe('cellClickEvent',function(oArgs) {
         var target = oArgs.target;
         var column = DTP.dtpDatatable.getColumn(target);
         if (column.key == 'delete') DTP.handleConfirm(target);
         else DTP.dtpDatatable.onEventShowCellEditor(oArgs);
      });

      /* if in read mode, popup datatable on click */
      if (DTP.readOnly) { 
         DTP.dtpDatatable.subscribe('cellClickEvent', function(){ DTP.popupDT(); } );
         DTP.tooltip = new YAHOO.widget.Tooltip("dtp-tooltip", { context:"dtp-dt", text:"Click on datagrid to popup!" });
      }
   },

   /*
      confirm dialog when deleting row
   */
   handleConfirm: function(toDelete){

      var handleYes = function(){
         this.hide(); DTP.dtpDatatable.deleteRow(toDelete); DTP.dtToJson(); return true;
      };
      var handleNo = function(){
         this.hide(); return false;
      };

      var confirmDialog = new YAHOO.widget.SimpleDialog('DTPconfirmDialog',{
            width: '300px',
            fixedcenter: true,
            visible: false,
            draggable: false,
            close: true,
            text: "Are you sure you want to delete this row?",
            constraintoviewport: true,
            buttons: [{text:'Yes',handler:handleYes, isDefault:true },{text:'No',handler:handleNo}]
      });

      confirmDialog.setHeader('Delete row');
      confirmDialog.render(document.body);
      confirmDialog.show();
      
   },

   /*
      brings datatable in popup dialog
   */
   popupDT: function(){

      var handleClose = function(){
         YAHOO.util.Dom.get("dtContainer").appendChild(YAHOO.util.Dom.get("dtp-dt"));
         DTP.dtpDatatable.subscribe('cellClickEvent', function(){ DTP.popupDT(); } );
         this.hide(); 
         return true;
      };

      var confirmDialog = new YAHOO.widget.SimpleDialog('dtDialog',{
            fixedcenter: true,
            visible: false,
            draggable: true,
            close: false,
            constraintoviewport: true,
            modal:true,
            buttons: [{text:'Close',handler:handleClose, isDefault:true }]
      });

      DTP.dtpDatatable.unsubscribe('cellClickEvent');
      confirmDialog.setHeader(DTP.label);
      confirmDialog.setBody(YAHOO.util.Dom.get("dtp-dt"));
      confirmDialog.render(document.body);
      confirmDialog.show();
      
   },

   /*
      gets table definition from what was provided in XML configuration. Parses parameter string to get definition.
      Sets-up formattters and editors according to column definition.
   */
   getTableDefinition: function(){    

      var getFormatter = function(t){
         switch(t){
            case "currency"   : return YAHOO.widget.DataTable.formatCurrency; break;
            case "number"   : return YAHOO.widget.DataTable.formatNumber;    break;
            case "date"   : return YAHOO.widget.DataTable.formatDate;    break;
            default    : return YAHOO.widget.DataTable.formatText;    break;
         }
         return t;
      };

      var getEditor = function(t, options){
         if (DTP.readOnly == true) return null; 
         switch(t){
            case "currency"   : return new YAHOO.widget.TextboxCellEditor();    break;
            case "number"   : return new YAHOO.widget.TextboxCellEditor();    break;
            case "date"   : return new YAHOO.widget.DateCellEditor();     break;
            case "radio"   : return new YAHOO.widget.RadioCellEditor({radioOptions: options ,disableBtns : true}); break;
            case "checkbox"   : return new YAHOO.widget.CheckboxCellEditor({checkboxOptions: options}); break;
            case "dropdown"   : return new YAHOO.widget.DropdownCellEditor({multiple: false, dropdownOptions: options}); break;
            default    : return new YAHOO.widget.TextboxCellEditor();    break;
         }
      }

      DTP.dtConfig = DTPtrim(DTP.dtConfig, ["&quot;"]); /* handles quotes if there's any */

      definition = DTP.dtConfig.split(";")

      for (var e = 0; e < definition.length; e++)
      {
         var columns = definition[e].split(",");
         if (columns && columns.length == 3) definition[e] = [ DTPtrim(columns[0]), DTPtrim(columns[1]), DTPtrim(columns[2]), null ];
         else if (columns && columns.length > 3){
            var l = [];
            for (i = 3; i < columns.length; i++) l.push(DTPtrim(columns[i], ["'", "[", "]"]));
            definition[e] = [ DTPtrim(columns[0]), DTPtrim(columns[1]), DTPtrim(columns[2]), l ];
         }
         else { // alert("Wrong datatable definition!" + (columns[0] ? " (at column)" + columns[0] : "" )); 
         }
      }

      function DTPtrim(s, toRemove){ for each (t in toRemove) while (s.indexOf(t) != -1) { s = s.replace(t,""); } return YAHOO.lang.trim(s); }

      for each (c in definition)
        if (c[0] && c[0] != "") this.columnDefinitions.push({
         "key" : c[0], "label" : c[1], "type" : c[2], formatter: getFormatter(c[2]), sortable: true, resizable: true, editor: getEditor(c[2], c[3])
        });

      if (!this.readOnly) this.columnDefinitions.push({key:"delete", label:" ", className:"delButton"});
   },

   /*
      Gets datatable values in object, then converts object to JSON string
   */
   dtToJson: function(){ 
      var records = DTP.dtpDatatable.getRecordSet().getRecords();
      var str = new Array();
      for (var i=0; i < records.length; i++) {
         var o = new Object();
         var keys = DTP.dtpDatatable.getColumnSet().keys;
         for (var j=0; j < keys.length; j++) o[keys[j].getKey()] = records[i].getData(keys[j].getKey());
         str.push(o);
      }
      DTP.jsonProp.value = YAHOO.lang.JSON.stringify(str);
   }
};
//]]></script>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Extrait du code qui pose problème dans mon js


<link rel="stylesheet" type="text/css" href="${url.context}/yui/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="${url.context}/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script>
<#–script type="text/javascript" src="${url.context}/yui/datatable/datatable-min.js"></script–>

<style>
.delButton {
        font-size:14px; font-wight:strong; color:red;
        width: 16px;  height: 16px; cursor: pointer;
}
.addButton {
        font-size:14px; font-wight:strong; color:blue; padding: 7px;
        cursor: pointer;
}
</style>

<#if field.control.params.config?exists><#assign dtConfig = field.control.params.config><#else><#assign dtConfig = "false"></#if>
<#if field.control.params.debug?exists> <#assign debug = field.control.params.debug><#else>    <#assign debug = "false">   </#if>

<#if field??>
        <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
        <textarea id="${fieldHtmlId}" name="${field.name}"  rows="5" cols="250"
                <#if field.control.params.styleClass?exists>class="${field.control.params.styleClass}"</#if>
                <#if debug == "false">style="visibility:hidden; height:0px;"<#else>type="text"</#if>
         >${field.value}
        </textarea>
        <div id="dtContainer">
                <div class="yui-skin-sam" id="dtp-dt"></div>
        </div>
</#if>

<script type="text/javascript">//<![CDATA[
window.onload = alert("jsonProp hors method : "+YAHOO.util.Dom.get("${fieldHtmlId}"));
//]]></script>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

le YAHOO.util.Dom.get("${fieldHtmlId}") me retourne toujours null… le ${fieldHtmlId} a pourtant une valeur.

Une idée ?

imadbougataya · ‎18 Feb 2013

J'ai essayé de faire fonctionner ce composant avec une workflow form mais sans succès. ca s'affiche bien lorsqu'on visualise ou edite les proprietes d'un contenu, mais rien dans le start-workflow form.

Est-ce que tu as reussi a avoir une table dans un start-workflow? merci,