You may want to add release or milestone markers to your GANTT widget. To do so, you can use the Advanced > Markers Script widget parameter that allows you to add custom markers via API.
For rendering dynamic marker customization (selective display) see below.
The Markers Script is a script written in JavaScript language, and it is executed on the server, so you can leverage the Polarion Open API.
- Custom milestone markers can be added via markerFactory.addMarker()call.
- The ITrackerService is accessible via trackerService variable, so you can access various Polarion data objects (time points, plans, work items, etc...).
The following example demonstrates how to load the markers from the Polarion project timepoints:
- Open your widget configuration, expand the Advanced Parameters, and set the following snippet to the Markers Script:
var timePoints = trackerService.getTrackerProject("GANTT").getTimePoints().iterator(); while(timePoints.hasNext()){ var tp = timePoints.next(); var marker = markerFactory.addMarker(); marker.setText(tp.getName()); marker.setDate(tp.getTime().getDate()); marker.setColor("fuchsia"); var desc = tp.getDescription(); if(desc!=null){ marker.setTitle(desc.getContent()); } }
The markerFactory has following methods:
- markerFactory.addMarker(); - create and register a new marker object
- markerFactory.addMarker(String text, String title); - utility method if you do not have a date as java.util.Date but as a string.
Example: markerFactory.addMarker("test","2019-01-30")
The marker object provides the following methods:
void setText(String text) - set the text / name of the marker
- void setTitle(String tooltip) - set the tooltip of the marker
void setDate(java.util.Date date) - set the date of the marker
- void setDate(String dateStr) - set the date of the marker as String
Date format is "2019-01-30" - void setColor(String color) - set the color of the marker.
It must be one of the 16 basic html colors - https://www.w3.org/TR/REC-html40/types.html#h-6.5
----------------------------------------------------------------------------------------------------------------------
NEW! Gantt version 25.1.0
Marker tooltip:
Markers created via API
markerFactory.addPlanMarkers
andmarkerFactory.addWorkItemMarkers
now have a tooltip by default;
Push a marker flag to the end of the day in Marker Script:
markers created via the methods
markerFactory.addPlanMarkers
andmarkerFactory.addWorkItemMarkers
are always displayed at the end of the day by default, i.e. if the date is set to 2024-12-04, the marker is displayed at the end of 2024-12-04 day;markers created via the raw API
markerFactory.addMarker
are displayed at the exact date set by the API;
In this case, you can push the marker to be shown at the end of the date by adding the newly introduced property:
marker.pushByDay()
... var marker = markerFactory.addMarker(); marker.setText(tp.getName()); marker.setDate(tp.getTime().getDate()); marker.pushByDay(); ....
----------------------------------------------------------------------------------------------------------------------
For Polarion 22 R2 and older use the legacy API format as follows:
var timePoints = trackerService.getTrackerProject("GANTT").getTimePoints().iterator(); while(timePoints.hasNext()){ var tp = timePoints.next(); var marker = markerFactory.addMarker(); marker.setText(tp.name); marker.setDate(tp.time.date); marker.setColor("fuchsia"); var desc = tp.description; if(desc!=null){ marker.setTitle(desc.content); } }
Dynamic marker customization
The script below allows you to control which markers are displayed and how they are styled based on custom conditions, such as page parameters and field values.
var milestoneIds = config.pageParameters.milestone;
if(milestoneIds===null){
milestoneIds="";
}else{
milestoneIds=milestoneIds.replaceAll(',',' ');
}
var milestones = trackerService.queryWorkItems("project.id:Gantt3 AND type:milestone AND id:(" +milestoneIds +")","id").iterator();
while(milestones.hasNext()){
var tp = milestones.next();
var marker = markerFactory.addMarker();
marker.setText(tp.getTitle());
marker.setDate(tp.getValue('releaseDate').getDate());
var productType = tp.getValue('productType');
marker.setColor("blue");
if (productType!==null && productType.getId()==='typeB'){
marker.setColor("fuchsia");
}
}
How the script works:
var milestoneIds = config.pageParameters.milestone;
marker.setDate(tp.getValue('releaseDate').getDate());
var productType = tp.getValue('productType');
marker.setColor("blue");
if (productType!==null && productType.getId()==='typeB'){
marker.setColor("fuchsia");
}
If you need further assistance, feel free to reach out to support@nextedy.com
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article