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

This topic contains 5 replies, has 2 voices, and was last updated by  Jon Whisman 1 week ago.

  • 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.

You must be logged in to reply to this topic.