Coloring Yes/No Fields

Forms SharePoint Online
1

I want to color a Yes/No Field
Yes would show in green
No would show in red

Looking thru the forum, I found some reference to this, but don't see the complete code...

this is what I have that I know is wrong and not working. Suggestions on how to fix?

trying to add to the default code that is already there

thanks

fd.spRendered(function () {
// This code is executed once the form is rendered

// Populating Resolution Date with the current date when a user sets
// Status field to 'Resolved'
fd.field('Status').$on('change', function (value) {
    if (value === 'Resolved') {
        fd.field('ResolutionDate').value = new Date();
    }
})

});
fd.spRendered(function() {
if (fd.field('_x0031__x002e__x0020_Are_x0020_t').value = FALSE){
$(fd.field('_x0031__x002e__x0020_Are_x0020_t').$el).k-switch-on .k-switch-container {
background-color: red !important;
}
})
});

2

Hello @eweiler,

There is no need in a code for this. You can change the color of the Yes-No toggle using the CSS:

.form-switch > .form-check-input:checked{
    background-color: green !important;
    border-color: green !important;
}

.form-switch > .form-check-input{
    background-color: red !important;
    border-color: red !important;
}
3

thank you!

I do need a little more explanation...sorry

I put this code in the CSS panel at the top of the Forms program and it didn't do anything

I put this code in the style parameter of the cell properties and it color the yes/no field as red no matter the value.

thanks for giving me some additional direction.

Screenshot 2023-01-25 110645
Screenshot 2023-01-25 1106451380×732 123 KB

4

@eweiler,

Thank you for the screenshot!

The CSS class differs depending on the mode of the field. Please use this code for the Advanced mode:

.k-switch-on .k-switch-container {
    border-color: #37a448 !important;
    background-color: #37a448 !important;
}

.k-switch-off .k-switch-container {
    border-color: #E91E63 !important;
    background-color: #E91E63 !important;
}
5

thanks, can you clarify where this goes?

I placed it in the SharePoint Field properties in cell properties/style, general/style and all it does was turn it red, no matter the field value.

Thanks again

6

@eweiler,

You need to place the code to the CSS editor, Current Form tab:

image

7

Thank you! that took care of toggling the colors when the form is in New or Edit mode.

How do I color code the answers in Display Mode?

Eric

8

Hello @eweiler,

On a Disapply form you should use the code:

var booleanField = $(fd.field('FieldName').$parent.$el)
if(fd.field('FieldName').displayValue == 'Yes'){
    booleanField.find('.fd-field-control').css("background-color", "#37a448 ")

}
if(fd.field('FieldName').displayValue == 'No'){
    booleanField.find('.fd-field-control').css("background-color", "#E91E63")
}

You need to place the code to the JS editor inside the spRendered() function like so:
image

9

You are Awesome!! thank you

1 Like