Skip to content

Commit 1fa313d

Browse files
Update v15
1 parent 8f12f16 commit 1fa313d

File tree

1 file changed

+22
-20
lines changed
  • 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor

1 file changed

+22
-20
lines changed

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ If you are using ModelsBuilder, you can make the property rendering strongly typ
277277

278278
Using the default rendering together with your layout stylesheet will provide what you need for rendering the layout.
279279

280-
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`.
280+
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`.
281281

282282
```csharp
283283
<link rel="stylesheet" href="@Url.Content("~/css/blockgridlayout.css")" />
@@ -366,7 +366,7 @@ To make additions or overwrite parts of the default layout stylesheet, import th
366366
@import 'css/umbblockgridlayout.css';
367367
```
368368

369-
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`.
369+
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`.
370370

371371
### Write a new Layout Stylesheet
372372

@@ -462,7 +462,7 @@ Building Custom Views for Block representations in Backoffice is based on the sa
462462

463463
In this example, we will be creating content programmatically for a "spot" Blocks in a Block Grid.
464464

465-
1. On a document type add a property called **blockGrid**.
465+
1. On a Document Type add a property called **blockGrid**.
466466
2. Then add as editor **Block Grid**.
467467
3. In the Block Grid add a new block and click to **Create new Element Type**
468468
4. Name this element type **spotElement** with the following properties:
@@ -610,11 +610,10 @@ public class BlockGridLayoutItem
610610
// this represents an item in the block grid content or settings data collection
611611
public class BlockGridElementData
612612
{
613-
public BlockGridElementData(Guid contentTypeKey, Udi udi, Dictionary<string, object> data)
613+
public BlockGridElementData(Guid contentTypeKey, Udi udi)
614614
{
615615
ContentTypeKey = contentTypeKey;
616616
Udi = udi;
617-
Data = data;
618617
}
619618

620619
[JsonPropertyName("contentTypeKey")]
@@ -624,17 +623,13 @@ public class BlockGridElementData
624623
public Udi Udi { get; }
625624

626625
[JsonExtensionData]
627-
public Dictionary<string, object> Data { get; }
626+
public Dictionary<string, object>? Data { get; }
628627
}
629628
```
630629
{% endcode %}
631630

632631
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:
633632

634-
{% hint style="warning" %}
635-
The example below uses UmbracoApiController which is obsolete in Umbraco 14 and will be removed in Umbraco 15.
636-
{% endhint %}
637-
638633
{% code title="BlockGridTestController.cs" lineNumbers="true" %}
639634
```csharp
640635
using Microsoft.AspNetCore.Mvc;
@@ -643,10 +638,11 @@ using Umbraco.Cms.Core;
643638
using Umbraco.Cms.Core.Models;
644639
using Umbraco.Cms.Core.Serialization;
645640
using Umbraco.Cms.Core.Services;
646-
using Umbraco.Cms.Web.Common.Controllers;
647641

648642
namespace My.Site.Controllers;
649643

644+
[ApiController]
645+
[Route("/umbraco/api/blockgridtest")]
650646
public class BlockGridTestController : UmbracoApiController
651647
{
652648
private readonly IContentService _contentService;
@@ -661,11 +657,11 @@ public class BlockGridTestController : UmbracoApiController
661657
}
662658

663659
// POST: /umbraco/api/blockgridtest/create
664-
[HttpPost]
660+
[HttpPost("create")]
665661
public ActionResult Create()
666662
{
667663
// get the item content to modify
668-
IContent? content = _contentService.GetById(1203);
664+
IContent? content = _contentService.GetById(Guid.Parse("efba7b97-91b6-4ddf-b2cc-eef89ff48c3b"));
669665
if (content == null)
670666
{
671667
return NotFound("Could not find the content item to modify");
@@ -700,17 +696,23 @@ public class BlockGridTestController : UmbracoApiController
700696
layoutItems.Add(new BlockGridLayoutItem(contentUdi, settingsUdi, data.ColumnSpan, data.RowSpan));
701697

702698
// create new content data
703-
spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi, new Dictionary<string, object>
699+
spotContentData.Add(new BlockGridElementData(spotContentType.Key, contentUdi)
704700
{
705-
{ "title", data.Title },
706-
{ "text", data.Text },
707-
}));
701+
Data = new Dictionary<string, object>
702+
{
703+
{ "title", data.Title },
704+
{ "text", data.Text },
705+
}
706+
});
708707

709708
// create new settings data
710-
spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi, new Dictionary<string, object>
709+
spotSettingsData.Add(new BlockGridElementData(spotSettingsType.Key, settingsUdi)
711710
{
712-
{ "featured", data.Featured ? "1" : "0" },
713-
}));
711+
Data = new Dictionary<string, object>
712+
{
713+
{ "featured", data.Featured ? "1" : "0" },
714+
}
715+
});
714716
}
715717

716718
// construct the block grid data from layout, content and settings

0 commit comments

Comments
 (0)