Search code examples
javascriptalfrescofreemarkeryuialfresco-share

Custom tables in the workflow details page

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:

enter image description here

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?

Solution

  • You should insert the table in the div to display the table in the top section.

    enter image description here

    <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>

    Hope this helps you.