Side-by-side grid view of readonly values

Forums Dynamic Forms for SharePoint Side-by-side grid view of readonly values

Tagged: 

Viewing 0 reply threads
  • Author
    Posts
    • #6908
      Alexander Bautz
      Keymaster

      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:
      IMG

      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:
      IMG

      Alexander

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