0

Is it possible to insert a small HTML table for the column descriptions. I have a bunch of acronyms that I use the description to have the definition of what they represent, and instead of having them all in a column making the form take up more room, I would like to have rows and columns.

Or since it is possible to insert scripts into New/Edit list forms. Can you insert html with JavaScript? For example, not have a description by default, but populate one?

EDIT:

So I have tried the following. The field description I am trying to populate is the following (I did not provide a description in the column information in list settings).

enter image description here

Here is the table that I am trying to append under the MondayStatus along with a working fiddle.

var $table = $('<table style="text-align: center;"/>');
$table.append( '<tr><td style="border: 1px solid black;">' + 'P = Present' + '</td><td style="border: 1px solid black;">' + 'LA = Leave Annual' + '</td><td style="border: 1px solid black;">' + 'H = Holiday' + '</td></tr>'+
'<tr><td style="border: 1px solid black;">' + 'JD = Jury Duty' + '</td><td style="border: 1px solid black;">' + 'OL = Other Leave' + '</td><td style="border: 1px solid black;">' + 'SL = Sick Leave' + '</td></tr>' + 
'<tr><td style="border: 1px solid black;">' + 'ML = Military Leave' + '</td><td style="border: 1px solid black;">' + 'NR = Not Reported' + '</td><td style="border: 1px solid black;">' + 'O = Off-site' + '</td></tr>' + 
'<tr><td style="border: 1px solid black;">' + 'TAD = Temp. Additional Duty' + '</td><td style="border: 1px solid black;">' + 'TLV = Transitional Leave' + '</td><td style="border: 1px solid black;">' + 'TRNG = Training' + '</td></tr>');
$("select[title^='Monday Status']").closest('td').append($table);

https://jsfiddle.net/BeerusDev/rja36xg7/36/

5
  • Are you using classic experience list forms or modern experience list forms? Jan 15 at 7:47
  • Classic, but can use either
    – BeerusDev
    Jan 18 at 13:39
  • 1
    You can append HTML table using JS/jQuery append() method in Script editor/content editor web part in classic experience. Jan 18 at 14:08
  • If the descriptions all have the same class name, how would you do this individually?
    – BeerusDev
    Jan 18 at 16:50
  • If you do not have a description by default, there is no span element created for description. So no need to worry about class name of description. check my answer given below for simple example. Jan 18 at 18:16
1

As you are using classic experience, you can append HTML table (or any element you want) using JS/jQuery append() method in Script editor/content editor web part in classic experience.

Example:

$("input[title^='Content Amount']").closest('td').append('<span class="ms-metadata">Custom Description for Content Amount field</span>')

Output:

enter image description here

Note:

  1. You do not need to add SharePoint default description for this field.
  2. Content Amount in above code is column display name.

Similarly you can append HTML table to td element.


Update:

I just tried your code & it is working fine for me:

enter image description here

Try writing your code in below format:

function runAfterEverythingElse(){
    // Add your code here
}
_spBodyOnLoadFunctionNames.push("runAfterEverythingElse");

Make sure you are using correct selector for your HTML element.

1
  • Please see the edit to my post. Nothing gets appended to the field description
    – BeerusDev
    Jan 18 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.