Side-by-side grid view of readonly values

[Alexander Bautz]

Here is an example of a method to show a grid view of field values in a form.

Step 1:
Create a “Heading or HTML” section in a tab like this:

Step 2:
Add this Custom CSS in the Misc tab:

td.gridLabel{
	width:150px;
	font-size:14px;
	font-weight:bold;
}
td.gridBody{
	width:150px;
	font-size:12px;
}

Step 3:
Add this Custom JS in the Misc tab:

(function(){
	var b = [];
	b.push("<table class='myGrid '>");
		b.push("<tr>");
			b.push("<td class='gridLabel'>");
				b.push("My custom label:");
			b.push("</td>");
			b.push("<td class='gridBody'>");
				b.push(getFieldValue("FieldInternalName",false));
			b.push("</td>");
			b.push("<td class='gridBody'>");
				b.push(getFieldValue("FieldInternalName",false));
			b.push("</td>");
			b.push("<td class='gridBody'>");
				b.push(getFieldValue("FieldInternalName",false));
			b.push("</td>");
		b.push("</tr>");
	b.push("</table>");
	$("#myGrid").html(b.join(""));
})();

Change “FieldInternalName” to match the field name you want to pull the value from.

PS: This example is for EditForm. To make it work in DispForm, use “true” instead of “false” in “getFieldValue”.

The result should look like this:

Alexander

• This topic was modified 9 years, 11 months ago by Alexander Bautz.

Attachments:

1. 

   sbs_grid_1.png
   

2. 

   sbs_grid_2.png
   

[Author]

Posts