What API I can use to add milestone markers via Markers Script ?

Modified on Wed, 22 Jan at 3:47 PM

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.addPlanMarkersandmarkerFactory.addWorkItemMarkersnow have a tooltip by default;



Push a marker flag to the end of the day in Marker Script:

  • markers created via the methodsmarkerFactory.addPlanMarkersandmarkerFactory.addWorkItemMarkersare 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.addMarkerare 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:


- 'milestone' is a Page Parameter Id:
var milestoneIds =  config.pageParameters.milestone;

- 'releaseDate' is a filed Id that sets the date for your Milestone item:
marker.setDate(tp.getValue('releaseDate').getDate());

- 'productType' is a filed Id that has enum options, depending on which different color options would be set:
var productType = tp.getValue('productType');

- default color value if no further conditions match:
marker.setColor("blue");

- depending on an enum id you can write multiple conditions to set different colors to the marker. In our case below if field value has id 'typeB' -> marker color is set to fuchsia:
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

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article