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 ?

[mausser]

Hello Atul, 

We already have the red / green dot in the backend on the list, however I want this as well on the list when I show it on the portal using the "Data Table from Instance"-widget, this widget shows the list fine but does not include the red / green dot as seen in the backend 

[Sohithanjan G]

Hi @mausser , 

Firstly, you need to clone the widget & use it. After cloning,  you have to modify the <tr> tag as below for status column.

 <div class="status">
 <span class="dot" ng-class="{'compliant': item.status === 'Compliant', 'non-compliant': item.status === 'Non-Compliant'}"></span> {{item.status}}
 </div>

CSS

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.compliant {
    background-color: green;
}

.non-compliant {
    background-color: red;
}

Please mark as helpful and Accepted as Solution if it suffices your requirement !!! 

[mausser]

How does above code fit in with the data table widget ? I have cloned that widget, however looking at the code I am not sure where to add the code you provided to make sure it only shows the red dot / green dot on the field where it says "Non-compliant" / "Compliant" 

This is where the table rows are being populated in the span:

[Sohithanjan G]

Hi @mausser ,

After cloning the data table widget, in line 51 replace add this extra ng-class

ng-class="{'compliant': item[field].display_value === 'Compliant', 'non-compliant': item[field].display_value === 'Non-Compliant'}"

and add the below CSS to css section

.compliant {
    background-color: green;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.non-compliant {
    background-color: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

Please mark as helpful and Accepted as Solution if it suffices your requirement !!! 

[mausser]

Hello,

So is it line 51 in below image I have to change? do i need to replace the existing ng-class or simply add it?