Field values in JSS layout data
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:
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.
When the editor is active, the editable value contains all of the additional markup the editor emits for the field.
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.