Change label text based on selected Tab

Forums Dynamic Forms for SharePoint Change label text based on selected Tab

This topic contains 7 replies, has 2 voices, and was last updated by  Alexander Bautz 6 days, 8 hours ago.

  • Author
    Posts
  • #24221

    Bryan R Babbitt
    Participant

    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

  • #24230

    Alexander Bautz
    Keymaster

    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

  • #24232

    Bryan R Babbitt
    Participant

    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

  • #24234

    Alexander Bautz
    Keymaster

    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

  • #24236

    Bryan R Babbitt
    Participant

    Morning,

    Here is a screen shot of the field.

    Attachments:
  • #24245

    Alexander Bautz
    Keymaster

    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

  • #24260

    Bryan R Babbitt
    Participant

    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
  • #24270

    Alexander Bautz
    Keymaster

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

    Alexander

You must be logged in to reply to this topic.