Changing the colour of a field in the profile page

The developer framework allows an interact administrator to extend and customise some of the functionality with interact by embedding custom javascript within a page

A recent request on the Community portal asked the question if it was possible to display coloured dots on the profile page based on an additional field.

I proposed setting the background color of the 'pill' on the profile page to match the text using the developer framework. The script below does exactly that...

$(document).ready(function(){
  if($("#body_rptAdditionalFields_addFieldItem_0 span")){
    var color = $("#body_rptAdditionalFields_addFieldItem_0 span").html();
    
    $("#body_rptAdditionalFields_addFieldItem_0").css({ "background-color":color, "color":"white" });
    $("#body_rptAdditionalFields_addFieldItem_0 span").html("Employee Rating");
    $("#body_rptAdditionalFields_addFieldItem_0 img").hide();
  }
});

Breaking it down

Let's take a look at each part and see how it comes together

This assumes that the ID of the additional field is 0, you'd need to check this first by navigating to the page and inspecting the element using the browser development tools

$(document).ready(function(){
  if($("#body_rptAdditionalFields_addFieldItem_0 span")){

This attaches the function to the document ready event so that the code is only executed when the page loads, and then checks if the additional field is on the page.

This is important because with the developer framework the javascript is included on every page, but not every page has the additional fields on so running the rest of the code would be pointless on these pages

var color = $("#body_rptAdditionalFields_addFieldItem_0 span").html();
    
    $("#body_rptAdditionalFields_addFieldItem_0").css({ "background-color":color, "color":"white" });
    $("#body_rptAdditionalFields_addFieldItem_0 span").html("Employee Rating");
    $("#body_rptAdditionalFields_addFieldItem_0 img").hide();
  }
});

This part then gets the contents of the additional field from the document, and sets the value of the background color to that, whilst setting the foreground color to white.

$("#body_rptAdditionalFields_addFieldItem_0 span").html("Employee Rating");
    $("#body_rptAdditionalFields_addFieldItem_0 img").hide();
  }
});

Finally, the script adds some text to the pill so that the user knows what they're looking at, and hides the icon for the additional field.

and here's what it looks like in the page