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

mausser · ‎02-25-2024

Sorry it took a while for me to accept the answer, I was busy this weekend, but I tried above code and it worked like a charm, thank you so much for your help.

Sohithanjan G · ‎02-23-2024

Hi @mausser ,

Request you to mark as Accepted Solution & Hit helpfull button. You can adjust the spacing here

style="margin-right: 5px;"

increase / decrease the margin-right attribute mentioned in the code. Request you to mark as Accepted Solution & Hit helpfull button !!!

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..:)

Sohithanjan G · ‎02-24-2024

Hi @mausser ,

Request you to mark as Accepted Solution & Hit helpfull button.

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..:)