Field values in JSS layout data

Current version: 19.x

When requesting layout data, the values returned for Sitecore fields must support two use cases. First, it must support the rendering of the fields. Second, it must support the editing of the fields in Sitecore editors.

To address these requirements, the values for Sitecore fields have two formats in the layout data returned from Sitecore:

RequestResponse
fields: {
  [fieldName]: {
    value: '',
    editable: '',
  }
}

Raw values for rendering content

The value property of a field object contains the raw, unrendered value of a field stored in Sitecore.

The Image and Link fields are an exception because they have slightly more complex structures. For example, the value property of an Image field is an object containing the image-specific attributes src, alt, width, and height.

Editable values

The editable property of a field object contains the result of the renderField pipeline for the field. As you might expect, this means the editable property might contain a different value depending on whether or not the data is fetched while the route is accessed using a Sitecore editor, such as Experience Editor or Horizon.

When the editor is active, the editable value contains all of the additional markup the editor emits for the field.

Note

When you make a layout request, you can use the sc_mode query string parameter in the URL with a value of edit or normal to toggle between editing or normal rendering modes. This can be helpful when debugging.

When the editor is not active, the editable property contains the rendered field value - which might differ from the raw field value for certain field types, such as Image, Rich Text, or Link, or if the renderField pipeline has been extended/customized.

Do you have some feedback for us?

If you have suggestions for improving this article,