web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Customer experience | Sales, Customer Insights,...
Suggested answer

How to Make a Field Label Bold

(0) ShareShare
ReportReport
Posted on by 15

Hi,

I was trying to create a Web Resource to make a field label bold (the customer wants subtotals to stand out).

I found an old post that suggested I use the following:

function BoldLabel(LabelName) 
{ 
   document.getElementById(LabelName).style.fontWeight="bold";
}

And then call the field name as a parameter in the handler properties.

However, I get the following error:

Cannot read property 'style' of null

The post I was reading from is 9 years old. Does anyone know how to change the font weight on a field now?

Thanks

I have the same question (0)
  • Suggested answer
    necsa Profile Picture
    3,455 on at
    RE: How to Make a Field Label Bold

    Hi Sean,

    follow this link

    community.dynamics.com/.../482545

  • Sean Henderson Profile Picture
    15 on at
    RE: How to Make a Field Label Bold

    Hi Necdet,

    Thank you for your response. I couldn't really see anything in that link that helps me though. I'm not clear on the correct syntax for the latest version of CRM.

  • cloflyMao Profile Picture
    25,210 on at
    RE: How to Make a Field Label Bold

    Hi Sean,

    I think you might had missed two things:

    1. DOM elements are loaded dynamically, you need to create a timer to wait label being loaded.

    2. To get DOM element from web resource, we should add parent from beginning of document.getxxx

    E.g:

    function setLabel() {
    
         setTimeout(function(){ 
         parent.document.getElementsById("label").style.fontWeight = 'bold';
      }, 2000);
    
    }

    In addition, you could create a dummy style element and insert it to document, it'll take effect for all label elements without a timer.

    (Because CSS rule is static)

    var cssRules = 'label { font-weight:bold!important; }';
    
    var styleElement = document.createElement('style');
    
    styleElement.appendChild(document.createTextNode(cssRules));
    
    parent.document.getElementsByTagName('head')[0].appendChild(styleElement);

    pastedimage1582882997576v1.png

    Regards,

    Clofly

  • Sean Henderson Profile Picture
    15 on at
    RE: How to Make a Field Label Bold

    Hi Clofly,

    Thank you for your response. It's not giving an error for me now, but it's also not making the field bold. Sorry if this is pretty basic stuff, this is my first time implementing Javascript.

    The web resource:

    Annotation-2020_2D00_02_2D00_28-092847.png

    Event Handler on Form Properties:

    Annotation-2020_2D00_02_2D00_28-093041.png

    I didn't put in the second part you suggested. I'm not sure what it's for and it sounds like it's optional.

    Thank you again for your help!

  • cloflyMao Profile Picture
    25,210 on at
    RE: How to Make a Field Label Bold

    Hi Sean,

    1. Is 'dev_testfield' your label field id?

    If so, your setLabel function should be below:

    function setLabel() {
    
         setTimeout(function(){ 
         parent.document.getElementsById("dev_testfield").style.fontWeight = 'bold';
      }, 2000);
    
    }

    In your second sceenshot, we don't need to add anything in lower input field.(Under Comma separated...)

    2. It seems that dev_testid would actually be your custom field logical name?

    If so, you want to change its display name, would my guess be right?

    In classic UI, to make font of field display name text be bold, 

    you should open browser developer tool - inspector(F12) to get the correct element id,

    then set it to getElementById.

    e.g: Account's Phone field id is actually telephone1_cl instead of its logical name telephone1.

    pastedimage1583117115514v1.png

    In your screnario, it would be dev_testfield_cl instead of just dev_testfield.

    However, id of fields in UCI is generated dynamically each time we open form,

    pastedimage1583117347688v2.png

    so we can't use getElementById in UCI. 

    There are two ways for UCI:

    1. My second code in my first response, it will create a CSS rule to affect all fields style.

    2. In UCI, index increasement of element is regular.

    e.g:

    The 4th label element stands for Phone field.

    pastedimage1583117591760v3.png

    The 8th label element stands for label[4 next element.(Fax)

    pastedimage1583117631539v4.png

    So in UCI, you can also use 

    document.getElementsByTagName("label")[i];

    to get a specific label element.

    You can open console and paste code into it to get the element you want one by one.

    document.getElementsByTagName("xxx")[i equals to document.getElementsById("xxx").

    Regards,

    Clofly

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

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Abhilash Warrier – Community Spotlight

We are honored to recognize Abhilash Warrier as our Community Spotlight honoree for…

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
Rishabh Kanaskar Profile Picture

Rishabh Kanaskar 235

#2
MVP-Daniyal Khaleel Profile Picture

MVP-Daniyal Khaleel 177

#3
Tom_Gioielli Profile Picture

Tom_Gioielli 156 Super User 2025 Season 2

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans