SharePoint Script: Format the List Form Field

This is a little script that works on classic SharePoint lists (modern lists, you should really use PowerApps to customize it). It’ll allow you to format a field row, label or the cell the value is in. Similar to:

sharepoint-format-fields.png

Yes, it’s ugly, but I wanted to highlight it plainly:

  • formatRow – allows you to format the entire field row, as seen in red above.
  • formatLabel – allows you to format the label for a field, as seen in green above.
  • formatValueCell – allows you to format the cell the value is in, as seen in blue above.

You may notice that some of the fields appear read only, that’s also included in this script, and you can learn more about it in this other post.

This script works on SharePoint 2013, 2016 and Online. I heard it works on 2010 as well, though I haven’t had much experience with it there. Let me know!

The script is here: download from GitHub.

How to use it

Include the script along with jQuery on your page. Ideally, throw this nugget into your master page and you can use it anywhere in your site.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="path/to/file/Lozzi.Fields.js"></script>

Once that’s in, get using it! It’s really simple, I threw this on my new form for my task list:


 $(document).ready(function(){
 ExecuteOrDelayUntilScriptLoaded(function(){
Lozzi.Fields.formatRow("Title", {"background-color": "#f00", "font-weight": "bold", "font-size": "34px"});
Lozzi.Fields.formatLabel("Category", {"background-color": "#0f0", "font-weight": "bold", "font-size": "14px"});
Lozzi.Fields.formatValueCell("Category", {"background-color": "#00f", "font-weight": "bold", "font-size": "14px", "color": "white"});
},"sp.js");
 });

That’ll get you that hideous color scheme shown above. Use better colors ;)

More details

When using formatRow, formatLabel, and formatValueCell, you send in 2 values:

  • field display name, just as you see it on the form.
  • css, send in the css in this JSON object format as seen above. Similar to: {"css-property-name":"value","css-property-name":"value"}

 

Til next time, Happy SharePointing!

Advertisements

One thought on “SharePoint Script: Format the List Form Field

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: