Change label text based on selected Tab

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

Viewing 7 reply threads
  • 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

Viewing 7 reply threads
  • You must be logged in to reply to this topic.