Change label text based on selected Tab

[Bryan R Babbitt]

Hi,

I was wondering if there was a way to change the label text based on the selected tab.

I have two tabs using the same field, but in this case, the text label name doesn’t as the field is used in a different context. I have attempted the below without any success. Is there some magic of jQuery that could be done to help me out with this?

if (getFieldValue(“dffs_tab_12”) == “12”) {
jQuery(spjs.dffs.fields[“ffcIncidentTitle”]).find(“td.ms-formlabel h3 nobr”)[0].childNodes[0].nodeValue = “SIR Title”;
jQuery(“ffcIncidentTitle”).prop(“readonly”, true);
} //end if

[Alexander Bautz]

Hi,
You can add his snippet to your Custom JS. It runs on an interval and detects the change of tabs and applying the field label based on the selected tab. Change “YOU_FIELD_NAME” to match the field you need to change the label for, and case “Tab1”: and case “Tab2”: to match the unique id of your tabs.

var currSelectedTab = spjs.dffs.data.selectedTabUniqueId;
setInterval(function(){
    if(spjs.dffs.data.selectedTabUniqueId !== currSelectedTab){
        currSelectedTab = spjs.dffs.data.selectedTabUniqueId;
    }else{
        return;
    }
    var newLabel = "";
    switch(spjs.dffs.data.selectedTabUniqueId){
        case "Tab1":
            newLabel = "Field label in first tab";
        break;
        case "Tab2":
            newLabel = "Field label in second tab";
        break;
        default:
            newLabel = "Original label for field";
        break;
    }
    if(spjs.dffs.data.isDispForm){
        jQuery("#dffs_YOU_FIELD_NAME").find(".ms-standardheader").text(newLabel);
    }else{
        jQuery("#dffs_YOU_FIELD_NAME").find("td.ms-formlabel nobr")[0].childNodes[0].nodeValue = newLabel;
    }
},250);

Let me know how this works out.

Alexander

[Bryan R Babbitt]

Hi Alex! That worked like a champ.. however, the label is now editable by the user on the form. Which is not the ideal result. How can this be prevented? Also, I would like to put some of the fields on the this particular tab, “Read only”. Can you help me with that as well?

Thanks a bunch!

Bryan

[Alexander Bautz]

Hi,
I don’t understand what you mean by being editable – this snippet should only replace the text content with another plain text value – can you show me a screenshot?

Setting fields as readonly is done with rules – just create a rule triggering on “Selected tab” and set the field readonly in the rule action section.

Alexander

[Bryan R Babbitt]

Morning,

Here is a screen shot of the field.

Attachments:

1. 

   labeledit.jpg
   

[Alexander Bautz]

This looks strange. Can you right click and select “Inspect” and show me a screenshot of the developer tools so I can see the HTML structure of the field label section?

I need to see this both with and without running the code snippet to change the label.

Alexander

[Bryan R Babbitt]

Here ya go SIR. One thing I also identified is that in my code I had this line of code – //$(“#dffs_ffcIncidentTitle”).attr({contenteditable: “true”,spellcheck: “true”}); – which was intended to add the spell check to this field, and it did, but I think this was also what was causing the label to be editable. This was with or without your code example. At this time, it is commented out.

Thank you for helping me with this issue!

Bryan

Attachments:

1. screenshots.docx

[Alexander Bautz]

OK – It’s the contenteditable setting that makes it editable so you will have to remove that property.

Alexander

[Author]

Posts