Customise the content of the card

Modified on Sat, 28 Aug 2021 at 03:37 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()
    +"]"
}


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 ask support...



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 atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article