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
Multi-Line Text
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
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.
Image
Implementation: /src/components/**/Styleguide-FieldUsage-Image.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Image.sitecore.js
Plain image
Advanced image (not editable)
Srcset responsive image
File
Implementation: /src/components/**/Styleguide-FieldUsage-File.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-File.sitecore.js
Number
Implementation: /src/components/**/Styleguide-FieldUsage-Number.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Number.sitecore.js
JS value type: number
JS value: 1.21
Checkbox
Implementation: /src/components/**/Styleguide-FieldUsage-Checkbox.tsx
Definition: /sitecore/definitions/components/**/Styleguide-FieldUsage-Checkbox.sitecore.js
checkboxis truecheckbox2is 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.
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
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
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><a></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
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
trueparam type:
stringcolumns param: 5
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.
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/dictionary: This is a dictionary entry in English as a demonstration
The current language is: en