Adding section icons and changing background color in dynamics CRM

Question

I need to give an icon to each section in my entities. For example, I need to give an icon to General information, another one for interactions section. Is there an idea about how could I do that? and how can I make a background color for each section please? Thanks in advance,

Answer 1

There is no way to assign icons to sections. The best you could do would be to add a web resource to each of your sections and have them link to an image, but it doesn't really sound like that's what you're going for.

There are no supported ways to modify the form background color. If you don't care about remaining supported, though, you can use jQuery to do it. Put this function into your form script:

function changeSectionBackgroundColor(sectionId, color) {
    parent.$("table.ms-crm-FormSection[name='"+sectionId+"']").css({"background-color": color});
}

and use it like this:

changeSectionBackgroundColor("General_Section_2", "red");
changeSectionBackgroundColor("General_Section_2", "#ababab");

Answer 2

You could try to do something like this to insert the Section images:

var stackoverflow = (function (Xrm)
{
    var sectionBarClassName = '.ms-crm-Form-SectionBar';                // name of the CSS class given to the Section's Label's <td> element

    function GetSection(tabName, sectionName)
    {
        var parentTab = Xrm.Page.ui.tabs.getByName(tabName);            // get the tab
        var section = parentTab.sections.getByName(sectionName);        // get the section

        return section;
    }

    function AddSectionImage(tabName, sectionName, imageUrl)
    {
        var section = GetSection(tabName, sectionName);                // retrieve section using Xrm
        var elSection = document.querySelector('table[name=' + section.getKey() + ']');
        var elSectionHeader = elSection.querySelector('tr:first-child');
        var elTitles = elSection.querySelectorAll(sectionBarClassName);
        if (elTitles.length === 1)                                     // we can assume that this section has a title
        {
            var elImg = document.createElement('img');
            elImg.src = imageUrl;
            elTitles[0].insertBefore(elImg, elTitles[0].firstChild);
        }
    }

    return {
        AddSectionImage : AddSectionImage
    };

})(Xrm);

You then call this code and pass in the Name (not label) of the tab and section as well as the relative URL of the image you want displayed. Like so:

stackoverflow.AddSectionImage('tab_5', 'tab_5_section_1', '/imgs/Cancel_16.png');

I've only tested this code in CRM 2016 (online). And the image is a bit rough. You'll need to take care of the styling (inline) and the size yourself.

This is of course, unsupported by Microsoft :)