Customizing beCPG

Deleting unnecessary lists

Go to "Repository > Système > Modèles d'entité > Projet".

You can delete the unnecessary data lists after clicking "View data lists".

Creating a new list

To add a new list using the model designer or an XML file, create a model inheriting from bcpg:entityListItem, with its associated forms.

In our example, we use the deliverable model.

<type name="pjt:deliverableList">
    <parent>bcpg:entityListItem</parent>
        <properties>
            <property name="pjt:dlDescription">
                <type>d:text</type>
                <mandatory>true</mandatory>
            </property>

Adding a new Gantt view

To add a new Gantt view, add a new list in "Repository > Système > Modèles d'entité > Projet".

The associated type is the Alfresco type you created. The custom view name must begin with "View-gantt-".

Every project inheriting from this model also has this new Gantt view.

The Gantt is rendered by a JavaScript function declared in "gantt-columnRenderers.js". All Gantt renderers are associated with a type. To initialize a new renderer, create a YUI event:

YAHOO.Bubbling.fire("registerGanttRenderer",  {
    typeName : "pjt:deliverableList",
      ganttInitialiser : function(callBack) {
      //TODO
    callBack.call(this);
    }
 });

The ganttInitialiser method gets the legends and creates the Gantt. An example is provided for taskList. Here is the function that displays the deliverables in the Gantt:

ganttInitialiser : function(callBack)
{
    var fnDrawGantt = function PL_onReady_fnDrawGantt()
    {
        var recordSet = this.widgets.dataTable.getRecordSet();
        if (recordSet.getLength() != 0)
        {
            g = new JSGantt.GanttChart('g', Dom.get(this.id + "-gantt"), g != null ? g.getFormat() : 'day');
            g.setDateInputFormat("shortDate");
            g.setDateDisplayFormat("shortDate");
            g.setCaptionType('Caption'); 
            g.setShowRes(0); // Hides the resources
            g.setShowDur(0); // Hides the duration
            g.setShowComp(0); // Hides the progress
            var start = new Date();
            for (var i = 0; i < recordSet.getLength(); i++)
            {
                var oRecord = recordSet.getRecord(i);
                var deliverable = oRecord.getData();
                var taskId = deliverable.nodeRef;
                var precTaskIds = "";
                var pParent = 0;
                var pGroup = 0;
                var tlIsMilestone = true;
                var tlPercent = 0;
                var start = new Date();
                var end = new Date();
                var color = "006600";
                if (oRecord.getData("color"))
                {
                    color = oRecord.getData("color").replace('#', '');
                }

                var taskOwner = null;

                g.AddTaskItem(new JSGantt.TaskItem(taskId, this.getDeliverableTitle(deliverable,
                        this.options.entityNodeRef), start, end, color, null, tlIsMilestone ? 1 : 0, taskOwner,
                        tlPercent, pGroup, pParent, 1, precTaskIds));
            }

            this.refreshView();

        }
        else
        {
            Alfresco.util.populateHTML([ this.id + "-gantt",
                    "<div class=\"yui-dt-liner\">" + this.msg("message.empty") + "</div>" ]);
        }
    };

    this.extraAfterDataGridUpdate.push(fnDrawGantt);
    this.initTaskHandlers();

    callBack.call(this);
}

And the result:

You can also change the default appearance of the task Gantt by modifying the taskList ganttInitialiser function.

Creating a multi Gantt view

Since version 1.6.6, beCPG has a datalist extractor that can return more than one list at a time. We use it to build a new multi Gantt view.

Creating a customized view

To create a customized view in beCPG, write a Share webscript in org/alfresco/components/entity-charact-views. Its name must end with "-view".

<webscript>
    <shortname>Multi Gantt View</shortname>
    <description>Multi Gantt View component</description>
    <url>/components/entity-charact-views/mtgantt-view</url>
</webscript>

You can then add the view to the project model.

The syntax to call the view is "view-{name of the view}-id". In our example of a view with several lists, we use the parent type bcpg:entityListItem. The full example is in the sources.

Calling the multiList extractor and creating the gantt

To create a multi-list Gantt view, our webscript instantiates a JavaScript YUI component defined in "mtgantt-view.js".

var mtGanttView = {
    id : "mtGanttView", 
    name : "beCPG.component.MtGanttView",
    options : {
        entityNodeRef: page.url.args.nodeRef!=null ?page.url.args.nodeRef : ""
      }
};

In this component, we connect a YUI datasource to the "becpg/entity/datalists" service.

We want to return the data of both our project lists:

• taskList (containing pjt:taskList elements)
• view-gantt-deliverable (containing pjt:deliverableList)

We use the multiList extractor with "dataListName=multiList_taskList_View-gantt-deliverable" and "itemType=bcpg:entityListItem". Full URL:

getWebscriptUrl : function MtGanttView_getWebscriptUrl() {
     return Alfresco.constants.PROXY_URI + 
"becpg/entity/datalists/data/node?itemType=bcpg:entityListItem&pageSize=" 
+ this.options.maxItems
+ "&dataListName=multiList_taskList_View-gantt-deliverable&entityNodeRef="
+ this.options.entityNodeRef;
};

Finally, specify which fields the extractor returns:

var request =
{
    fields : [ "bcpg_parentLevel","pjt_tlTaskName", "pjt_tlDuration", "pjt_tlPrevTasks", "pjt_tlState", "pjt_completionPercent", "pjt_tlStart", "pjt_tlEnd", "pjt_tlIsGroup","pjt_tlIsMilestone","pjt_tlResources",
            "pjt_tlTaskLegend|cm_name|bcpg_color", "pjt_dlDescription", "bcpg_color" ],
    page : this.currentPage,
    sort : "bcpg:sort",
    queryExecutionId : this.queryExecutionId
};

We define the "pjt:taskList" and "pjt:deliverableList" fields at the same time.

Note: you can also return association fields, in particular to get the legends associated with the tasks in a single call: pjt_tlTaskLegend|cm_name|bcpg_color.

The Gantt is then initialized with the data returned by the webscript. The full sources are provided.

Note: the client must do the sorting.

The result:

image.jpg

Adding a new button to the toolbar

You can add new buttons to the beCPG datalist toolbar. To do so, add a new YUI event in one of the view's JavaScript files. For the Gantt view, you can use the "gantt-view-toolbar.js" file. The event to trigger is called "registerToolbarButtonAction".

The event defines an evaluator that determines for which lists and where (right or left) the button is displayed. It also defines either a function that creates the widget or a function to call when the button is clicked. Here is the full-screen button example; the file provides more examples.

YAHOO.Bubbling.fire("registerToolbarButtonAction",
        {
            actionName : "full-screen",
            evaluate : function(asset, entity)
            {
                return asset.name !== null && (asset.name.indexOf("View-gantt") > -1 || asset.name === "taskList") ;
            },
            fn : function(instance)
            {

                if (Dom.hasClass("alf-hd", "hidden"))
                {
                    Dom.removeClass("alf-hd", "hidden");
                    Dom.removeClass("alf-filters", "hidden");
                    Dom.removeClass("alf-ft", "hidden");
                    Dom.removeClass("Share", "full-screen");
                    Dom.addClass("alf-content", "yui-b");

                }
                else
                {
                    Dom.addClass("alf-hd", "hidden");
                    Dom.addClass("alf-ft", "hidden");
                    Dom.addClass("Share", "full-screen");
                    Dom.addClass("alf-ft", "hidden");
                    Dom.addClass("alf-filters", "hidden");
                    Dom.removeClass("alf-content", "yui-b");
                    Dom.setStyle("alf-content", "margin-left", null);

                }

            }
        });

Associated CSS:

.datalist-toolbar .full-screen span.first-child
{
background: url(../images/fullscreen-enter.png) no-repeat 5px 4px;
}

Customizing the Gantt

When initializing the Gantt in each view, you can customize its display:

g = new JSGantt.GanttChart('g', Dom.get(this.id + "-gantt"),  'day');
                                                    g.setDateInputFormat("shortDate");
                                                    g.setDateDisplayFormat("shortDate");
                                                    g.setCaptionType('Resource');

The parameters are:

You can override the Gantt rendering by overriding one of the following functions:

 renderMile
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

 renderTask
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

renderGroup
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

// Example: colour the whole day box and show the caption inside it

g.setColWidthFactor(2); // increases the boxes size
g.renderMile =  function(...){
    return '<div id="bardiv_' + vcurrDivID + '" style="position:absolute;       top:0px; left:' + Math.ceil(vTaskLeft * (vDayWidth))  + 'px; height: 23px;  width:'+vColWidth+'px; overflow:hidden;"><div id="taskbar_' + vcurrDivID +  '" style="width:100%;height:100%;background-color:#' +                                                  vTask.getColor() + ';">'+vCaptionStr+'</div>';
 };