Hi, I’m wondering if there is a way to dynamically style the background color of my accordion, based on the number of fields that have been completed?
I could do something like an IF statement on the value of each field and then presumably use JS to alter the styling of the accordion element, but this seems very long winded.
Is there a way of quickly doing this, say for all fields within a container? Appreciate that it wouldn’t work on fields that already have data (such as a boolean), but is there a way to collectively loop through say all fd.fields and get a result?
Dear @abolam,
While it does sound possible, there are a lot of caveats in doing this. Primarily, it’s important to know what types of fields do you have inside the accordion - text, number, date, boolean, people picker, taxonomy, etc. Some fields will require extra code to check them.
Not least important is to know the exact condition you want to trigger color change. Is it when 100% of fields have some value at all? Or something more specific - different percentage of fields, some specific values, etc.
In theory, it should be possible to retrieve names of all fields inside an accordion section, and use these names to loop through the fields, but then you need to know types of fields and conditions to check them on. That’s pretty much it.
Am looking at RAG rating, so Red when all fields are empty, Amber when at least one field is filled, and Green when all fields are filled. I just need to a starter to get to know how to cycle through the fields within a particular control and push that into an array.
So for a simple example of three text fields to set red the array would return [null, null, null], amber - [value, null, null], green - [value, value, value] can I simply use fd.field and count the number of those within the accordion internal name?
Dear @abolam,
Please, try the following code, it will work with any amount of text fields inside an accordion, but might not work with other types of fields:
fd.spRendered(function(){
//get all panels:
var panels = fd.container('Accordion0').$children;
//function to evaluate each panel
function evaluateAndColor(panel){
var textFields = $(panel).find('input.form-control');
var totalFields = textFields.length;
var filledInFields = 0;
for (var j = 0; j < textFields.length; j++){
var title = $(textFields[j]).attr('title');
if(fd.field(title).value){
filledInFields++;
}
}
if(filledInFields == totalFields){
$(panel).attr('style','background:green;');
}
else if (filledInFields == 0 && totalFields > 0){
$(panel).attr('style','background:red;');
}
else if(filledInFields >= 1 && totalFields > 1){
$(panel).attr('style','background:orange;');
}
}
//retrieve all fields, attach change events, color all panels
for (var i = 0; i < panels.length; i++){
var textFields = $(panels[i].$el).find('input.form-control');
console.log(textFields);
for (var j = 0; j < textFields.length; j++){
var title = $(textFields[j]).attr('title');
fd.field(title).$on('change', function() {
var panel = $(this.$el).closest('.card-block');
console.log(panel);
evaluateAndColor(panel);
});
}
evaluateAndColor($(panels[i].$el).find('.card-block'));
}
});