Use the SXA Layout Service to model your pages in JSON

Current version: 1.7

SXA enables you to model your data in JSON (JavaScript Object Notation). For example, if you want to build a mobile app and feed it with SXA content, you can edit the JSON content on the page and have output content in JSON instead of HTML. You can use special renderings to build JSON layout but if your website uses default renderings, you can use the SXA Layout Service to return placeholders and data source items in JSON.

The SXA Layout Service uses serializers to render the JSON content. There is a generic serializer for all renderings that use variants and there are specific serializers for some of the renderings. You can view the settings in the Layout Service section of your rendering. For example, there is a Navigation serializer for the Navigation rendering:

View your pages in JSON

To switch to the JSON device:

In the Experience Editor, on the ribbon, on the Experience tab, click Default, and then click JSON.
To view the JSON, on the ribbon, on the Experience tab, click Other, and click Preview.

The flat list in JSON represents the tree structure of your page. For example, if your page contains the page list rendering:

Or an image:

Note

If you applied personalization rules to your webpage, these are also displayed in JSON. For example, if you add a rule to hide a rendering under certain conditions.

Filter JSON data using search parameters

You can view and access the JSON data that is returned to every page through the URL.

To filter JSON data using search parameters:

In Preview mode, to make JSON data search calls, add query parameters in your browser's address bar. You must start each query with a question mark (?) and separate each query parameter with the ampersand (&) character. Values are comma separated.

You can filter your search by component type (sc_filter_name), placeholder (sc_filter_path), and component ID (sc_filter_id).

For example:

Query	Description
RequestResponse `= /home?sc_device=json&sc_filter_path=/leftph/menu`	Returns a rendering based on a placeholder.
RequestResponse `= /home?sc_device=json&sc_filter_id=content,spot1`	Returns renderings with the ID content and spot1 from the /home page.
RequestResponse `= /home?sc_device=json&sc_filter_name=richtext`	Returns renderings of type richtext from the /home page.
RequestResponse `= /home?sc_device=json&sc_filter_path=content&sc_filter_name=richtext`	Returns renderings of type richtext in placeholder content from the /home page.

Do you have some feedback for us?

If you have suggestions for improving this article,