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:
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!
RSS - Posts