This past week I was working on a project and wanted to provide a better user experience when adding a list item, dividing the form into multiple parts and custom header / footer. I have done JSON formatting in the past but never on the form so I was excited to see what was possible. I did notice some inconsistencies with how the form configuration renders the JSON versus how views and columns work.

Before I hop into things to consider here is a link to the current documentation on configuring custom forms with JSON: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration.

debugMode

In the documentation you will see a property called debugMode and it is set to true. If you leave this set to true and you reference a column that does not have a value within it you will see an error message on the screen. However, simply setting the value to false or removing the property altogether will resolve this.

debugMode: truedebugMode: true
debugMode: falsedebugMode: false

Customize form using the display form

This one was super annoying because I was working in an environment with MCAS that prevented copying and pasting so everything was hand typed out. When you go to customize your form you need to do it from the display form of the item. The option is available in the new form and edit form as well but any changes made here will not be save and you will need to make them again.

I really wish Microsoft would hide those controls or put in a message that lets users know, hey this won’t save any changes in the new and edit form experiences. However for now simply try to remember or double check which experience you are in when customizing the form.

Referencing URL / Hyperlink field

Normally when working with JSON formatting you can reference the URL portion of a Hyperlink field simply by referencing the internal field name and if you need access to the description field you can reference the internal name.desc, example myURLField and myURLField.desc.

In testing I noticed that the reference to the URL field itself was passing back a concatenation of both the URL and Description portion of the field and reference the .desc portion of the field did nothing. After doing some digging around I notice that the fields are being passed correctly through the REST API but the JavaScript for the custom forms is doing the concatenation together.

This means you need to use the substring and indexOf functions to be able to pull back only the URL.

json
"=substring('[$myURLField]', 0, indexOf([$myURLField],','))"

Column order

The order that columns appear in a section is not derived by the order in the fields array but rather the order that is defined in the lists settings. This may be a bit counter intuitive and cause some confusion when trying to have the columns follow a specific order but once you realize what controls the order it is an easy enough fix.

Conclusion

All in all JSON formatting is a quick and easy way to add additional value to your overall solution with a little bit of effort. It satisfies the basic need for customization and allows you to enhance the user experience without implementing a Power App Form or going fully custom with SPFx.

AaaS - Anthony as a Service