Add a JSON rendering and variant to your page

Abstract

Construct your pages by dragging JSON renderings from the Toolbox to the page.

The JSON data model comes with three predefined renderings to make page design easy. You can construct your pages by dragging renderings from the Toolbox to the page. All JSON renderings are JSON variants enabled.

By default, there are three JSON renderings available:

  • JSON Content – used to expose fields of a page using JSON renderings and JSON variants. By default, this rendering loads two fields on the page. You can edit these fields.

  • JSON List – displays lists of pages by predefined or composed queries.

  • JSON Results – displays the results of a search query.

Before you can start working with the JSON renderings, you must switch to the JSON device.

To switch to the JSON device:

  • In the Experience Editor, on the ribbon, on the Experience tab, click Default, and then click JSON.

    218E3E462E324D4FBB1F8FFEB8AD519A.png

The JSON renderings are now available for you to use in the Toolbox in the right panel.

2ACE3821660C49B88FDE1E895DA89D83.png

Note

If you work on a touch device, such as a tablet or a touch-enabled laptop, by default the Toolbox opens in touch mode. If you work on a touch-enabled laptop, you can switch to desktop mode by clicking the arrow in the upper right of the toolbar DCCD0E70EC5E41EF80C7CC3ABCE9C684.png.

In the Experience Editor, you can add a rendering to a page by dragging it from the Toolbox. For example, if you want to list the pages of your site use the JSON List rendering.

To add a JSON rendering to a page:

  1. In the Toolbox in the right panel, find the relevant rendering. When you click and start dragging a rendering, the placeholders where you can drop the rendering light up in blue. Click to drop the rendering on the page. For example, drag the JSON List rendering to the page.

    Note

    By default, the JSON List rendering displays the children of the current item. For example, when you start on your home page and drag the JSON List rendering to the page, it lists all the pages of your site. This is because the SourceType field by default is set to Children.

    718AE6B36DCD47D5A45428AFC9094250.png
  2. To see the list, save the page:

    BCE8A982E6E440179481177AA5A1181F.png

To build a more complex list, you can add a JSON variant. For example, if besides the title and content, you want to add a field for the image and a date.

To add a JSON variant:

  1. Navigate to sitecore/Content/Tenant/Site/Presentation/Rendering Variants/JSON List, right-click JSON List, click Insert, and click JSON Variant definition.

  2. Enter a name and click OK. For example, to add JSON fields for the title and the content, add a JSON Image, and a JSON Date field.

    D8D1C9AC056844F69F0CF3E39E0C194C.png
  3. In the Variant details section, select the date format and save the item.

    208E92783BD34F26A49EB50AEFD4EBBB.png
  4. For the Image field, in the Variant details section, decide whether you want the image to display in Guid, Path, Raw, or Rendered mode.

    4675C2B919CA47BE88E7BBE2A6C34128.png

To select a JSON variant:

  1. In the Experience Editor, navigate to the JSON rendering on the page, for example, the JSON List rendering, and in the Variant field click the variant from the drop-down list.

    07BCECBCC7344493BF2336FC4CA20259.png
  2. To view the new list, save the page.

    236DBC40E5DA42A79123BADA5CC7FB3F.png
  3. To view the JSON variant, on the ribbon, on the Experience tab, click Other, and click Preview.

    D2DDEC0237334A83AEA624BA64E61905.png