Tables personnalisées dans la page des détails du workflow

Question

En plus des tables currentTasks et workflowHistory, je souhaite ajouter deux autres tables. J'ai ajouté deux blocs avec les en-têtes dans workflow-form.get.html.ftl et deux widgets dans workflow-form.js. J'ai également ajouté des étiquettes de cartographie dans le fichier .properties.

Le problème est que mes tableaux sont toujours affichés en bas de la page et ils ont sans en-tête:

J'ai aussi remarqué que le bloc de la table d'historique (et la table en cours, aussi) a un ID, quelque chose comme:

page_x002e_data-form_x002e_workflow-details_x0023_default-workflowHistory-form-section 

Mes tables n'ont pas cet ID. Ils sont simplement placés dans des conteneurs comme ceci:

<div class="form-element-background-color yui-dt"> 

Une partie de mon workflow-form.get.html.ftl:

... 

<#-- I added this div for additional table --> 
<div id="${el}-finishedBpAttachmentsDetails-form-section" class="workflow-attachments-details"> 
    <h3>${msg("header.finishedBpAttachmentsDetails")}</h3> 
    <div class="form-element-background-color"></div> 
</div> 

<#-- And also this div --> 
<div id="${el}-finishedBpDetails-form-section" class="workflow-details"> 
    <h3>${msg("header.finishedBpDetails")}</h3> 
    <div class="form-element-background-color"></div> 
</div> 

<#-- Will be inserted below "Items" in the form after its been loaded through ajax --> 
<div id="${el}-currentTasks-form-section" class="current-tasks"> 
    <a name="current-tasks"></a> 
    <h3>${msg("header.currentTasks")}</h3> 
    <div class="form-element-background-color"></div> 
</div> 

<#-- Will be inserted in the bottom of the form after its been loaded through ajax --> 
<div id="${el}-workflowHistory-form-section" class="workflow-history"> 
    <h3>${msg("header.history")}</h3> 
    <div class="form-element-background-color"></div> 
</div> 

... 

Une partie de mon workflow-form.js:

... 

var finishedBpDetailsDS = new YAHOO.util.DataSource(dsRes, 
{ 
    responseType: YAHOO.util.DataSource.TYPE_JSARRAY 
}); 

var finishedBpDetailsContainerEl = Dom.get(this.id + "-finishedBpDetails-form-section"), 
finishedBpDetailsTasksEl = Selector.query("div", finishedBpDetailsContainerEl, true); 

var finishedBpDetailsColumnDefinitions = [ 
    ... 
]; 

this.widgets.finishedBpDetailsTasksDataTable = new YAHOO.widget.DataTable(finishedBpDetailsTasksEl, 
     finishedBpDetailsColumnDefinitions, finishedBpDetailsDS, 
{ 
    MSG_EMPTY: this.msg("label.noTasks") 
}); 


var finishedBpAttachmentsDetailsColumnDefinitions = [ 
    ... 
];      

var finishedBpAttachmentsDetailsDS = new YAHOO.util.DataSource(this.dsAttachmentRes, 
{ 
    responseType: YAHOO.util.DataSource.TYPE_JSARRAY 
}); 

var finishedBpAttachmentsDetailsContainerEl = Dom.get(this.id + "-finishedBpAttachmentsDetails-form-section"), 
finishedBpAttachmentsDetailsTasksEl = Selector.query("div", finishedBpAttachmentsDetailsContainerEl, true); 

this.widgets.finishedBpAttachmentsDetailsTasksDataTable = new YAHOO.widget.DataTable(finishedBpAttachmentsDetailsTasksEl, 
     finishedBpAttachmentsDetailsColumnDefinitions, finishedBpAttachmentsDetailsDS, 
{ 
    MSG_EMPTY: this.msg("label.noTasks") 
});      

Selector.query(".form-fields", this.id, true).appendChild(finishedBpAttachmentsDetailsTasksEl); 
Selector.query(".form-fields", this.id, true).appendChild(finishedBpDetailsTasksEl); 

... 

Comment puis-je régler la position et les en-têtes pour mon tables? .. Par exemple, je voudrais afficher mes tables après le bloc avec des informations générales.

Est-il possible? ..

Je serais très reconnaissant pour l'information. Merci à tous.

Answer 1

Vous devez insérer la table dans la div pour afficher la table dans la section supérieure.

<div id="${el}-summary-form-section"> 
      <h3> 
       ${msg("header.workflowSummary")} 
      </h3>... 

.... 

... 

<div class="yui-gf"> 
        <div class="yui-u first avatar"> 
         <img id="${el}-recentTaskOwnersAvatar" src="" alt="${msg("label.avatar")}"> 
        </div> 
        <div class="yui-u"> 
         <div id="${el}-recentTaskOwnersCommentLink"></div> 
         <div id="${el}-recentTaskOwnersComment" class="task-comment form-element-border"></div> 
        </div> 
        </div> 
       </div> 
       <div class="clear"></div> 
      </div> 

<!-- this is my custom table and display in the screen at the top. --> 
      <div id="${el}-addl-summary-form-section" style="display:block" > 
      <table> 
       <tr><td>Name</td></tr> 
       <tr><td>Murali</td></tr> 
       </table> 
     </div> 
     </div> 

espère que cela vous aide.

Answer 2

Une autre façon - est d'utiliser les techniques de script YUI:

... 

/** 
* Called when a workflow form has been loaded. 
* Will insert the form in the Dom. 
* 
* @method onWorkflowFormLoaded 
* @param response {Object} 
*/ 
onWorkflowFormLoaded: function WorkflowForm_onWorkflowFormLoaded(response) 
{ 
    ... 
    var finishedBpDetailsContainerEl = Dom.get(this.id + "-finishedBpDetails-form-section"), 
     finishedBpDetailsEl = Selector.query("div", finishedBpDetailsContainerEl, true);   

    var finishedBpDetailsDS = new YAHOO.util.DataSource(this.finishedBpDetailsData, 
    { 
     responseType: YAHOO.util.DataSource.TYPE_JSARRAY 
    }); 

    var showUserThumbnail = function (elLiner, oRecord, oColumn, oData) { 
     elLiner.innerHTML = '<img src="/share/res/components/images/filetypes/generic-user-32.png" title="' 
      + oRecord.getData('resolutionFio') + '" />'; 
    }; 

    YAHOO.widget.DataTable.Formatter.showUserThumbnail = showUserThumbnail; 

    var finishedBpDetailsColumnDefinitions = [ 
     {key: "userImg", label: "", formatter: showUserThumbnail},             
     { key: "resolutionPosition", label: "...", sortable: true}, 
     { key: "resolutionFio", label: "...", sortable: true}, 
     { key: "resolutionAddress", label: "...", sortable: true}, 
     { key: "resolutionPhone", label: "...", sortable: true}, 
     { key: "resolutionEmail", label: "...", formatter: 'email', sortable: true}, 
     { key: "resolution", label: "...", sortable: true}, 
     { key: "resolutionDate", label: "...", sortable: true}, 
     { key: "resolutionComment", label: "...", sortable: true} 
    ];   

    this.widgets.finishedBpDetailsDataTable = new YAHOO.widget.DataTable(finishedBpDetailsEl, 
      finishedBpDetailsColumnDefinitions, finishedBpDetailsDS, 
    { 
     MSG_EMPTY: this.msg("label.noTasks") 
    }); 

    this.widgets.finishedBpDetailsDataTable.subscribe("rowMouseoverEvent", 
     this.widgets.finishedBpDetailsDataTable.onEventHighlightRow); 
    this.widgets.finishedBpDetailsDataTable.subscribe("rowMouseoutEvent", 
     this.widgets.finishedBpDetailsDataTable.onEventUnhighlightRow); 

    var finishedBpAttachmentsDetailsContainerEl = Dom.get(workflowFormReference.id + "-finishedBpAttachmentsDetails-form-section"), 
     finishedBpAttachmentsDetailsEl = Selector.query("div", finishedBpAttachmentsDetailsContainerEl, true); 

    var finishedBpAttachmentsDetailsDS = new YAHOO.util.DataSource(this.finishedBpAttachmentsDetailsData, 
    { 
     responseType: YAHOO.util.DataSource.TYPE_JSARRAY 
    }); 

    var showDocumentThumbnail = function (elLiner, oRecord, oColumn, oData) { 
     elLiner.innerHTML = '<img src="/share/res/components/images/filetypes/generic-file-32.png" title="' + 
      oRecord.getData('contractFileName') + '" />'; 
    }; 

    YAHOO.widget.DataTable.Formatter.showDocumentThumbnail = showDocumentThumbnail; 

    var finishedBpAttachmentsDetailsColumnDefinitions = [ 
     {key: "contractImg", label: "", formatter: showDocumentThumbnail},                
     {key: "contractFileName", label: "...", sortable: true}, 
     {key: "contractNumber", label: "...", sortable: true}, 
     {key: "contractTitle", label: "...", sortable: true}, 
     {key: "contractPrescription", label: "...", sortable: true}, 
     {key: "contractDate", label: "...", sortable: true}, 
     {key: "contractContractor", label: "...", sortable: true}, 
     {key: "contractPurpose", label: "...", sortable: true}, 
     {key: "contractCoast", label: "...", sortable: true}, 
     {key: "contractPeriodValidity", label: "...", sortable: true}, 
     {key: "contractAdditionalAgreements", label: "...", sortable: true}, 
     {key: "contractDataStart", label: "...", sortable: true}, 
     {key: "contractDataEnd", label: "...", sortable: true}, 
     {key: "contractIssuanceMark", label: "...", sortable: true}, 
     {key: "contractExecution", label: "...", sortable: true}, 
     {key: "contractComment", label: "...", sortable: true}, 
     {key: "contractAdditionalNumber", label: "...", sortable: true}, 
     {key: "contractService", label: "...", sortable: true}, 
     {key: "contractView", label: "...", sortable: true} 
    ]; 

    this.widgets.finishedBpAttachmentsDetailsDataTable = new YAHOO.widget.DataTable(finishedBpAttachmentsDetailsEl, 
     finishedBpAttachmentsDetailsColumnDefinitions, finishedBpAttachmentsDetailsDS, 
    { 
     MSG_EMPTY: this.msg("label.noTasks") 
    });   

    this.widgets.finishedBpAttachmentsDetailsDataTable.subscribe("rowMouseoverEvent", 
     this.widgets.finishedBpAttachmentsDetailsDataTable.onEventHighlightRow); 
    this.widgets.finishedBpAttachmentsDetailsDataTable.subscribe("rowMouseoutEvent", 
     this.widgets.finishedBpAttachmentsDetailsDataTable.onEventUnhighlightRow); 

    YAHOO.Bubbling.fire("workflowFormReady", this); 
    ... 
}, 

...