Show red/green dot on list based on value in data table from instance widget

mausser · ‎02-23-2024

Hello,

I am using the out of the box widget "Data Table from Instance" on our portal to show a list of compliance controls from the "sn_compliance_control"-table, in the backend the list has a green dot on the status field, if the value is "Compliant" and a red dot on the status field if the value of a control is "Non-compliant", however these red and green dots are not present on the list when I present it on the portal through the widget initially mentioned.

How can I achieve this ?

Sohithanjan G · ‎02-23-2024

Hi @mausser

Replace the complete <tbody></tbody> from line 49 to 54 with below lines. It will work

<tbody>
<tr ng-repeat="item in data.list track by item.sys_id">
	<td role="{{$first ? 'rowheader' : 'cell'}}" class="pointer sp-list-cell" ng-class="{selected: item.selected}" ng-click="go(item.targetTable, item)" ng-repeat="field in ::data.fields_array" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}">
		<a href="javascript&colon;void(0)" ng-if="$first" aria-label="${Open record}: {{::item[field].display_value}}">
			<span ng-if="item[field].type === 'user_image'"><img class="user_image" src="{{item[field].display_value}}"/></span>
			<span ng-if="item[field].type !== 'user_image'">{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}</span>
		</a>
		<span ng-if="!$first">			
			<span class="dot" ng-class="{'compliant': item[field].display_value === 'Compliant', 'non-compliant': item[field].display_value === 'Non Compliant'}" style="margin-right: 5px;"></span>
			<span ng-if="item[field].type === 'user_image'"><img class="user_image" src="{{item[field].display_value}}"/></span>
			<span ng-if="item[field].type !== 'user_image'">{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}</span>
		</span>
	</td>
</tr>
</tbody>

Please Accept as Solution & mark helpful !!!

Please mark as Accepted Solution if this solves your query and HIT Helpful if you find my answer helped you. This will help other community mates too..:)

View solution in original post

Mark Roethof · ‎02-23-2024

Hi there,

Kind regards,

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Dr Atul G- LNG · ‎02-23-2024

Hi @mausser

Seems half information. could you please provide some screenshot?

or check the Field Style to show red/ blue dots on list view.

*************************************************************************************************************
If my response proves useful, please indicate its helpfulness by selecting " Accept as Solution" and " Helpful." This action benefits both the community and me.

Regards
Dr. Atul G. - Learn N Grow Together
ServiceNow Techno - Functional Trainer
LinkedIn: https://www.linkedin.com/in/dratulgrover
YouTube: https://www.youtube.com/@LearnNGrowTogetherwithAtulG
Topmate: https://topmate.io/atul_grover_lng [ Connect for 1-1 Session]

****************************************************************************************************************

mausser · ‎02-23-2024

Sorry I posted the message prematurely, I updated it

Dr Atul G- LNG · ‎02-23-2024

Hi @mausser

You can use Field style

OOTB

*************************************************************************************************************
If my response proves useful, please indicate its helpfulness by selecting " Accept as Solution" and " Helpful." This action benefits both the community and me.

Regards
Dr. Atul G. - Learn N Grow Together
ServiceNow Techno - Functional Trainer
LinkedIn: https://www.linkedin.com/in/dratulgrover
YouTube: https://www.youtube.com/@LearnNGrowTogetherwithAtulG
Topmate: https://topmate.io/atul_grover_lng [ Connect for 1-1 Session]

****************************************************************************************************************