Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Microsoft Dynamics CRM (Archived)

How change background color based on field value which is option set

(0) ShareShare
ReportReport
Posted on by 95

Hi  

I have a requirement to create a HTML web resource that simply changes it’s background colour , based on the rating of the opportunity

 

When the rating is ‘Cold’ it must display Blue

for ‘Warm’ it should display Orange

And for ‘Hot’ it needs to display Red.

 

Please detail how you would approach this requirements, what steps you would take to create the components, display in on the form and an outline of how you would provide colour coding based on a record’s value. 

*This post is locked for comments

  • VenkateshTJ Profile Picture
    VenkateshTJ 35 on at
    RE: How change background color based on field value which is option set

    would you share working sample code here, 

  • Suggested answer
    tw0sh3ds Profile Picture
    tw0sh3ds 5,600 on at
    RE: How change background color based on field value which is option set

    Have you tried anything yourself? This requirements are really simple, every piece of the solution is really easy to search on the Internet. First, create web resource (search for "CRM 2016 creating HTML Web Resources"), next, put it on the form (search for "CRM 2016 use WebResource on the form"), then write a simple JavaScript that will get the value from the form (search "CRM 2016 access form data from WebResource") and then simply change the background of the web resource (search for "HTML5 change background of the form Javascript").

  • Suggested answer
    Aric Levin Profile Picture
    Aric Levin 30,188 Moderator on at
    RE: How change background color based on field value which is option set

    I think this is simple enough based on your question.

    Create an HTML Web Resource.

    Inside the web resource JavaScript section read the value of the rating field:

    var rating = parent.Xrm.Page.getAttribute("ratingcode").getValue();

    You can set the different styles in the style section of the page, or apply them directly:

           .rating { background-color: #ffffff }

           .rating .cold { background-color: #0000ff }

           .rating .normal { background-color: #00ff00 }

           .rating .hot { background-color: #ff0000 }

    whether you use jquery or the document object model it is up to you.

    Your html code would look like this:

    <div id="ratingControl" class="rating  normal" style="width: 10%;">

      <span>Control Text</span>

    </div>

    After you get the rating, you check the rating and set the rating to the control

    // You can also use the addClass, removeClass and toggleClass methods

    switch (rating)

    {

      case 1:

         $("#ratingControl").attr('class', 'rating  cold');

         break;

      case 2:

         $("#ratingControl").attr('class', 'rating  normal');

         break;

      case 3:

         $("#ratingControl").attr('class', 'rating  hot');

         break;

      default:

         $("#ratingControl").attr('class', 'rating');

         break;

    }

    If you want to use dom use document.getElementById("ratingControl").className = "rating  normal";

    Hope this helps.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Daivat Vartak – Community Spotlight

We are honored to recognize Daivat Vartak as our March 2025 Community…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Kudos to the February Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,516 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,409 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans