You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md
+12-15Lines changed: 12 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,7 @@ To set up the Block Grid property editor, follow these steps:
37
37
38
38
You will see the configuration options for a Block Grid property editor as shown below:
39
39
40
-
40
+
41
41
42
42
The Data Type editor allows you to configure the following properties:
43
43
@@ -55,7 +55,7 @@ Block Types are based on [**Element Types**](../../../../data/defining-content/#
55
55
56
56
Once you have added an Element Type as a Block Type on your Block Grid Data Type you have the option to configure it.
57
57
58
-
58
+
59
59
60
60
### Groups
61
61
@@ -72,7 +72,7 @@ Customize the user experience for your content editors when they work with the B
72
72
***Label** - Defines a label for the appearance of the Block in the editor. The label can use AngularJS template-string-syntax to display values of properties.
73
73
74
74
{% hint style="info" %}
75
-
Label example: "My Block \{=myPropertyAlias\}" will be shown as: "My Block FooBar".
75
+
Label example: "My Block {=myPropertyAlias}" will be shown as: "My Block FooBar".
76
76
{% endhint %}
77
77
78
78
***Content model** - Presents the Element Type used as model for the Content section of this Block. This cannot be changed but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.
@@ -126,11 +126,11 @@ To scale an Area, click and drag the scale-button in the bottom-right corner of
126
126
***Grid Columns for Areas** - Overwrites the amount of columns used for the Area grid.
127
127
***Areas** - Determines whether the Block can be created inside Areas of other Blocks.
133
+
134
134
135
135
***Alias** - The alias is used to identify this Area. It is being printed by `GetBlockGridHTML()` and used as name for the Area slot in Custom Views. The alias is also available for CSS Selectors to target the HTML-Element representing an Area.
136
136
***Create Button Label** - Overwrites the Create Button Label of the Area.
@@ -157,33 +157,33 @@ Notice that any styling of a Block is scoped. This means that the default backof
157
157
158
158
When viewing a **Block Grid** property editor in the **Content** section for the first time, you will be presented with the option to **Add content**.
The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance.
167
167
168
-
168
+
169
169
170
170
Click the Block Type you wish to create and a new Block will appear in the layout.
171
171
172
172
More Blocks can be added to the layout by clicking the Add content button. Alternatively, use the Add content button that appears on hover to add new Blocks between, besides, or above the existing Blocks.
Blocks can be rearranged using the click and drag feature. Move them up or down to place them in the desired order.
183
183
184
184
Moving a Block from one Area to another is done in the same way. If a Block is not allowed in the given position, the area will display a red color and not allow the new position.
@@ -452,7 +452,7 @@ For example: You can use the below HTML structure:
452
452
453
453
Building Custom Views for Block representations in Backoffice is based on the same API for all Block Editors.
454
454
455
-
[Read about building a Custom View for Blocks here](build-custom-view-for-blocks.md)
455
+
[Read about building a Custom View for Blocks here](../../../../../customizing/extending-overview/extension-types/block-custom-view.md)
456
456
457
457
## Creating a Block Grid programmatically
458
458
@@ -540,7 +540,6 @@ All `contentData` and `layoutData` entries need their own unique `Udi` as well a
540
540
8. First and foremost, we need models to transform the raw data into Block Grid compatible JSON. Create a class called **Model.cs** containing the following:
541
541
542
542
{% code title="Models.cs" lineNumbers="true" %}
543
-
544
543
```csharp
545
544
usingUmbraco.Cms.Core;
546
545
usingSystem.Text.Json.Serialization;
@@ -623,13 +622,11 @@ public class BlockGridElementData
623
622
publicDictionary<string, object>? Data { get; set;}
624
623
}
625
624
```
626
-
627
625
{% endcode %}
628
626
629
627
9. By injecting [ContentService](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Core.Services.ContentService.html) and [ContentTypeService](https://apidocs.umbraco.com/v15/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:
Copy file name to clipboardExpand all lines: 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor.md
+9-13Lines changed: 9 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ To set up your Block List Editor property, create a new _Data Type_ and select *
24
24
25
25
Then you will see the configuration options for a Block List as shown below.
26
26
27
-
27
+
28
28
29
29
The Data Type editor allows you to configure the following properties:
30
30
@@ -41,7 +41,7 @@ Block Types are **Element Types** which need to be created before you can start
41
41
42
42
Once you have added an element type as a Block Type on your Block List Data Type you will have the option to configure it further.
43
43
44
-
44
+
45
45
46
46
Each Block has a set of properties that are optional to configure. They are described below.
47
47
@@ -81,31 +81,31 @@ These properties are relevant when you work with custom views.
81
81
82
82
When viewing a **Block List** editor in the Content section for the first time, you will be presented with the option to Add content.
83
83
84
-
84
+
85
85
86
86
Clicking the Add content button brings up the Block Catalogue.
87
87
88
-
88
+
89
89
90
90
The Block Catalogue looks different depending on the amount of available Blocks and their catalogue appearance.
91
91
92
-
92
+
93
93
94
94
Click the Block Type you wish to create and a new Block will appear in the list.
95
95
96
96
Depending on whether your Block List Editor is setup to use default or inline editing mode you will see one of the following things happening:
97
97
98
98
In default mode you will enter the editing overlay of that Block:
99
99
100
-
100
+
101
101
102
102
In inline editing mode the new Blocks will expand to show its inline editor:
103
103
104
-
104
+
105
105
106
106
More Blocks can be added to the list by clicking the Add content button or using the inline Add content button that appears on hover between or above existing Blocks.
107
107
108
-
108
+
109
109
110
110
To reorder the Blocks, click and drag a Block up or down to place in the desired order.
A built-in value converter is available to use the data as you like. Call the `Value<T>` method with a generic type of `IEnumerable<BlockListItem>` and the stored value will be returned as a list of `BlockListItem` entities.
@@ -251,4 +247,4 @@ If you know the Block List Editor only uses a single block, you can cast the col
251
247
252
248
## Build a Custom Backoffice View
253
249
254
-
Building Custom Views for Block representations in Backoffice is the same for all Block Editors. [Read about building a Custom View for Blocks here](build-custom-view-for-blocks.md)
250
+
Building Custom Views for Block representations in Backoffice is the same for all Block Editors. [Read about building a Custom View for Blocks here](../../../../../customizing/extending-overview/extension-types/block-custom-view.md)
0 commit comments