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

[mausser]

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]

Add this piece extra beside existing

make sure the value matches in the code, replace with your existing values
Compliant

Non-Compliant

[mausser]

So in this line ? 

<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]}}">

[mausser]

I am getting this when I add it to the existing ng-class on line 51 in the code:

[mausser]

Hello Sohithanjan,

I get the right colours now at compliant / non-compliant, but there's some problems with the spacing between the text and the circle

Do you know how to fix it ?

[Sohithanjan G · Accepted solution]

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 !!!