Multiroot treelist serialization in JSS and SXA

The Multiroot treelist field type has featured in SXA for a while now, but unfortunately doesn’t serialize as expected in the JSS Layout Service. As the name suggests, it presents as a Treelist and allows developers to select multiple root nodes via queries in the source of the field definition.

On a recent JSS project, we had a need for the Multiroot Treelist. As we were already using SXA for tenancies and multisite support etc, this seemed as easy as setting up our templates using the SXA “Multiroot treelist” field type and ensuring a valid datasource query was set.

A sample Mulitroot Treelist field template
A Multiroot Treelist in action

Unfortunately however, it seems that some of the fields types added in SXA don’t get serialized by the layout service. In the case of the Multiroot Treelist, the serialized results are just the selected items’ raw values (a list of IDs like the layout service sample below). The JSS documentation outlines the field types with OOTB serializers and how to create custom serializers if required.

...
"fields": {
  "Recommended Items": {
      "value": "{B432CBB8-881F-412F-AA33-684B49EB912B}|{6F0BA60E-191D-4AA1-8A44-E7EBA20BA960}|{B12AFF5B-5EB1-4FBF-BBD4-B2D744E2F809}"
  },
...

The Multiroot Treelist is a variant of a MultiList field and stores raw values in exactly the same format, so serializing it out to the layout service can be handled with existing JSS serializers. Just need to patch in the fieldtype to the correct serializer:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
    <pipelines>
      <group groupName="layoutService">
        <pipelines>
          <getFieldSerializer performanceCritical="true" >
            <processor type="Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer.GetMultilistFieldSerializer, Sitecore.LayoutService" resolve="true">
              <FieldTypes hint="list">
                <fieldType id="7">multiroot treelist</fieldType>
              </FieldTypes>
            </processor>
          </getFieldSerializer>
        </pipelines>
      </group>
    </pipelines>
  </sitecore>
</configuration>

After applying this configuration patch, Multiroot Treelist field values will be serialized as objects in the same way as Multilists, Treelists etc, rather than just the raw values. Below is an excerpt from the same layout service call used above, but notice the “Recommended Items” values have been serialized into fields.

...

"fields": {
  "Recommended Items": [
    {
      "id": "b432cbb8-881f-412f-aa33-684b49eb912b",
      "fields": {
        "articleAuthor": {
          "value": "Testy McTesterson"
        },
        ...and more! 
      }
    },
    {
      "id": "6f0ba60e-191d-4aa1-8a44-e7eba20ba960",
      "fields": {
        "articleAuthor": {
          "value": "Bloggy McBlogerson"
        },
        ...and more! 
      }
    },
    {
      "id": "b12aff5b-5eb1-4fbf-bbd4-b2d744e2f809",
      "fields": {
        "articleAuthor": {
          "value": "Authy McAuthorson"
        },
        ...and more! 
      }
    }
  ],
  ...and more! 
}

...

At a quick glance, there does appear to be some other fields introduced in SXA (eg. Tag Treelist) that may require a similar approach to ensuring they are serialized if you need these values available in the Layout Service.

One thought on “Multiroot treelist serialization in JSS and SXA

Leave a comment