From 5712a35cb0c80227dcc30f8a4896a82b9869d287 Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Thu, 3 Oct 2024 11:07:36 +0200 Subject: [PATCH 1/6] Change document type to Document Type --- .../block-editor/block-grid-editor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index c426aebffe8..8c6350f3fd9 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -462,7 +462,7 @@ Building Custom Views for Block representations in Backoffice is based on the sa In this example, we will be creating content programmatically for a "spot" Blocks in a Block Grid. -1. On a document type add a property called **blockGrid**. +1. On a Document Type add a property called **blockGrid**. 2. Then add as editor **Block Grid**. 3. In the Block Grid add a new block and click to **Create new Element Type** 4. Name this element type **spotElement** with the following properties: From 2e439e4781007e92dae68aac1b3ccf40d764fea1 Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Thu, 3 Oct 2024 13:12:18 +0200 Subject: [PATCH 2/6] Update BlockGridElementData and BlockGridTestController --- .../block-editor/block-grid-editor.md | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 8c6350f3fd9..6fa691b1496 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -610,11 +610,10 @@ public class BlockGridLayoutItem // this represents an item in the block grid content or settings data collection public class BlockGridElementData { - public BlockGridElementData(Guid contentTypeKey, Udi udi, Dictionary data) + public BlockGridElementData(Guid contentTypeKey, Udi udi) { ContentTypeKey = contentTypeKey; Udi = udi; - Data = data; } [JsonPropertyName("contentTypeKey")] @@ -624,7 +623,7 @@ public class BlockGridElementData public Udi Udi { get; } [JsonExtensionData] - public Dictionary Data { get; } + public Dictionary? Data { get; } } ``` {% endcode %} @@ -643,11 +642,12 @@ using Umbraco.Cms.Core; using Umbraco.Cms.Core.Models; using Umbraco.Cms.Core.Serialization; using Umbraco.Cms.Core.Services; -using Umbraco.Cms.Web.Common.Controllers; namespace My.Site.Controllers; -public class BlockGridTestController : UmbracoApiController +[ApiController] +[Route("/umbraco/api/blockgridtest")] +public class BlockGridTestController : Controller { private readonly IContentService _contentService; private readonly IContentTypeService _contentTypeService; @@ -661,11 +661,11 @@ public class BlockGridTestController : UmbracoApiController } // POST: /umbraco/api/blockgridtest/create - [HttpPost] + [HttpPost("create")] public ActionResult Create() { // get the item content to modify - IContent? content = _contentService.GetById(1203); + IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b")); if (content == null) { return NotFound("Could not find the content item to modify"); @@ -700,17 +700,23 @@ public class BlockGridTestController : UmbracoApiController layoutItems.Add(new BlockGridLayoutItem(contentUdi, settingsUdi, data.ColumnSpan, data.RowSpan)); // create new content data - spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi, new Dictionary + spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi) { - { "title", data.Title }, - { "text", data.Text }, - })); + Data = new Dictionary + { + { "title", data.Title }, + { "text", data.Text }, + } + }); // create new settings data - spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi, new Dictionary + spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi) { - { "featured", data.Featured ? "1" : "0" }, - })); + Data = new Dictionary + { + { "featured", data.Featured ? "1" : "0" }, + } + }); } // construct the block grid data from layout, content and settings From 61103f486dce61003a444b85e092233e91e099e8 Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Thu, 3 Oct 2024 13:13:34 +0200 Subject: [PATCH 3/6] Remove obsolete message --- .../block-editor/block-grid-editor.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 6fa691b1496..26476bea0ec 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -630,10 +630,6 @@ public class BlockGridElementData 9. By injecting [ContentService](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Services.ContentService.html) and [ContentTypeService](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Services.ContentTypeService.html) into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item. Create a class called **BlockGridTestController.cs** containing the following: -{% hint style="warning" %} -The example below uses UmbracoApiController which is obsolete in Umbraco 14 and will be removed in Umbraco 15. -{% endhint %} - {% code title="BlockGridTestController.cs" lineNumbers="true" %} ```csharp using Microsoft.AspNetCore.Mvc; From 8f12f16e73d057b83cbbb231fcc0efc9d368a2fc Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Thu, 3 Oct 2024 13:15:22 +0200 Subject: [PATCH 4/6] css to `css` --- .../block-editor/block-grid-editor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 26476bea0ec..a8a74a62ad5 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -277,7 +277,7 @@ If you are using ModelsBuilder, you can make the property rendering strongly typ Using the default rendering together with your layout stylesheet will provide what you need for rendering the layout. -If you like to use the Default Layout Stylesheet, you must copy the stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. +If you like to use the Default Layout Stylesheet, you must copy the stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the `css` folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. ```csharp @@ -366,7 +366,7 @@ To make additions or overwrite parts of the default layout stylesheet, import th @import 'css/umbblockgridlayout.css'; ``` -You need to copy the Default Layout Stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. +You need to copy the Default Layout Stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the `css` folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. ### Write a new Layout Stylesheet From 1fa313d5255b940df24259efc3e4f23e4c519a44 Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Thu, 3 Oct 2024 13:18:43 +0200 Subject: [PATCH 5/6] Update v15 --- .../block-editor/block-grid-editor.md | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index c426aebffe8..777967af75b 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -277,7 +277,7 @@ If you are using ModelsBuilder, you can make the property rendering strongly typ Using the default rendering together with your layout stylesheet will provide what you need for rendering the layout. -If you like to use the Default Layout Stylesheet, you must copy the stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. +If you like to use the Default Layout Stylesheet, you must copy the stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the `css` folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. ```csharp @@ -366,7 +366,7 @@ To make additions or overwrite parts of the default layout stylesheet, import th @import 'css/umbblockgridlayout.css'; ``` -You need to copy the Default Layout Stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the css folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. +You need to copy the Default Layout Stylesheet to your frontend. You can download the default layout stylesheet from the link within the DataType, we recommend putting the file in the `css` folder, example: `wwwroot/css/umbraco-blockgridlayout.css`. ### Write a new Layout Stylesheet @@ -462,7 +462,7 @@ Building Custom Views for Block representations in Backoffice is based on the sa In this example, we will be creating content programmatically for a "spot" Blocks in a Block Grid. -1. On a document type add a property called **blockGrid**. +1. On a Document Type add a property called **blockGrid**. 2. Then add as editor **Block Grid**. 3. In the Block Grid add a new block and click to **Create new Element Type** 4. Name this element type **spotElement** with the following properties: @@ -610,11 +610,10 @@ public class BlockGridLayoutItem // this represents an item in the block grid content or settings data collection public class BlockGridElementData { - public BlockGridElementData(Guid contentTypeKey, Udi udi, Dictionary data) + public BlockGridElementData(Guid contentTypeKey, Udi udi) { ContentTypeKey = contentTypeKey; Udi = udi; - Data = data; } [JsonPropertyName("contentTypeKey")] @@ -624,17 +623,13 @@ public class BlockGridElementData public Udi Udi { get; } [JsonExtensionData] - public Dictionary Data { get; } + public Dictionary? Data { get; } } ``` {% endcode %} 9. By injecting [ContentService](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Services.ContentService.html) and [ContentTypeService](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Services.ContentTypeService.html) into an API controller, we can transform the raw data into Block Grid JSON. It can then be saved to the target content item. Create a class called **BlockGridTestController.cs** containing the following: -{% hint style="warning" %} -The example below uses UmbracoApiController which is obsolete in Umbraco 14 and will be removed in Umbraco 15. -{% endhint %} - {% code title="BlockGridTestController.cs" lineNumbers="true" %} ```csharp using Microsoft.AspNetCore.Mvc; @@ -643,10 +638,11 @@ using Umbraco.Cms.Core; using Umbraco.Cms.Core.Models; using Umbraco.Cms.Core.Serialization; using Umbraco.Cms.Core.Services; -using Umbraco.Cms.Web.Common.Controllers; namespace My.Site.Controllers; +[ApiController] +[Route("/umbraco/api/blockgridtest")] public class BlockGridTestController : UmbracoApiController { private readonly IContentService _contentService; @@ -661,11 +657,11 @@ public class BlockGridTestController : UmbracoApiController } // POST: /umbraco/api/blockgridtest/create - [HttpPost] + [HttpPost("create")] public ActionResult Create() { // get the item content to modify - IContent? content = _contentService.GetById(1203); + IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b")); if (content == null) { return NotFound("Could not find the content item to modify"); @@ -700,17 +696,23 @@ public class BlockGridTestController : UmbracoApiController layoutItems.Add(new BlockGridLayoutItem(contentUdi, settingsUdi, data.ColumnSpan, data.RowSpan)); // create new content data - spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi, new Dictionary + spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi) { - { "title", data.Title }, - { "text", data.Text }, - })); + Data = new Dictionary + { + { "title", data.Title }, + { "text", data.Text }, + } + }); // create new settings data - spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi, new Dictionary + spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi) { - { "featured", data.Featured ? "1" : "0" }, - })); + Data = new Dictionary + { + { "featured", data.Featured ? "1" : "0" }, + } + }); } // construct the block grid data from layout, content and settings From 133c9e088e3b882a81194ecb8e530660cb4af385 Mon Sep 17 00:00:00 2001 From: Erik-Jan Westendorp Date: Mon, 21 Oct 2024 10:00:03 +0200 Subject: [PATCH 6/6] Add setter --- .../block-editor/block-grid-editor.md | 2 +- .../block-editor/block-grid-editor.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index a8a74a62ad5..d07423c21d1 100644 --- a/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/14/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -623,7 +623,7 @@ public class BlockGridElementData public Udi Udi { get; } [JsonExtensionData] - public Dictionary? Data { get; } + public Dictionary? Data { get; set;} } ``` {% endcode %} diff --git a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md index 777967af75b..403d1696571 100644 --- a/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md +++ b/15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md @@ -623,7 +623,7 @@ public class BlockGridElementData public Udi Udi { get; } [JsonExtensionData] - public Dictionary? Data { get; } + public Dictionary? Data { get; set;} } ``` {% endcode %}