Sitecore

JSS Styleguide

This is a live set of examples of how to use JSS. For more information on using JSS, please see the documentation.

The content and layout of this page is defined in /data/routes/styleguide/en.yml

Content Data

Single-Line Text

Implementation: /src/components/**/Styleguide-FieldUsage-Text.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Text.sitecore.js

This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type="text">.
This is another sample text field using rendering options. HTML supported with encode=false. Cannot edit because editable=false.
Raw value (not editable): This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type="text">.

Multi-Line Text

Multi-line text tells Sitecore to use a textarea for editing; consumption in JSS is the same as single-line text.

Implementation: /src/components/**/Styleguide-FieldUsage-Text.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Text.sitecore.js

This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea.
This is another sample multi-line text field using rendering options. HTML supported with encode=false.
Raw value (not editable): This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea.

Rich Text

Implementation: /src/components/**/Styleguide-FieldUsage-RichText.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-RichText.sitecore.js

This is a sample rich text field. HTML is always supported. In Sitecore, editors will see a WYSIWYG editor for these fields.

Another sample rich text field, using options. Keep markup entered in rich text fields as simple as possible - ideally bare tags only (no classes). Adding a wrapping class can help with styling within rich text blocks.

But you can use any valid HTML in a rich text field!

Image

Implementation: /src/components/**/Styleguide-FieldUsage-Image.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Image.sitecore.js

Plain image

Sitecore Logo

Advanced image (not editable)

Sitecore JSS Logo

Srcset responsive image

Sitecore JSS Logo

File

Note: Sitecore does not support inline editing of File fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.

Implementation: /src/components/**/Styleguide-FieldUsage-File.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-File.sitecore.js

Number

Number tells Sitecore to use a number entry for editing.

Implementation: /src/components/**/Styleguide-FieldUsage-Number.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Number.sitecore.js

1.21

JS value type: number
JS value: 1.21

Checkbox

Note: Sitecore does not support inline editing of Checkbox fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.

Implementation: /src/components/**/Styleguide-FieldUsage-Checkbox.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Checkbox.sitecore.js

  • checkbox is true
  • checkbox2 is false

Date

Both Date and DateTime field types are available. Choosing DateTime will make Sitecore show editing UI for time; both types store complete date and time values internally. Date values in JSS are formatted using ISO 8601 formatted strings, for example 2012-04-23T18:25:43.511Z.

Note: this is a JavaScript date format (e.g. new Date().toISOString()), and is different from how Sitecore stores date field values internally. Sitecore-formatted dates will not work.

Implementation: /src/components/**/Styleguide-FieldUsage-Date.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Date.sitecore.js

  • Date helper: 05/04/2012 00:00:00
  • Date helper (datetime): 03/14/2018 15:00:00
  • UTC Date string: Fri, 04 May 2012 00:00:00 GMT
  • Localized Date string (local timezone): 5/4/2012
  • Localized DateTime string (local timezone): 3/14/2018, 3:00:00 PM

General Link

A General Link is a field that represents an <a> tag.

Implementation: /src/components/**/Styleguide-FieldUsage-Link.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Link.sitecore.js

External link: Link to Sitecore
Internal link: HTML or other components can be used within link renderers, for example links to images.
Email link: Send an Email
All possible content params link: Sitecore Dev Site
The link component accepts params of its own: Link to Sitecore

Item Link

Item Links are a way to reference another content item to use data from it. Referenced items may be shared. To reference multiple content items, use a Content List field.
Note: Sitecore does not support inline editing of Item Link fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.

Implementation: /src/components/**/Styleguide-FieldUsage-ItemLink.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-ItemLink.sitecore.js

Shared Item Link

Field: ItemLink Demo (Shared) Item 1 Text Field

Local Item Link

Field: Referenced item textField

Content List

Content Lists are a way to reference zero or more other content items. Referenced items may be shared. To reference a single content item, use an Item Link field.
Note: Sitecore does not support inline editing of Content List fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.

Implementation: /src/components/**/Styleguide-FieldUsage-ContentList.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-ContentList.sitecore.js

Shared Content List

Field: ContentList Demo (Shared) Item 1 Text Field

Field: ContentList Demo (Shared) Item 2 Text Field

Local Content List

Field: Hello World Item 1

Field: Hello World Item 2

Custom Fields

Any Sitecore field type can be consumed by JSS. In this sample we consume the Integer field type.
Note: For field types with complex data, custom FieldSerializers may need to be implemented on the Sitecore side.

Implementation: /src/components/**/Styleguide-FieldUsage-Custom.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Custom.sitecore.js

31337

Layout Patterns

Reusing Content

JSS provides powerful options to reuse content, whether it's sharing a common piece of text across pages or sketching out a site with repeating lorem ipsum content.

Implementation: /src/components/**/Styleguide-Layout-Reuse.tsx
Definition: /sitecore/definitions/components/**/Styleguide-Layout-Reuse.sitecore.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.

Mix and match reused and local content. Check out /data/routes/styleguide/en.yml to see how.

Tabs

Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.

Implementation: /src/components/**/Styleguide-Layout-Tabs.tsx
Definition: /sitecore/definitions/components/**/Styleguide-Layout-Tabs.sitecore.js

Tab 1 contents!

Sitecore Patterns

Sitecore Context

The Sitecore Context contains route-level data about the current context - for example, pageState enables conditionally executing code based on whether Sitecore is in Experience Editor or not.

Implementation: /src/components/**/Styleguide-SitecoreContext.tsx
Definition: /sitecore/definitions/components/**/Styleguide-SitecoreContext.sitecore.js

The current Sitecore Context is...

{
  "route": {
    "name": "styleguide",
    "displayName": "styleguide",
    "fields": {
      "pageTitle": {
        "value": "Styleguide | Sitecore JSS"
      }
    },
    "databaseName": "web",
    "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
    "itemId": "f30a0a89-185b-569f-86c6-4d6118781983",
    "itemLanguage": "en",
    "itemVersion": 1,
    "layoutId": "1db67245-f673-5e7f-9726-e7c5e76350f1",
    "templateId": "787584c0-a057-5876-9836-f8b3708f0caf",
    "templateName": "App Route",
    "placeholders": {
      "jss-main": [
        {
          "uid": "e02ddb9b-a062-5e50-924a-1940d7e053ce",
          "componentName": "ContentBlock",
          "dataSource": "{C4BA1BA0-2D7A-5BDB-9C33-6891174EF4F6}",
          "fields": {
            "heading": {
              "value": "JSS Styleguide"
            },
            "content": {
              "value": "<p>This is a live set of examples of how to use JSS. For more information on using JSS, please see <a href=\"https://jss.sitecore.net\" target=\"_blank\" rel=\"noopener noreferrer\">the documentation</a>.</p>\n<p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>\n"
            }
          }
        },
        {
          "uid": "34a6553c-81de-5cd3-989e-853f6cb6df8c",
          "componentName": "Styleguide-Layout",
          "dataSource": "",
          "placeholders": {
            "jss-styleguide-layout": [
              {
                "uid": "b7c779da-2b75-586c-b40d-081fcb864256",
                "componentName": "Styleguide-Section",
                "dataSource": "{817990D0-305B-5A3A-B299-A85C4B9AFB58}",
                "fields": {
                  "heading": {
                    "value": "Content Data"
                  }
                },
                "placeholders": {
                  "jss-styleguide-section": [
                    {
                      "uid": "63b0c99e-dac7-5670-9d66-c26a78000eae",
                      "componentName": "Styleguide-FieldUsage-Text",
                      "dataSource": "{60027365-1468-5D8B-A2B3-1A90811CB07A}",
                      "fields": {
                        "sample": {
                          "value": "This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type=\"text\">."
                        },
                        "sample2": {
                          "value": "This is another sample text field using rendering options. <mark>HTML supported with encode=false.</mark> Cannot edit because editable=false."
                        },
                        "heading": {
                          "value": "Single-Line Text"
                        },
                        "description": {
                          "value": ""
                        }
                      }
                    },
                    {
                      "uid": "f1ea3bb5-1175-5055-ab11-9c48bf69427a",
                      "componentName": "Styleguide-FieldUsage-Text",
                      "dataSource": "{6D534938-4A6F-5A9D-A8CB-4905CE8D8922}",
                      "fields": {
                        "sample": {
                          "value": "This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea."
                        },
                        "sample2": {
                          "value": "This is another sample multi-line text field using rendering options. <mark>HTML supported with encode=false.</mark>"
                        },
                        "heading": {
                          "value": "Multi-Line Text"
                        },
                        "description": {
                          "value": "<small>Multi-line text tells Sitecore to use a <code>textarea</code> for editing; consumption in JSS is the same as single-line text.</small>"
                        }
                      }
                    },
                    {
                      "uid": "69cebc00-446b-5141-ad1e-450b8d6ee0ad",
                      "componentName": "Styleguide-FieldUsage-RichText",
                      "dataSource": "{E40B21A5-11A0-57D8-A06B-AC0E1672347E}",
                      "fields": {
                        "sample": {
                          "value": "<p>This is a sample rich text field. <mark>HTML is always supported.</mark> In Sitecore, editors will see a WYSIWYG editor for these fields.</p>"
                        },
                        "sample2": {
                          "value": "<p>Another sample rich text field, using options. Keep markup entered in rich text fields as simple as possible - ideally bare tags only (no classes). Adding a wrapping class can help with styling within rich text blocks.</p>\n<marquee>But you can use any valid HTML in a rich text field!</marquee>\n"
                        },
                        "heading": {
                          "value": "Rich Text"
                        },
                        "description": {
                          "value": ""
                        }
                      }
                    },
                    {
                      "uid": "5630c0e6-0430-5f6a-af9e-2d09d600a386",
                      "componentName": "Styleguide-FieldUsage-Image",
                      "dataSource": "{5111347E-F4DD-5CA1-A738-1FF104F5156B}",
                      "fields": {
                        "sample1": {
                          "value": {
                            "src": "https://edge-dev.sitecore-staging.cloud/xmssge2e/media/JssNextWeb/data/media/img/sc_logo.png?iar=0",
                            "alt": "Sitecore Logo"
                          }
                        },
                        "sample2": {
                          "value": {
                            "src": "https://edge-dev.sitecore-staging.cloud/xmssge2e/media/JssNextWeb/data/media/img/jss_logo.png?iar=0",
                            "alt": "Sitecore JSS Logo"
                          }
                        },
                        "heading": {
                          "value": "Image"
                        },
                        "description": {
                          "value": ""
                        }
                      }
                    },
                    {
                      "uid": "bad43ef7-8940-504d-a09b-976c17a9a30c",
                      "componentName": "Styleguide-FieldUsage-File",
                      "dataSource": "{615BF669-43D5-5C19-8311-835A31390D22}",
                      "fields": {
                        "file": {
                          "value": {
                            "src": "https://edge-dev.sitecore-staging.cloud/xmssge2e/media/JssNextWeb/data/media/files/jss.pdf",
                            "name": "jss",
                            "displayName": "jss",
                            "title": "Example File",
                            "keywords": "",
                            "description": "This data will be added to the Sitecore Media Library on import",
                            "extension": "pdf",
                            "mimeType": "application/pdf",
                            "size": "156897"
                          }
                        },
                        "heading": {
                          "value": "File"
                        },
                        "description": {
                          "value": "<small>Note: Sitecore does not support inline editing of File fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.</small>\n"
                        }
                      }
                    },
                    {
                      "uid": "ff90d4bd-e50d-5bbf-9213-d25968c9ae75",
                      "componentName": "Styleguide-FieldUsage-Number",
                      "dataSource": "{8B507D6F-FA00-5B81-BCE6-6779159FB0EA}",
                      "fields": {
                        "sample": {
                          "value": 1.21
                        },
                        "heading": {
                          "value": "Number"
                        },
                        "description": {
                          "value": "<small>Number tells Sitecore to use a number entry for editing.</small>"
                        }
                      }
                    },
                    {
                      "uid": "b5c1c74a-a81d-59b2-85d8-09bc109b1f70",
                      "componentName": "Styleguide-FieldUsage-Checkbox",
                      "dataSource": "{85E8FD70-0AE2-5AE5-A1C4-B3CEF4BC53A8}",
                      "fields": {
                        "checkbox": {
                          "value": true
                        },
                        "checkbox2": {
                          "value": false
                        },
                        "heading": {
                          "value": "Checkbox"
                        },
                        "description": {
                          "value": "<small>Note: Sitecore does not support inline editing of Checkbox fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.</small>\n"
                        }
                      }
                    },
                    {
                      "uid": "f166a7d6-9ec8-5c53-b825-33405db7f575",
                      "componentName": "Styleguide-FieldUsage-Date",
                      "dataSource": "{DAE5631C-5F04-5698-9914-E85497691713}",
                      "fields": {
                        "date": {
                          "value": "05/04/2012 00:00:00"
                        },
                        "dateTime": {
                          "value": "03/14/2018 15:00:00"
                        },
                        "heading": {
                          "value": "Date"
                        },
                        "description": {
                          "value": "<p><small>Both <code>Date</code> and <code>DateTime</code> field types are available. Choosing <code>DateTime</code> will make Sitecore show editing UI for time; both types store complete date and time values internally. Date values in JSS are formatted using <a href=\"https://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations\" target=\"_blank\">ISO 8601 formatted strings</a>, for example <code>2012-04-23T18:25:43.511Z</code>.</small></p>\n<div class=\"alert alert-warning\"><small>Note: this is a JavaScript date format (e.g. <code>new Date().toISOString()</code>), and is different from how Sitecore stores date field values internally. Sitecore-formatted dates will not work.</small></div>\n"
                        }
                      }
                    },
                    {
                      "uid": "56a9562a-6813-579b-8ed2-fddab1bfd3d2",
                      "componentName": "Styleguide-FieldUsage-Link",
                      "dataSource": "{0A412AE6-BC87-5C70-8B56-343760DFF757}",
                      "fields": {
                        "externalLink": {
                          "value": {
                            "href": "https://www.sitecore.com",
                            "text": "Link to Sitecore",
                            "url": "https://www.sitecore.com",
                            "linktype": "external"
                          }
                        },
                        "internalLink": {
                          "value": {
                            "href": "/en/",
                            "linktype": "internal",
                            "id": "{45BE1451-FA83-5F80-9F0D-D7457B480B58}"
                          }
                        },
                        "emailLink": {
                          "value": {
                            "href": "mailto:foo@bar.com",
                            "text": "Send an Email",
                            "url": "mailto:foo@bar.com",
                            "linktype": "mailto"
                          }
                        },
                        "paramsLink": {
                          "value": {
                            "href": "https://dev.sitecore.net",
                            "target": "_blank",
                            "text": "Sitecore Dev Site",
                            "title": "<a> title attribute",
                            "url": "https://dev.sitecore.net",
                            "class": "font-weight-bold",
                            "linktype": "external"
                          }
                        },
                        "heading": {
                          "value": "General Link"
                        },
                        "description": {
                          "value": "<p>A <em>General Link</em> is a field that represents an <code>&lt;a&gt;</code> tag.</p>"
                        }
                      }
                    },
                    {
                      "uid": "a44ad1f8-0582-5248-9df9-52429193a68b",
                      "componentName": "Styleguide-FieldUsage-ItemLink",
                      "dataSource": "{BE4DEF3A-0CCE-5A9E-ABA4-391F803BA6BF}",
                      "fields": {
                        "sharedItemLink": {
                          "id": "1b50f644-4619-5d91-8242-2972eeaf0637",
                          "url": "/Content/Styleguide/ItemLinkField/Item1",
                          "name": "Item1",
                          "displayName": "Styleguide Item Link Item 1 (Shared)",
                          "fields": {
                            "textField": {
                              "value": "ItemLink Demo (Shared) Item 1 Text Field"
                            }
                          }
                        },
                        "localItemLink": {
                          "id": "1160e399-e377-5035-9b65-d16ac313b9c0",
                          "url": "/styleguide/Page-Components/styleguide-jss-styleguide-section-B73482E131E5A083D77A50554BC74A4758E29636DF6824F6E2F272EE778C28A095/styleguide-jss-styleguide-section-B75151F05CFDC4CAFFE44E5BAED9D59BEA82565EC11CE75B7DEF3634495EC1DAB7",
                          "name": "styleguide-jss-styleguide-section-B75151F05CFDC4CAFFE44E5BAED9D59BEA82565EC11CE75B7DEF3634495EC1DAB7",
                          "displayName": "Styleguide-FieldUsage-ItemLink-10-item-0",
                          "fields": {
                            "textField": {
                              "value": "Referenced item textField"
                            }
                          }
                        },
                        "heading": {
                          "value": "Item Link"
                        },
                        "description": {
                          "value": "<p>\n  <small>\n    Item Links are a way to reference another content item to use data from it.\n    Referenced items may be shared.\n    To reference multiple content items, use a <em>Content List</em> field.<br />\n    <strong>Note:</strong> Sitecore does not support inline editing of Item Link fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.\n  </small>\n</p>\n"
                        }
                      }
                    },
                    {
                      "uid": "2f609d40-8ad9-540e-901e-23aa2600f3eb",
                      "componentName": "Styleguide-FieldUsage-ContentList",
                      "dataSource": "{83C7CE6E-DC1B-5C06-BD65-4150F2E63A74}",
                      "fields": {
                        "sharedContentList": [
                          {
                            "id": "e5755ba2-993a-5320-8bdd-cc6e426562be",
                            "url": "/Content/Styleguide/ContentListField/Item1",
                            "name": "Item1",
                            "displayName": "Styleguide Content List Item 1 (Shared)",
                            "fields": {
                              "textField": {
                                "value": "ContentList Demo (Shared) Item 1 Text Field"
                              }
                            }
                          },
                          {
                            "id": "5727d290-372e-5c2c-865a-757df3036180",
                            "url": "/Content/Styleguide/ContentListField/Item2",
                            "name": "Item2",
                            "displayName": "Styleguide Content List Item 2 (Shared)",
                            "fields": {
                              "textField": {
                                "value": "ContentList Demo (Shared) Item 2 Text Field"
                              }
                            }
                          }
                        ],
                        "localContentList": [
                          {
                            "id": "8ff821ea-4d78-5233-967b-8625c34f0580",
                            "url": "/styleguide/Page-Components/styleguide-jss-styleguide-section-B7985C8DEA10AB2C5CC77ABC90CF4126F21840592E09B2C6DB07D84D314CDCE0D4/styleguide-jss-styleguide-section-B7BF1F3509A82A38C71B36F25C4E58E2D04EC965C308A1147E993853137210F241",
                            "name": "styleguide-jss-styleguide-section-B7BF1F3509A82A38C71B36F25C4E58E2D04EC965C308A1147E993853137210F241",
                            "displayName": "Styleguide-FieldUsage-ContentList-11-item-0",
                            "fields": {
                              "textField": {
                                "value": "Hello World Item 1"
                              }
                            }
                          },
                          {
                            "id": "5f636e60-f031-5ff0-940f-9375ce2ec3cd",
                            "url": "/styleguide/Page-Components/styleguide-jss-styleguide-section-B7985C8DEA10AB2C5CC77ABC90CF4126F21840592E09B2C6DB07D84D314CDCE0D4/styleguide-jss-styleguide-section-B76CB8FB6A660296D91AE50FD7559AF62453A1891C9828A22C84E7E2A9914E7DD8",
                            "name": "styleguide-jss-styleguide-section-B76CB8FB6A660296D91AE50FD7559AF62453A1891C9828A22C84E7E2A9914E7DD8",
                            "displayName": "Styleguide-FieldUsage-ContentList-11-item-1",
                            "fields": {
                              "textField": {
                                "value": "Hello World Item 2"
                              }
                            }
                          }
                        ],
                        "heading": {
                          "value": "Content List"
                        },
                        "description": {
                          "value": "<p>\n  <small>\n    Content Lists are a way to reference zero or more other content items.\n    Referenced items may be shared.\n    To reference a single content item, use an <em>Item Link</em> field.<br />\n    <strong>Note:</strong> Sitecore does not support inline editing of Content List fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.\n  </small>\n</p>\n"
                        }
                      }
                    },
                    {
                      "uid": "352ed63d-796a-5523-89f5-9a991dda4a8f",
                      "componentName": "Styleguide-FieldUsage-Custom",
                      "dataSource": "{D6BF4938-9EDE-5611-99A4-B209DD3693E0}",
                      "fields": {
                        "customIntField": {
                          "value": 31337
                        },
                        "heading": {
                          "value": "Custom Fields"
                        },
                        "description": {
                          "value": "<p>\n  <small>\n    Any Sitecore field type can be consumed by JSS.\n    In this sample we consume the <em>Integer</em> field type.<br />\n    <strong>Note:</strong> For field types with complex data, custom <code>FieldSerializer</code>s may need to be implemented on the Sitecore side.\n  </small>\n</p>\n"
                        }
                      }
                    }
                  ]
                }
              },
              {
                "uid": "7de41a1a-24e4-5963-8206-3bb0b7d9dd69",
                "componentName": "Styleguide-Section",
                "dataSource": "{D4C6D60C-417A-54C7-833D-6F1EB9682621}",
                "fields": {
                  "heading": {
                    "value": "Layout Patterns"
                  }
                },
                "placeholders": {
                  "jss-styleguide-section": [
                    {
                      "uid": "3a5d9c50-d8c1-5a12-8da8-5d56c2a5a69a",
                      "componentName": "Styleguide-Layout-Reuse",
                      "dataSource": "{25BD5874-3041-58BB-A40D-E0C2D3819087}",
                      "fields": {
                        "heading": {
                          "value": "Reusing Content"
                        },
                        "description": {
                          "value": "<p>JSS provides powerful options to reuse content, whether it's sharing a common piece of text across pages or sketching out a site with repeating <em>lorem ipsum</em> content.</p>"
                        }
                      },
                      "placeholders": {
                        "jss-reuse-example": [
                          {
                            "uid": "aa328b8a-d6e1-5b37-8143-250d2e93d6b8",
                            "componentName": "ContentBlock",
                            "dataSource": "{5ACB6E9D-48FE-5744-A419-3D01E1D85A63}",
                            "fields": {
                              "heading": {
                                "value": ""
                              },
                              "content": {
                                "value": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>"
                              }
                            }
                          },
                          {
                            "uid": "c4330d34-623c-556c-bf4c-97c93d40fb1e",
                            "componentName": "ContentBlock",
                            "dataSource": "{5ACB6E9D-48FE-5744-A419-3D01E1D85A63}",
                            "fields": {
                              "heading": {
                                "value": ""
                              },
                              "content": {
                                "value": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>"
                              }
                            }
                          },
                          {
                            "uid": "a42d8b1c-193d-5627-9130-f7f7f87617f1",
                            "componentName": "ContentBlock",
                            "dataSource": "{4A37AB53-83E5-5530-9491-B41EAF325D9E}",
                            "fields": {
                              "heading": {
                                "value": ""
                              },
                              "content": {
                                "value": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>"
                              }
                            }
                          },
                          {
                            "uid": "0f4cb47a-979e-5139-b50b-a8e40c73c236",
                            "componentName": "ContentBlock",
                            "dataSource": "{6DA833CD-E5D9-5FF0-9CB6-39EAD3E80328}",
                            "fields": {
                              "heading": {
                                "value": ""
                              },
                              "content": {
                                "value": "<p>Mix and match reused and local content. Check out <code>/data/routes/styleguide/en.yml</code> to see how.</p>"
                              }
                            }
                          }
                        ]
                      }
                    },
                    {
                      "uid": "538e4831-f157-50bb-ac74-277fcac9fddb",
                      "componentName": "Styleguide-Layout-Tabs",
                      "dataSource": "{9A118561-DB56-542A-A876-553BBA28DB57}",
                      "fields": {
                        "heading": {
                          "value": "Tabs"
                        },
                        "description": {
                          "value": "<p>Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.</p>"
                        }
                      },
                      "placeholders": {
                        "jss-tabs": [
                          {
                            "uid": "7ecb2ed2-ac9b-58d1-8365-10ca74824af7",
                            "componentName": "Styleguide-Layout-Tabs-Tab",
                            "dataSource": "{C2BEE41E-2321-5C2C-BB8C-4890C1B45D4D}",
                            "fields": {
                              "title": {
                                "value": "Tab 1"
                              },
                              "content": {
                                "value": "<p>Tab 1 contents!</p>"
                              }
                            }
                          },
                          {
                            "uid": "afd64900-0a61-50eb-a674-a7a884e0d496",
                            "componentName": "Styleguide-Layout-Tabs-Tab",
                            "dataSource": "{E61853A9-B832-51E6-8F83-4B27A0F6CC7E}",
                            "fields": {
                              "title": {
                                "value": "Tab 2"
                              },
                              "content": {
                                "value": "<p>Tab 2 contents!</p>"
                              }
                            }
                          },
                          {
                            "uid": "44c12983-3a84-5462-84c0-6ca1430050c8",
                            "componentName": "Styleguide-Layout-Tabs-Tab",
                            "dataSource": "{86787E20-5996-542A-8962-EFE30E77829F}",
                            "fields": {
                              "title": {
                                "value": "Tab 3"
                              },
                              "content": {
                                "value": "<p>Tab 3 contents!</p>"
                              }
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                "uid": "2d806c25-dd46-51e3-93de-63cf9035122c",
                "componentName": "Styleguide-Section",
                "dataSource": "{C945E9DC-BB3B-5368-99ED-7535EC0A2D1A}",
                "fields": {
                  "heading": {
                    "value": "Sitecore Patterns"
                  }
                },
                "placeholders": {
                  "jss-styleguide-section": [
                    {
                      "uid": "471fa16a-bb82-5c42-9c95-e7eab1e3bd30",
                      "componentName": "Styleguide-SitecoreContext",
                      "dataSource": "{C2DDC715-691F-56FC-AF1D-0C18D8C489AA}",
                      "fields": {
                        "heading": {
                          "value": "Sitecore Context"
                        },
                        "description": {
                          "value": "<p><small>The Sitecore Context contains route-level data about the current context - for example, <code>pageState</code> enables conditionally executing code based on whether Sitecore is in Experience Editor or not.</small></p>"
                        }
                      }
                    },
                    {
                      "uid": "21f21053-8f8a-5436-bc79-e674e246a2fc",
                      "componentName": "Styleguide-RouteFields",
                      "dataSource": "{F05586EF-903F-5CDC-836E-A28E418E9F31}",
                      "fields": {
                        "heading": {
                          "value": "Route-level Fields"
                        },
                        "description": {
                          "value": "<p><small>Route-level content fields are defined on the <em>route</em> instead of on a <em>component</em>. This allows multiple components to share the field data on the same route - and querying is much easier on route level fields, making <em>custom route types</em> ideal for filterable/queryable data such as articles.</small></p>"
                        }
                      }
                    },
                    {
                      "uid": "a0a66136-c21f-52e8-a2ea-f04dcfa6a027",
                      "componentName": "Styleguide-ComponentParams",
                      "dataSource": "{66A2ABF7-9648-5066-928E-8B0E1A52F0B8}",
                      "params": {
                        "cssClass": "alert alert-success",
                        "columns": "5",
                        "useCallToAction": "true"
                      },
                      "fields": {
                        "heading": {
                          "value": "Component Params"
                        },
                        "description": {
                          "value": "<p><small>Component params (also called Rendering Parameters) allow storing non-content parameters for a component. These params should be used for more technical options such as CSS class names or structural settings.</small></p>"
                        }
                      }
                    },
                    {
                      "uid": "7f765fcb-3b10-58fd-8aa7-b346ef38c9bb",
                      "componentName": "Styleguide-Tracking",
                      "dataSource": "{F455774B-A81C-55A1-BFEB-3F27E341F093}",
                      "fields": {
                        "heading": {
                          "value": "Tracking"
                        },
                        "description": {
                          "value": "<p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>"
                        }
                      }
                    }
                  ]
                }
              },
              {
                "uid": "66af8f03-0b52-5425-a6af-6fb54f2d64d9",
                "componentName": "Styleguide-Section",
                "dataSource": "{637F1143-BD22-5491-A248-2D869F96BE55}",
                "fields": {
                  "heading": {
                    "value": "Multilingual Patterns"
                  }
                },
                "placeholders": {
                  "jss-styleguide-section": [
                    {
                      "uid": "cf1b5d2b-c949-56e7-9594-66afaceaca9d",
                      "componentName": "Styleguide-Multilingual",
                      "dataSource": "{A3BD0193-F97E-58BF-909E-64E9A3E50D75}",
                      "fields": {
                        "sample": {
                          "value": "This text can be translated in en.yml"
                        },
                        "heading": {
                          "value": "Translation Patterns"
                        },
                        "description": {
                          "value": ""
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "itemId": "f30a0a89-185b-569f-86c6-4d6118781983",
  "pageEditing": false,
  "site": {
    "name": "JssNextWeb"
  },
  "pageState": "normal",
  "language": "en",
  "itemPath": "/styleguide"
}

Route-level Fields

Route-level content fields are defined on the route instead of on a component. This allows multiple components to share the field data on the same route - and querying is much easier on route level fields, making custom route types ideal for filterable/queryable data such as articles.

Implementation: /src/components/**/Styleguide-RouteFields.tsx
Definition: /sitecore/definitions/components/**/Styleguide-RouteFields.sitecore.js

Route level pageTitle field: Styleguide | Sitecore JSS

Sample of using a custom route type

Component Params

Component params (also called Rendering Parameters) allow storing non-content parameters for a component. These params should be used for more technical options such as CSS class names or structural settings.

Implementation: /src/components/**/Styleguide-ComponentParams.tsx
Definition: /sitecore/definitions/components/**/Styleguide-ComponentParams.sitecore.js

The CSS class of this paragraph (alert alert-success) is set using a param

useCallToAction param: true
param type: string
the call to action is shown

columns param: 5

Column 0
Column 1
Column 2
Column 3
Column 4

Tracking

JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.

Implementation: /src/components/**/Styleguide-Tracking.tsx
Definition: /sitecore/definitions/components/**/Styleguide-Tracking.sitecore.js

Note: The JSS tracker API is disabled by default. Consult the tracking documentation to enable it.

Event

Events are defined in /sitecore/system/Settings/Analytics/Page Events

Goal

Goals are defined in /sitecore/system/Marketing Control Panel/Goals

Outcome

Outcomes are defined in /sitecore/system/Marketing Control Panel/Outcomes


Campaign

Campaigns are defined in /sitecore/system/Marketing Control Panel/Campaigns

Page View

Track arbitrary page views for custom routing or offline use. Note that Layout Service tracks page views by default unless tracking=false is passed in its query string.


Batching

The tracking API supports pushing a whole batch of events in a single request. This can be useful for queuing strategies or offline PWA usage.

Interaction Control

Tracking data is not pushed into the xConnect service until your session ends on the Sitecore server. Click this button to instantly end your session and flush the data - great for debugging and testing.

Note: By default anonymous contacts will not be shown in Experience Profile. If your interactions are not showing up in Experience Profile, you may need to enable anonymous contact indexing.

Multilingual Patterns

Translation Patterns

Implementation: /src/components/**/Styleguide-Multilingual.tsx
Definition: /sitecore/definitions/components/**/Styleguide-Multilingual.sitecore.js

This text can be translated in en.yml

This is a static dictionary entry from /data/dictionaryThis is a dictionary entry in English as a demonstration

Show in English
Show in Danish

The current language is: en