View Formatting Tool

Recently I have been asked about view formatting. This could be a subject that a power user or functional specialist could do, but does require knowledge of html, css and json. As I was looking into view formatting, I found the samples that can be found at GitHub sp-dev-list-formatting.

As it is more difficult to work with these json files that with html, I quickly implemented this conversion tool. This tool allows you to convert view formatting json to html and html to view formatting json. So now you can just paste the json of a sample, and convert it to html, then edit the html and convert that back to view formatting json. You can also just start out with some html (using inline style or adding Office UI Fabric classes) and generate the formatting json. Remember that the html must contain only one top level dom element. Once you click Generate JSON or HTML, you also get a (updated) preview.

Just use place holder element for column values, enclosed in brackets and starting with a dollar sign, and then the internal name of the property, for example [$Title]. Please look at the documentation for more in detail information at view formatting. Currently only the following elements are supported (but this tool doesn't check this): div, button, span, a, img, svg, path.

Please note that you need to click one of the buttons for refreshing the content. Remember that clicking the button overwrites the current content, so don't click the wrong button, or you will lose your changes. It would be best to copy your content in a code editor, make changes there, and then use this tool to generate the json and preview the html.

View Formatting HTML

View Formatting JSON

Disclaimer: I have tried to maintain configuration from the view formatting json in the generated html, however I haven't fully tested this to check every available option. So please be aware that it might be possible that formatting elements could get removed, and might need to be added back manually. Also, new features might be added in the future that this tool does not (yet) takes into account, so this tool is for usage AS IS.

If you are also interested in column formatting, there are also samples of this on GitHub. Also, there is a excellent SPFx webpart to help out with column formatting created by The Chris Kent, this can also be found on GitHub at ColumnFormatter.

Update:

Today (10/23/2018), I have used this tool for the first time for creating an actual view. With this, I noticed a few thing. First, if the html had indentation my script added txtContent with spaces, also it seems that txtContent and children should be used in an exclusive manner, in other words, don't use txtContent when you have children.

A second thing I noticed, was that if txtContent is filled with content and a field, the field is not replaced. So fields should be placed exclusively in a dom element. It should be possible to use span tags for the content before the field, then one for the field ("txtContent": "[$Title]") and one for the content after that field.

Finally I had to add a user profile photo in the view, unfortunately the .picture property of the person object was empty. When trying an other solution I also found out that using a field within an if statement it must be the only content or else it will not be replaced. Luckily there is an easy work-a-round for that, and that is to use the + sign. So if you want to show a profile picture, based on a person field, you can use the following json:

"src": "=if([$Person.sip] == '', '', '/_layouts/15/userphoto.aspx?size=M&accountname=' + '[$Person.sip]')"

Come to think of it, it might also be possible to just use:

"src": "='/_layouts/15/userphoto.aspx?size=M&accountname=' + '[$Person.sip]'"

I have updated the tool so it is more robust in dealing with indentation/white-spaces. Also just as a reminder, if you start from scratch with html, you probably need to add "hideSelection": true, "hideListHeader": true, to the json. One other thing to mention, the preview does not work in IE, it does work in FireFox and Chrome.

Update:

Today (10/30/2018) I have updated the tool to also enable preview in IE and Edge.