Customizing beCPG¶
Deleting unnecessary lists¶
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 a xml file, you have to create a model inheriting from bcpg:entityListItem and its associated forms.
In our example we will 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¶
Adding a new gantt view is achieved by adding 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 has to begin with « View-gantt- ».
Every project inheriting from this model will also have this new gantt view.
The gantt is rendered by a JavaScript function declared in « gantt-columnRenderers.js ».
All gantt renderers are associated to a type. To initialize a new renderer, you have to 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 for the deliverables dispay in 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 tasks gantt's visual by modifying tasklist's ganttInitialiser function.
Creating a multi gantt view¶
Since the 1.6.6 version, beCPG has a new datalist extractor that can return more than one list at a time. This is what we will use to achieve a new multi gantt view.
Creating a customized view¶
To create a customized view in beCPG, you have to 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¶
In order to create a multi list gantt view, we instanciate in our webscript 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 service « becpg/entity/datalists ».
We want to return the data contained in both our project lists :
- taskList (containing pjt:taskList elements)
- view-gantt-deliverable (containing pjt:deliverableList)
We use the multiList extractor « 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, it is necessary to precise which fields are returned by the extractor :
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 « pjt:taskList » and « pjt:deliverableList » fields at the same time.
Note : it is possible to return the association fields, in particular to get the legends associated to the tasks with only one call : pjt_tlTaskLegend|cm_name|bcpg_color.
The gantt initialization is then done using the data returned by the webscript. Le full sources are provided.
Note : the sorting has to be done by the client.
The result :
image.jpg
Adding a new button to the toolbar¶
It's possible to easily add new buttons to the beCPG datalists toolbar.
You have to add a new YUI event in one of the view's JavaScripts. For the gantt view, you can use the file « gantt-view-toolbar.js ». The event to trigger is called « registerToolbarButtonAction ».Then, there is an evaluator that determines for which lists and where (right or left) the button is displayed and finally a function that create the widget or a function to call when the button is clicked. Here is the full-screen button example, there are more provided in the file.
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, it is possible to customize its display :
g = new JSGantt.GanttChart('g', Dom.get(this.id + "-gantt"), 'day');
g.setDateInputFormat("shortDate");
g.setDateDisplayFormat("shortDate");
g.setCaptionType('Resource');
Description of the parameters
g.setFormatArr("day","week","month") | Shows only day, week and month |
g.setShowRes(0) | Hides the resource column |
g.setShowDur(0) | Hides the duration column |
g.setShowSelect(0) | Hides the checkboxes |
g.setShowComp(0) | Hides the progress date column |
g.setShowStartDate(0) | Hides the beginning date column |
g.setShowEndDate(0) | Hides the end date column |
g.setCaptionType(Caption/Resource/Duration/Complete) | Defines the message type next to a task : - Caption – customized message defined when adding a task (pCaption) - Resource – name of the resource associated to the task - Duration – duration of the task - Complete - % of progress |
g.setColWidthFactor(1.1) | Increases column size |
You can overload the rendering of the gantt by overloading one of the following models :
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 to color all the day box and to have the caption in the box :
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>';
};