Customise the content of the card

Modified on Thu, 21 Mar at 3:02 PM

You can customise the content of the card via scripting.

change colors
add fields
...

For example here we have a two lines with item properties, and different color based on package type.

You can adjust this in Advanced Properties section of the widget:

We increased the size of the card by "card height" to 70px - this gives us one additional line, and we have also increased a min width of the column to 180px.

Now we can use the item script to set what is visible under the work item title using "cli.fieldsLine".

We can also set the color using "cli.cardColor":

var crType = wi.getValue("crType");
var wiFields = workitem.fields();
if(crType!=null  && crType.getId()==="parentCR"){
   cli.fieldsLine= "<span class='polarion-no-style-cleanup'>" 
    + wiFields.get("swagEstimate").render().htmlFor().forFrame()  
    + ", "
    + wiFields.priority().render().withText(true).withIcon(false).htmlFor().forFrame() 
    + ", "
    + wiFields.status().render().withText(false).htmlFor().forFrame() 
    + "</span><br><span class='polarion-no-style-cleanup'>" 
    + wiFields.assignee().render().htmlFor().forFrame() 
    + " [" 
    + wiFields.get("vendorTeam").render().htmlFor().forFrame()  
    + "]</span>";
    cli.cardColor="#e3edff";
}else{
   cli.fieldsLine=wiFields.get("initialStoryPoints").render().htmlFor().forFrame()  
    + " sp, "
    +wiFields.priority().render().withText(true).withIcon(false).htmlFor().forFrame()
    + ", "
    +wiFields.status().render().withText(false).htmlFor().forFrame()
    + "<br>" 
    + wiFields.assignee().render().htmlFor().forFrame()  
    + " [" 
    + wiFields.get("solutionTeam").render().htmlFor().forFrame()
    +"]"
}

- Change Title height to fit into the card:

Another example is to customize the card in a way, that the whole title fits the Card.

To do so, put the following script into Planning Board parameters - Advanced - Config Script:

var style = document.createElement('style');
style.innerHTML = ".eventitem .title { height: 87px; }";
document.head.appendChild(style);

As a result, just using some CSS, we can change the height of the title on the card.

Make sure that the height you specified in the script is at least a bit smaller than the one defined in "Card Height" to ensure that everything fits in the card:

You can also control what height to set if you right click on any card on Planningboard -> Inspect.

On the right side in Elements section you can see that previously set height is overwritten with the new one from the dcript. On this interface you can also find the best title height for your Planningboard by dragging the height value and checking how this looks on the card immediately.

What API is available:

wi : IWorkItem (classic API)
workitem : WorkItem (rendering API)
cli : client side data
String text;
String color;
String cardColor = "white";
boolean readonly = false;
boolean resolved;
float effort;
String label;
String fieldsLine;
String tooltip;

In case of questions, please contact as at [email protected]