Need help in widget for adding colour codes

Bala13 · ‎04-27-2022

Hi,

We are using a widget to display the list of records on the portal from change request table.

Now, i need to customise the widget with the below points which will display colour codes. PLease help me with this request.

1. Green circle if the actual start date is after the planned start date
2. Yello circle if the change is set to an ON HOLD state
3. no colour code if state is Workin progress and actual end date is empty

Kindly help me on this

Steven Young · ‎04-27-2022

can you share the widget for context?

there are multiple ways this can be done, but without knowing what you're doing in the widget, it's hard to give you a solution.

Bala13 · ‎05-03-2022

HI Steven,

Below is the widget i am using it for. please help me how to implement the colour code based on the question ask. Kindly help me on this

(function() {
    var table_id = 'planned_task';
    var projectId = $sp.getParameter("sysparm_sys_id");
    var statusReport = $sp.getParameter('sysparm_report_id');
	var taskQuery = "top_task=" + projectId + "^key_milestone=true^active=true^NQtop_task=" + projectId + "^key_milestone=true^active=false^work_endONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()";
	
	var statusReport = new PmProjectStatusReport();
    var reportBaseId = statusReport.getReportBaseId(statusReportId);
	
  
       table_id = 'project_key_milestone_baseline';
		taskQuery = "parent=" + reportBaseId + "^active=true^NQparent=" + reportBaseId + "^active=false^u_actual_end_dateONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()";
 

})();

Below is the widget i am using it for.

<div id="projectDescription">
  

  <div class="container">
    <div class="title green">${Milestones}</div>
  
  
  
  
  <table class="table table-striped table-responsive"> 
					<thead> 
					 <tr> 
					  <th><span class="text-bold">Description</span> </th>
             <th><span class="text-bold">Planned End Date</span> </th>
             <th><span class="text-bold">Actual End Date</span> </th>
             <th><span class="text-bold">State</span> </th>
<th><span class="text-bold">Project Manager</span> </th>
<th><span class="text-bold">Assignement Group</span> </th>
<th><span class="text-bold">Assigned To</span> </th>
					 </tr> 
					</thead> 
					<tbody> 
						<tr ng-repeat="tasks in data.pending_milestones | orderBy:'sortNumber'"> 
							<td>{{tasks.description}}</td>
							<td>{{tasks.end_date}}</td>
                            <td>{{tasks.work_end}}</td>
                            <td>{{tasks.state}}</td>
							
						</tr>
					</tbody> 
				</table>
  
  </div>
  
  <div>

Steven Young · ‎05-04-2022

So it looks like the script is incomplete, so i couldn't replicate exactly what you were trying to do. however, i just kinda used a change_request table for scripting to give you an example.

This is just an example of how you could do it via server side scripting.
There are other ways to do it by passing the values to the html and scripting it within the HTML as well.

so, CSS:

.dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
}

.green {
    background-color: #00ff00;
}

.yellow {
    background-color: #FFFF01;
}

.red {
    background-color: #FF0000;
}

.pink {
    background-color: #ff007c;
}

HTML:

<div>
  <div id="projectDescription">


    <div class="container">
      <div class="title green">${Milestones}</div>

      <table class="table table-striped table-responsive"> 
        <thead> 
          <tr> 
            <th><span class="text-bold">&nbsp;</span> </th>
            <th><span class="text-bold">Number</span> </th>
            <th><span class="text-bold">Description</span> </th>
            <th><span class="text-bold">Planned End Date</span> </th>
            <th><span class="text-bold">Actual End Date</span> </th>
            <th><span class="text-bold">State</span> </th>
            <th><span class="text-bold">Project Manager</span> </th>
            <th><span class="text-bold">Assignement Group</span> </th>
            <th><span class="text-bold">Assigned To</span> </th>
          </tr> 
        </thead> 
        <tbody> 
          <tr ng-repeat="tasks in data.pending_milestones | orderBy:'sortNumber'"> 
            <td ng-if="tasks.status == 'good'"><span class="dot green"></span></td>
            <td ng-if="tasks.status == 'In Progress'"><span class="dot yellow"></span></td>
            <td ng-if="tasks.status == 'Authorize'"><span class="dot pink"></span></td>
            <td ng-if="tasks.status == 'noColor'"><span>&nbsp;</span></td>
            <td ng-if="tasks.status == 'red'"><span class="dot red"></span></td>
            <!--<td>{{tasks.number}}</td>-->
            <td>{{tasks.description}}</td>
            <td>{{tasks.end_date}}</td>
            <td>{{tasks.work_end}}</td>
            <td>{{tasks.state}}</td>
            <td>{{tasks.pm}}</td>
            <td>{{tasks.assignment_group}}</td>
            <td>{{tasks.assigned_to}}</td>

          </tr>
        </tbody> 
      </table>

    </div>
  </div>

and Server Script:

(function() {

	/*
	var table_id = 'planned_task';
	var projectId = $sp.getParameter("sysparm_sys_id");
	var statusReport = $sp.getParameter('sysparm_report_id');
	var taskQuery = "top_task=" + projectId + "^key_milestone=true^active=true^NQtop_task=" + projectId + "^key_milestone=true^active=false^work_endONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()";

	var pmStatusReport = new PmProjectStatusReport();
	var reportBaseId = pmStatusReport.getReportBaseId(statusReportId);


	table_id = 'project_key_milestone_baseline';
	taskQuery = "parent=" + reportBaseId + "^active=true^NQparent=" + reportBaseId + "^active=false^u_actual_end_dateONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()";
*/
	data.pending_milestones = [];

	var change = new GlideRecord("change_request");
	change.addActiveQuery();
	change.addQuery('state', '-1').addOrCondition('state', '-3');
	change.setLimit(100);
	change.query();
	while(change.next()){
		var task = {};
		//task.number = change.number.toString();
		task.description = change.description.toString();
		task.end_date = change.end_date.getDisplayValue();
		task.work_end = change.work_end.getDisplayValue();
		task.state = change.state.getDisplayValue();
		task.pm = change.opened_by.getDisplayValue();  
		task.assignment_group = change.assignment_group.getDisplayValue();
		task.assigned_to = change.assigned_to.getDisplayValue();

		//put these in order or nested inside if conditions.
		//if you want to make sure one condition/color is the master, put that first
		// and then if the status is not blank, do the rest
		var status = '';
		if(change.start_date.getDisplayValue() < change.work_start.getDisplayValue()){
			status = "good";
		}

		//on hold value?  
		if (change.getValue('state') == '-3'){
			status = change.state.getDisplayValue();
		}

		//if in-progress and actual end date is blank
		if(change.getValue('state') == '-1' && change.getValue('work_end') == ""){
			status = "noColor";
		} else if (change.getValue('state') == '-1' && change.getValue('work_end') != "") {
			//add a red if the stat is in progress but the work end is populated,
			//have someone look at these and close them or clear the completion date.
			status = 'red';
		}

		//just a fallback to look for anything that doesn't have a status set yet...  
		//to make sure we keep the first column blank.
		if(status == ""){
			status = "noColor";
		}
		task.status = status;
		data.pending_milestones.push(task);
	}

})();

Hope this helps to get you to where you need to be.

you can change the size of the dot by changing the height/width in the css.

in the html, if you want to script it, then inside the ng-if="" is where you need to put your conditions.
but like "Authorize" is a state that you may have while it's waiting for approval, and maybe you want that to be a hot pink.