Field Name Type Checking / Formatting in Rendering Contents Resolvers

Cover Image for Field Name Type Checking / Formatting in Rendering Contents Resolvers

Overview

Transport of key value pairs is a new challenge in the world of headless Sitecore. Specifically, wherever the worlds of front end and back end collide in the form of APIs that transmit JSON data. The top considerations are:

  • Type checking / safety
  • Developer experience
  • Maintainability
  • Consistency
  • Following naming conventions for different areas of the codebase

One example of the changing paradigm is that in the past, spaces were common in template field names. These days, not so much; especially with the rise of JSS, where field names are camel cased. In JS, its much easier to work with camel cased field names (JSON object keys) as compared to ones with spaces.

This was something I brought up on SSE a while back: https://sitecore.stackexchange.com/questions/33790/jss-template-field-names-how-to-automatically-serialize-field-names-in-camelcas

Type Checking / Formatting Example

Here is a useful example of how to type check field names when specifying a key for a key value pair in a Rendering Contents Resolver. This is useful when you want to ensure that the field name you're using is correct and that it matches the expected JSON format.


_16
using Newtonsoft.Json;
_16
using Newtonsoft.Json.Linq;
_16
using Newtonsoft.Json.Serialization;
_16
_16
...
_16
_16
// Not type checked
_16
myJObject["isbnNumber"] = someValue;
_16
_16
// Type checked
_16
myJObject[nameof(YourTemplateOrFieldClass.Fields.IsbnNumber)] = someValue;
_16
_16
return JObject.FromObject(myJObject,
_16
JsonSerializer.Create(new JsonSerializerSettings {
_16
ContractResolver = new CamelCasePropertyNamesContractResolver()
_16
}));

By employing nameof(), we create a direct reference to the field. This means if the field's name ever changes, the compiler will notify us immediately of any discrepancies. This is okay if you have full control over both and if your coding standards match the expected JSON naming conventions (CamelCase in this case). If not, you may end up with JSON that doesn't match the expected format.

Keep cruising,

MG


More Stories

Cover Image for Early Returns in React Components

Early Returns in React Components

> When and how should you return early in a React component?

Cover Image for Sitecore Symposium 2022

Sitecore Symposium 2022

> What I'm Watching 👀

Cover Image for Add TypeScript Type Checks to RouteData fields

Add TypeScript Type Checks to RouteData fields

> Inspired by error: Conversion of type may be a mistake because neither type sufficiently overlaps with the other.

Cover Image for Super Fast Project Builds with Visual Studio Publish

Super Fast Project Builds with Visual Studio Publish

> For when solution builds take too long

Cover Image for How to Run Old Versions of Solr in a Docker Container

How to Run Old Versions of Solr in a Docker Container

> Please don't make me install another version of Solr on my local...

Cover Image for JSS: Reducing Bloat in Multilist Field Serialization

JSS: Reducing Bloat in Multilist Field Serialization

> Because: performance, security, and error-avoidance

Cover Image for Content Editor Search Bar Not Working

Content Editor Search Bar Not Working

> Sometimes it works, sometimes not

Cover Image for Tips for Forms Implementations

Tips for Forms Implementations

> And other pro tips

Cover Image for On Mentorship and Community Contributions

On Mentorship and Community Contributions

> Reflections and what I learned as an MVP mentor

Cover Image for Azure PaaS Cache Optimization

Azure PaaS Cache Optimization

> App Services benefit greatly from proper configuration

Cover Image for On Sitecore Stack Exchange (SSE)

On Sitecore Stack Exchange (SSE)

> What I've learned, what I see, what I want to see

Cover Image for NextJS: Unable to Verify the First Certificate

NextJS: Unable to Verify the First Certificate

> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Cover Image for Hello World

Hello World

> Welcome to the show

Cover Image for NextJS: Short URL for Viewing Layout Service Response

NextJS: Short URL for Viewing Layout Service Response

> Because the default URL is 2long4me

Cover Image for Ideas For Docker up.ps1 Scripts

Ideas For Docker up.ps1 Scripts

> Because Docker can be brittle

Cover Image for NextJS: Access has been blocked by CORS policy

NextJS: Access has been blocked by CORS policy

> CORS is almost as much of a nuisance as GDPR popups

Cover Image for Don't Ignore the HttpRequestValidationException

Don't Ignore the HttpRequestValidationException

> Doing so could be... potentially dangerous

Cover Image for NextJS/JSS Edit Frames Before JSS v21.1.0

NextJS/JSS Edit Frames Before JSS v21.1.0

> It is possible. We have the technology.

Cover Image for Symposium 2022 Reflections

Symposium 2022 Reflections

> Sitecore is making big changes

Cover Image for JSS + TypeScript Sitecore Project Tips

JSS + TypeScript Sitecore Project Tips

> New tech, new challenges

Cover Image for SPE Script Performance & Troubleshooting

SPE Script Performance & Troubleshooting

> Script never ends or runs too slow? Get in here.

Cover Image for Year in Review: 2022

Year in Review: 2022

> Full steam ahead

Cover Image for Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

> It's probably time to overhaul your processes

Cover Image for Tips for New Sitecore Developers

Tips for New Sitecore Developers

> Because learning Sitecore can be hard

Cover Image for Script: Boost SIF Certificate Expiry Days

Script: Boost SIF Certificate Expiry Days

> One simple script that definitely won't delete your system32 folder