Customer experience | Sales, Customer Insights,...

How to Make a Field Label Bold

(0) Share

Report

Posted on by Sean Henderson

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

All responses (5)

Answers (0)

cloflyMao 25,202 on at

Like (0)

Report
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.

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,

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.

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

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
Sean Henderson 15 on at

Like (0)

Report

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:

Event Handler on Form Properties:

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 25,202 on at

Like (0)

Report
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);

Regards,

Clofly
Sean Henderson 15 on at

Like (0)

Report

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.
Suggested answer

necsa 3,455 on at

Like (0)

Report

RE: How to Make a Field Label Bold

Hi Sean,

follow this link

community.dynamics.com/.../482545