Side-by-side grid view of readonly values

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

Tagged: 

This topic contains 0 replies, has 1 voice, and was last updated by  Alexander Bautz 2 years, 7 months ago.

  • 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

You must be logged in to reply to this topic.