Creating headers WITHIN Side by side columns in the form

Forums Dynamic Forms for SharePoint Creating headers WITHIN Side by side columns in the form

Viewing 5 reply threads
  • Author
    Posts
    • #24093
      Jon Whisman
      Participant

      How to Create headers WITHIN side by side columns in the form? See attached for a mock-up. The blue headers would be your tabH1 default. But how to get them to reside only within the 2nd column (or 3rd column, etc?)

    • #24171
      Alexander Bautz
      Keymaster

      To do this in the current version you would have to use Custom JS.

      Add this function to your Custom JS:

      function addCustomHeaders(){
          jQuery("#sbs_FieldLabel_FIELDINTERNALNAME1 td.ms-formlabel").prepend("<div style='padding:5px;background-color:#1E50B6;color:#ffffff'>This is a custom SBS heading</div>");
          jQuery("#sbs_FieldLabel_FIELDINTERNALNAME2 td.ms-formlabel").prepend("<div style='padding:5px;background-color:#1E50B6;color:#ffffff'>This is a custom SBS heading</div>");
      }

      Replace FIELDINTERNALNAME1 and FIELDINTERNALNAME2 with your field names.

      Then go to your tab configuration for the tab where the SBS fields are located and add the function name addCustomHeaders in the Click function name field.

      Let me know how this works out.

      Alexander

    • #24239
      Jon Whisman
      Participant

      Worked beautifully, thank you!!!

    • #24243
      Jon Whisman
      Participant

      Need some additional help if you can. Each time the tab is clicked, a new header is generated.

      Example: click into another tab, then back into the tab with the code above = a new header.

      Repeat this multiple times and I have multiple headers stacked on top of each other.

      I tried to clear the div content before the div is written so that any previous div’s would be deleted, but that did not work.

      Any suggestions or code to do a clear of any previously rendered headers before the new header is rendered?

    • #24249
      Alexander Bautz
      Keymaster

      Ah, sorry about that – I didn’t test it properly. Here is a modified snippet:

      function addCustomHeaders(){
          jQuery("#sbs_FieldLabel_FIELDINTERNALNAME1").before("<tr><td><div style='padding:5px;background-color:#1E50B6;color:#ffffff'>This is a custom SBS heading</div></td></tr>");
          jQuery("#sbs_FieldLabel_FIELDINTERNALNAME2").before("<tr><td><div style='padding:5px;background-color:#1E50B6;color:#ffffff'>This is a custom SBS heading</div></td></tr>");
      }

      Alexander

    • #24255
      Jon Whisman
      Participant

      Marvelous! Works without issues.

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