Add bold text to a field description

Forms SharePoint 2019
1

Hi,

I am using this code but I was wondering if it's possible to make 'termination date' BOLD?

fd.spRendered(function() {
fd.field('Termination_x0020_Date').description = 'Please remind your Employee to Print/Save copies of their P60/payslips before the termination date'
});

2

Hello @DryChips,

You can update the description HTML to add styling like this:

//add description
fd.field('Termination_x0020_Date').description = 'Please remind your Employee to Print/Save copies of their P60/payslips before the termination date'
//update styling
$(fd.field('Termination_x0020_Date').$el).find('.text-muted').html('Please remind your Employee to Print/Save copies of their P60/payslips before the <b>termination date</b>')
1 Like
3

Thanks @mnikitina

Where do I add this code in?

fd.spRendered(function() {
fd.field('Termination_x0020_Date').description = 'Please remind your Employee to Print/Save copies of their P60/payslips before the termination date'
$(fd.field('Termination_x0020_Date').$el).find('.text-muted').html('Please remind your Employee to Print/Save copies of their P60/payslips before the <b>termination date</b>')
});

Is this correct?

4

Hello @DryChips,

Yes, you are right. All calls to fields must be inside fd.spRendered event.

1 Like
5

Awesome! Thank you!

Can I ask, what does the '.find('.text-muted')' code do? Does this reference something in CSS Editor?

I'm testing this code and it doesn't seem to have worked.

6

@DryChips,

.text-muted — is the CSS class of the description element.

Is this a date field? try out using this code:

fd.spRendered(function() {
    fd.field('Field1').description = 'Please remind your Employee to Print/Save copies of their P60/payslips before the termination date'
    $(fd.field('Field1').$el).ready(function(){
        $(fd.field('Field1').$el).find('.text-muted').html('Please remind your Employee to Print/Save copies of their P60/payslips before the <b>termination date</b>')
    })
});
1 Like
7

Perfect! It works! Thanks so much. You guys ROCK!

1 Like
8

Hi mnikitina,

I have another requirement.

I need to add field descriptors to Attachment fields and Checkbox fields. I have tried using the code above but it doesn't work.

Any suggestions?

Many thanks!

9

@DryChips,

Description can't be added for the Attachments field using this method. You can try adding the description using the Text or HTML controls. Add control below the field and customize its appearance using CSS.

For the choice field, the code should work. Check the browser console for errors.

1 Like
10

Hi Margarita, back again, I know! :sweat_smile:

How can I add open a field descriptor in a dialog box? I tried it using this code but the link doesn't do anything.

//This code will open the Cost-Centre Code hyperlink in a dialog box - [Wizard 1]
var CostCentre = document.getElementById("Cost-Centre");
CostCentre.onclick = function() {
    Dialog.open('', {}, {} )
    return false;
};

//This code applies a field description under the Cost Centre Code field- [Wizard 2]
fd.field('Cost_Centre').description = "Where can I find this?";
 $(fd.field('Cost_Centre').$el).ready(function(){
        $(fd.field('Cost_Centre').$el).find('.text-muted').html('<a id="Cost-Centre" href="#">Where can I find this?</a>')
 })
11

Dear @DryChips,
What's the use case here? Where exactly are you running the code and what do you want to achieve?

If you're opening another form in dialog, it would be easier to run this code on the form that opens.

12

HI Nikita,

I would like to open a .ASPX WIKI page which I have designed to help users find out what Cost Centre means and where they can locate it in my organisation.

The code is all being ran is the JS Editor.

13

Dear @DryChips.
So, what field description you want to add in dialog box? Is there a field on .ASPX WIKI page?

14

Hi Nikita,

No, no, I think you misunderstood me.

Let me elaborate, I have a field descriptions that is a hyperlink, I want to open it as a Dialog box in the form.

Where it says, "Where can I find this?" I want to open a dialog box onClick.

image
image833×264 9.59 KB

15

Dear @DryChips,
If you want code to find it, you need to run it after you place it:

fd.field('Cost_Centre').description = "Where can I find this?";
$(fd.field('Cost_Centre').$el).ready(function(){
        $(fd.field('Cost_Centre').$el).find('.text-muted').html('<a id="Cost-Centre" href="#">Where can I find this?</a>')
        $('#Cost-Centre').click(function() { alert('Hello, world!'); });
 })
16

Hmm, it hasn't done anything.

Update:

I will use HTML control instead as a workaround. Then use CSS to mimic the field description layout.

1 Like
18

Update:

I figured out how to open a .ASPX page via a field descriptor instead of using HTML control.
This approach is much better as it eliminates the need to add HTML control to the designer.

Here is the code that will do the job:

//This code will open the Employee Email Address help message  in a dialog box - [Wizard 2]
fd.field('Employee_Email_Address').description = "Click for acceptable email domains";
$(fd.field('Employee_Email_Address').$el).ready(function(){
        $(fd.field('Employee_Email_Address').$el).find('.text-muted').html('<a id="EmailHelp2" href="#">Click for acceptable email domains</a>')
        var Email = document.getElementById("EmailHelp2");
        
        $('#EmailHelp2').click(function(){ 
            Dialog.open('#', {}, {},{
                width: 600, height: 600, title:"MY TITLE"}) 
        });
 })