AnsweredAssumed Answered

Custom tables in the workflow details page

Question asked by Aleksey Bykov on Apr 7, 2017
Latest reply on Apr 7, 2017 by Aleksey Bykov

In addition to the currentTasks and workflowHistory tables I want to add two another tables. I added two blocks with the headers in workflow-form.get.html.ftl and two widgets in workflow-form.js. Also I added labels mapping in .properties file.

 

The problem is that my tables is always displayed at the bottom of the page and they have no headers:

 

 

I also noticed that the block of the history table (and the current table, too) has an ID, something like:

 

page_x002e_data-form_x002e_workflow-details_x0023_default-workflowHistory-form-section

 

My tables do not have such ID. They are simply placed in containers like this:

 

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

 

Part of my 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>

...

 

Part of my 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);

...

 

How can I set the position and headers for my tables?.. For example, I'd like to display my tables after the block with general information. Is it possible?..

 

I would be very grateful for the information. Thanks to all.

Outcomes