Creating headers WITHIN Side by side columns in the form

[Jon Whisman]

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?)

Attachments:

1. 

   2019-03-04_11-41-42.jpg
   

[Alexander Bautz]

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

[Jon Whisman]

Worked beautifully, thank you!!!

[Jon Whisman]

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?

[Alexander Bautz]

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

[Jon Whisman]

Marvelous! Works without issues.

[Author]

Posts