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
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Text.astro
textarea for editing; consumption in JSS is the same as single-line text.
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Text.astro
Implementation: /src/components/styleguide/Styleguide-FieldUsage-RichText.astro
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.
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Image.astro
Plain image
Advanced image
Implementation: /src/components/styleguide/Styleguide-FieldUsage-AstroImage.astro
Plain image
Advanced image
Implementation: /src/components/styleguide/Styleguide-FieldUsage-File.astro
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Number.astro
JS value type: number
JS value: 1.21
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Checkbox.astro
checkbox is truecheckbox2 is falseBoth 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/Styleguide-FieldUsage-Date.astro
A General Link is a field that represents an <a> tag.
Implementation: /src/components/styleguide/Styleguide-FieldUsage-Link.astro
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/Styleguide-FieldUsage-ItemLink.astro
Field: ItemLink Demo (Shared) Item 1 Text Field
Field: Referenced item textField
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/Styleguide-FieldUsage-ContentList.astro
Field: ContentList Demo (Shared) Item 1 Text Field
Field: ContentList Demo (Shared) Item 2 Text Field
Field: Hello World Item 1
Field: Hello World Item 2
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/Styleguide-FieldUsage-Custom.astro
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/Styleguide-Layout-Reuse.astro
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.
Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.
Implementation: /src/components/styleguide/Styleguide-Layout-Tabs.astro
Implementation: /src/components/styleguide/Styleguide-Layout-Tabs-Tab.astro
Tab 1 contents!
Implementation: /src/components/styleguide/Styleguide-Layout-Tabs-Tab.astro
Tab 2 contents!
Implementation: /src/components/styleguide/Styleguide-Layout-Tabs-Tab.astro
Tab 3 contents!
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/Styleguide-SitecoreContext.astro
The current Sitecore Context is...
{
"pageEditing": false,
"site": {
"name": "astro"
},
"pageState": "normal",
"language": "en",
"itemPath": "/styleguideExtended",
"route": {
"name": "styleguideExtended",
"displayName": "styleguide extended",
"fields": {
"pageTitle": {
"value": "Styleguide | Sitecore JSS"
}
},
"databaseName": "master",
"deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
"itemId": "236087ce-515b-43b9-a444-4b312dfcfd5e",
"itemLanguage": "en",
"itemVersion": 1,
"layoutId": "aafff035-f506-4549-8e0a-d933f2e256c8",
"templateId": "a3a87cb0-f4b2-591e-8823-ea73bb367bcd",
"templateName": "App Route",
"placeholders": {
"jss-main": [
{
"uid": "e02ddb9b-a062-5e50-924a-1940d7e053ce",
"componentName": "ContentBlock",
"dataSource": "{946EC924-40AF-4F59-B34C-9177DD824923}",
"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.com\" target=\"_blank\" rel=\"noopener noreferrer\">the documentation</a>.</p>\r\n<p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>\r\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": "{62F0FFE2-3541-4552-8AE5-573D6712A177}",
"fields": {
"heading": {
"value": "Content Data"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "63b0c99e-dac7-5670-9d66-c26a78000eae",
"componentName": "Styleguide-FieldUsage-Text",
"dataSource": "{7E71EEE4-2221-4D6B-990C-9DEEBFF839E0}",
"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": "{9442D4E9-739A-4B00-B016-981C5BC6B367}",
"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": "{3B146765-ABC9-4F55-B241-E89B5B2A958B}",
"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>\r\n<marquee>But you can use any valid HTML in a rich text field!</marquee>\r\n"
},
"heading": {
"value": "Rich Text"
},
"description": {
"value": ""
}
}
},
{
"uid": "d83e8ce9-98f2-499b-bab8-41b5a9d89294",
"componentName": "Styleguide-FieldUsage-Image",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/Styleguide-FieldUsage-Image-4",
"fields": {
"sample1": {
"value": {
"src": "https://astro.headless.localhost/-/media/Project/Headless/Astro/data/media/img/sc_logo.png?h=51&iar=0&w=204&hash=B6413A92C4BF91B8098626472D255279",
"alt": "Sitecore Logo",
"width": "204",
"height": "51"
}
},
"sample2": {
"value": {
"src": "https://astro.headless.localhost/-/media/Project/Headless/Astro/data/media/img/jss_logo.png?h=160&iar=0&w=300&hash=891FFB326B613CBC9EB58FF3B57E3C40",
"alt": "Sitecore JSS Logo",
"width": "300",
"height": "160"
}
},
"heading": {
"value": "Image"
},
"description": {
"value": ""
}
}
},
{
"uid": "5630c0e6-0430-5f6a-af9e-2d09d600a386",
"componentName": "Styleguide-FieldUsage-AstroImage",
"dataSource": "{43DCB57D-2DEB-4C47-9D05-69525D943203}",
"fields": {
"sample1": {
"value": {
"src": "https://astro.headless.localhost/-/media/Project/Headless/Astro/data/media/img/sc_logo.png?h=51&iar=0&w=204&hash=B6413A92C4BF91B8098626472D255279",
"alt": "Sitecore Logo",
"width": "204",
"height": "51"
}
},
"sample2": {
"value": {
"src": "https://astro.headless.localhost/-/media/Project/Headless/Astro/data/media/img/jss_logo.png?h=160&iar=0&w=300&hash=891FFB326B613CBC9EB58FF3B57E3C40",
"alt": "Sitecore JSS Logo",
"width": "300",
"height": "160"
}
},
"heading": {
"value": "Astro Image"
},
"description": {
"value": ""
}
}
},
{
"uid": "bad43ef7-8940-504d-a09b-976c17a9a30c",
"componentName": "Styleguide-FieldUsage-File",
"dataSource": "{BEF24C4F-84CF-4662-826F-DC92FC9BC3F8}",
"fields": {
"file": {
"value": {
"src": "https://astro.headless.localhost/-/media/Project/Headless/Astro/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>\r\n"
}
}
},
{
"uid": "ff90d4bd-e50d-5bbf-9213-d25968c9ae75",
"componentName": "Styleguide-FieldUsage-Number",
"dataSource": "{152C0B04-8699-472F-B08C-5034B986695C}",
"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": "{699BF526-50C9-4DBE-962F-BC79D3F4B106}",
"fields": {
"checkbox2": {
"value": false
},
"checkbox": {
"value": true
},
"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>\r\n"
}
}
},
{
"uid": "f166a7d6-9ec8-5c53-b825-33405db7f575",
"componentName": "Styleguide-FieldUsage-Date",
"dataSource": "{B043460D-1CE7-465D-90D2-20F1540FBB7E}",
"fields": {
"date": {
"value": "2012-05-04T00:00:00Z"
},
"dateTime": {
"value": "2018-03-14T15:00:00Z"
},
"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>\r\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>\r\n"
}
}
},
{
"uid": "56a9562a-6813-579b-8ed2-fddab1bfd3d2",
"componentName": "Styleguide-FieldUsage-Link",
"dataSource": "{792ECCA7-F105-46D1-9A64-19FCBAA33A18}",
"fields": {
"emailLink": {
"value": {
"href": "mailto:foo@bar.com",
"linktype": "mailto",
"text": "Send an Email",
"url": "mailto:foo@bar.com"
}
},
"externalLink": {
"value": {
"href": "https://www.sitecore.com",
"linktype": "external",
"text": "Link to Sitecore",
"url": "https://www.sitecore.com"
}
},
"internalLink": {
"value": {
"text": "",
"anchor": "",
"linktype": "internal",
"class": "",
"title": "",
"target": "",
"querystring": "",
"id": "{7B4913AE-F499-5976-BDB3-58517D48A67E}",
"href": "/"
}
},
"paramsLink": {
"value": {
"href": "https://dev.sitecore.net",
"class": "fw-bold",
"target": "_blank",
"title": "<a> title attribute",
"linktype": "external",
"text": "Sitecore Dev Site",
"url": "https://dev.sitecore.net"
}
},
"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": "{35A56E4A-E5E1-4E11-A306-67A5190C40B1}",
"fields": {
"localItemLink": {
"id": "e4dd8ec1-ebd7-5332-af9b-8cf7220e0295",
"url": "/styleguide/Page-Data/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"
}
}
},
"sharedItemLink": {
"id": "2d5d5db2-8cf6-5450-95a4-a2c023b4ff05",
"url": "/Content/Styleguide/ItemLinkField/Item1",
"name": "Item1",
"displayName": "Styleguide Item Link Item 1 (Shared)",
"fields": {
"textField": {
"value": "ItemLink Demo (Shared) Item 1 Text Field"
}
}
},
"heading": {
"value": "Item Link"
},
"description": {
"value": "<p>\r\n <small>\r\n Item Links are a way to reference another content item to use data from it.\r\n Referenced items may be shared.\r\n To reference multiple content items, use a <em>Content List</em> field.<br />\r\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.\r\n </small>\r\n</p>\r\n"
}
}
},
{
"uid": "2f609d40-8ad9-540e-901e-23aa2600f3eb",
"componentName": "Styleguide-FieldUsage-ContentList",
"dataSource": "{FDA6624B-D9F9-4DCB-A867-FC014B2F5FA9}",
"fields": {
"localContentList": [
{
"id": "f7fc43d4-b3ec-550d-b2fd-401787a0f2a8",
"url": "/styleguide/Page-Data/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": "d80fb03a-0229-5e3b-9e22-caf1b9d880c5",
"url": "/styleguide/Page-Data/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"
}
}
}
],
"sharedContentList": [
{
"id": "179431e1-53ed-5b7d-aaf4-dbcf826ff55e",
"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": "f9702c27-170b-5e97-ab61-933333961539",
"url": "/Content/Styleguide/ContentListField/Item2",
"name": "Item2",
"displayName": "Styleguide Content List Item 2 (Shared)",
"fields": {
"textField": {
"value": "ContentList Demo (Shared) Item 2 Text Field"
}
}
}
],
"heading": {
"value": "Content List"
},
"description": {
"value": "<p>\r\n <small>\r\n Content Lists are a way to reference zero or more other content items.\r\n Referenced items may be shared.\r\n To reference a single content item, use an <em>Item Link</em> field.<br />\r\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.\r\n </small>\r\n</p>\r\n"
}
}
},
{
"uid": "352ed63d-796a-5523-89f5-9a991dda4a8f",
"componentName": "Styleguide-FieldUsage-Custom",
"dataSource": "{48526F6A-0174-4228-80F4-33A9B546DF04}",
"fields": {
"customIntField": {
"value": 31337
},
"heading": {
"value": "Custom Fields"
},
"description": {
"value": "<p>\r\n <small>\r\n Any Sitecore field type can be consumed by JSS.\r\n In this sample we consume the <em>Integer</em> field type.<br />\r\n <strong>Note:</strong> For field types with complex data, custom <code>FieldSerializer</code>s may need to be implemented on the Sitecore side.\r\n </small>\r\n</p>\r\n"
}
}
}
]
}
},
{
"uid": "7de41a1a-24e4-5963-8206-3bb0b7d9dd69",
"componentName": "Styleguide-Section",
"dataSource": "{4C893B3E-AD0E-4711-9E89-477B1EE6CA61}",
"fields": {
"heading": {
"value": "Layout Patterns"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "3a5d9c50-d8c1-5a12-8da8-5d56c2a5a69a",
"componentName": "Styleguide-Layout-Reuse",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/styleguide-jss-styleguide-section-7DE41A1A-24E4-5963-8206-3BB0B7D9DD69-0-Styleguide-Layout-Reuse-1",
"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": "{FBB4448A-0AC7-5284-BCFB-0A4FCB437F90}",
"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": "{FBB4448A-0AC7-5284-BCFB-0A4FCB437F90}",
"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": "{9FE585E2-592F-41AA-AC93-08D3D0504167}",
"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": "{48B17E19-23DB-4FBF-8CE6-848F9693ECAE}",
"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": "{183D9738-DCEA-4880-8FE6-8D73E9D688C4}",
"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": "{2F30B06C-633F-4C68-98BA-1397B6BC9F0D}",
"fields": {
"content": {
"value": "<p>Tab 1 contents!</p>"
},
"title": {
"value": "Tab 1"
}
}
},
{
"uid": "afd64900-0a61-50eb-a674-a7a884e0d496",
"componentName": "Styleguide-Layout-Tabs-Tab",
"dataSource": "{075A95DF-AB0D-4EF4-BB59-5787E9ED1B53}",
"fields": {
"content": {
"value": "<p>Tab 2 contents!</p>"
},
"title": {
"value": "Tab 2"
}
}
},
{
"uid": "44c12983-3a84-5462-84c0-6ca1430050c8",
"componentName": "Styleguide-Layout-Tabs-Tab",
"dataSource": "{4E4BFBE2-EB14-481A-A462-6503E07E020B}",
"fields": {
"content": {
"value": "<p>Tab 3 contents!</p>"
},
"title": {
"value": "Tab 3"
}
}
}
]
}
}
]
}
},
{
"uid": "2d806c25-dd46-51e3-93de-63cf9035122c",
"componentName": "Styleguide-Section",
"dataSource": "{2484E0E9-DBDE-450F-A44A-74A426BB19FC}",
"fields": {
"heading": {
"value": "Sitecore Patterns"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "471fa16a-bb82-5c42-9c95-e7eab1e3bd30",
"componentName": "Styleguide-SitecoreContext",
"dataSource": "{0CE3897D-94E6-4B0A-A648-EDD556371C02}",
"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": "{864481F2-D4B5-4E6B-987D-1B4CE31915A7}",
"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": "{98EAB751-E892-4729-A675-9D524A6F8551}",
"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": "66af8f03-0b52-5425-a6af-6fb54f2d64d9",
"componentName": "Styleguide-Section",
"dataSource": "{4DFFA09D-A70D-46FF-8C8D-81F36FF5D6D8}",
"fields": {
"heading": {
"value": "Multilingual Patterns"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "cf1b5d2b-c949-56e7-9594-66afaceaca9d",
"componentName": "Styleguide-Multilingual",
"dataSource": "{F243895A-6210-4907-A0A4-0939A01ACA2F}",
"fields": {
"sample": {
"value": "This text can be translated in en.yml"
},
"heading": {
"value": "Translation Patterns"
},
"description": {
"value": ""
}
}
}
]
}
},
{
"uid": "2f510a65-174b-55b0-be5a-42f223a1d30a",
"componentName": "Styleguide-Section",
"dataSource": "{3BCE33DE-C628-4158-8FD1-EBFCD0775DBA}",
"fields": {
"heading": {
"value": "Editing"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "727fd742-c75d-5f49-b108-5595e9257c0e",
"componentName": "Styleguide-EditFrame",
"dataSource": "{9440472F-01FF-49C1-B9EB-9BAEF5218E9A}",
"fields": {
"applyRedToText": {
"value": false
},
"description": {
"value": "<p>Who framed Roger Rabbit? Hard to say. <br /> But JSS now allows to edit frame any piece of content on a page in editing mode. <br /> You can add web edit or field edit buttons, modify edit frame style through CSS class and put the frame wherever you need it. </p>"
},
"heading": {
"value": "Edit Frame"
},
"sampleList": [
{
"id": "bfeb639c-c5cf-5775-b17f-f7ea8fa8702e",
"url": "/Content/Styleguide/EditFrameDemo/Item1",
"name": "Item1",
"displayName": "EditFrame Demo List Item 1",
"fields": {
"title": {
"value": "Edit Frame Demo List Item 1"
}
}
},
{
"id": "f31eb77e-6f89-53c3-b1d9-03e29172be25",
"url": "/Content/Styleguide/EditFrameDemo/Item2",
"name": "Item2",
"displayName": "EditFrame Demo List Item 2",
"fields": {
"title": {
"value": "Edit Frame Demo List Item 2"
}
}
}
]
}
}
]
}
},
{
"uid": "008a2f5b-4ba0-45fb-91ca-3342c1c70791",
"componentName": "Styleguide-Section",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/Styleguide-Section-Integrations",
"params": {
"GridParameters": "col-12"
},
"fields": {
"heading": {
"value": "Integrations"
}
},
"placeholders": {
"jss-styleguide-section": [
{
"uid": "aada0da8-e002-41f5-9fb0-fd9144c8c00e",
"componentName": "Styleguide-ReactUsage-Simple",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/Styleguide-React-Simple",
"params": {
"CacheClearingBehavior": "Clear on publish"
},
"fields": {
"heading": {
"value": "React Simple Components Usage"
},
"description": {
"value": "<a href=\"https://docs.astro.build/en/guides/integrations-guide/react/\">React components can be used on you Astro website</a>"
}
}
},
{
"uid": "7f55270f-6224-4e7e-aaaa-53a2683e987c",
"componentName": "Styleguide-ReactUsage-Sitecore",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/Styleguide-ReactUsage-Sitecore",
"params": {
"CacheClearingBehavior": "Clear on publish"
},
"fields": {
"heading": {
"value": "React Sitecore JSS Rendering"
},
"description": {
"value": "<p>React components can render Sitecore fields.</p>"
}
}
},
{
"uid": "07eb65dc-d5b1-43c8-91da-97e8b50a8930",
"componentName": "Styleguide-ReactUsage-Sitecore-Placeholder",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/Styleguide-React-Sitecore-Placeholder",
"params": {
"CacheClearingBehavior": "Clear on publish"
},
"fields": {
"heading": {
"value": "React Sitecore JSS Rendering in React Placeholder"
},
"description": {
"value": "<p>React components can use React Placeholder inside. You can place one react component inside a placeholder.</p>"
}
},
"placeholders": {
"react": [
{
"uid": "c4db4146-9103-4fca-a846-81a0f7a7f84c",
"componentName": "React-ContentBlock",
"dataSource": "/sitecore/content/Headless/Astro/home/styleguideExtended/Page Data/React-ContentBlock-1",
"params": {
"CacheClearingBehavior": "Clear on publish"
},
"fields": {
"heading": {
"value": "React Content Block inside React Placeholder"
},
"description": {
"value": "<p>It is even possible to user Placeholder insider React components. However, it is on recommended.</p>"
}
},
"placeholders": {
"react": []
}
}
]
}
}
]
}
}
]
}
}
]
}
},
"itemId": "236087ce-515b-43b9-a444-4b312dfcfd5e"
}
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/Styleguide-RouteFields.astro
Route level pageTitle field:
Styleguide | Sitecore JSS
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/Styleguide-ComponentParams.astro
The CSS class of this paragraph (alert alert-success) is set using a param
true
string
columns param: 5
Implementation: /src/components/styleguide/Styleguide-Multilingual.astro
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
Who framed Roger Rabbit? Hard to say.
But JSS now allows to edit frame any piece of content on a page in editing mode.
You can add web edit or field edit buttons, modify edit frame style through CSS class and put the frame wherever you need it.
Implementation: /src/components/styleguide/Styleguide-EditFrame.astro
This text will change color. Use the field edit button to change its appearance
This list can be changed via field editor:
Implementation: /src/components/styleguide/Styleguide-ReactUsage-Simple.astro
React components can render Sitecore fields.
Implementation: /src/components/styleguide/Styleguide-ReactUsage-Sitecore.astro
React components can render Sitecore fields.
React components can use React Placeholder inside. You can place one react component inside a placeholder.
Implementation: /src/components/styleguide/Styleguide-ReactUsage-Sitecore-Placeholder.astro