Skip to content

Commit c5085c0

Browse files
authored
Merge pull request #6835 from umbraco/v15/collection-columns-ufm-label
Collection updates for UFM column labels
2 parents 333e50b + c2e9e2f commit c5085c0

File tree

7 files changed

+28
-19
lines changed

7 files changed

+28
-19
lines changed

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/collection.md

+24-15
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ Once Collections are configured, the parent content item displays its child item
2222

2323
### Columns Displayed
2424

25-
It is possible to add more columns to the collection, via adding the properties through the dropdown. These properties are based on the Data Types which are used by the Document Type. It will show up in the dropdown by its alias and not the name on the property.
25+
It is possible to add more columns to the collection, via adding the properties through the picker modal. These properties are based on the Data Types which are used by the Document Type. The properties will listed for selection.
2626

27-
![Collection property example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-property.png) ![Collection property example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/listview-property-dropdown.png)
27+
![Collection property picker example](images/collection-property-picker.png)
2828

29-
Once you have selected a column you want to display, define what its name should be and what kind of value it should display. You can also move the headers around, re-ordering how they should look. This is done by the move icon on the left side of the alias.
29+
Once you have selected a column you want to display, define what its heading label should be and what kind of value it should display. You can also move the headers around, re-ordering how they should look. This is done by the move icon on the left side of the alias.
3030

3131
The template section is where you define what kind of value you want to display. The value of the column is in the `value` variable.
3232

@@ -52,24 +52,36 @@ You can add more sorting to this collection by adding more datatypes to the colu
5252

5353
### Order Direction
5454

55-
You can select order of the content nodes displayed, "Acsending" or "Descending". The order is affected by the "Order By" selection.
55+
You can select order of the content nodes displayed, "Ascending [a-z]" or "Descending [z-a]". The order is affected by the "Order By" selection.
5656

5757
### Page Size
5858

5959
Defines how many child content nodes you want to see per page. This will limit how many content items you will see in your collection. If you set it to 5, then only 5 content items will be shown in the collection.
6060

6161
### Workspace View icon
6262

63+
{% hint style="info" %}
64+
Support for changing the Workspace View icon has not been implemented yet.
65+
{% endhint %}
66+
6367
Changes the icon in the backoffice of the collection. By default it will look like the image below.
6468

6569
![Collection icon example](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-icon.png)
6670

6771
### Workspace View name
6872

73+
{% hint style="info" %}
74+
Support for changing the Workspace View name has not been implemented yet.
75+
{% endhint %}
76+
6977
You can change the name of the collection itself. Default if empty: 'Child Items'.
7078

7179
### Show Content Workspace View First
7280

81+
{% hint style="info" %}
82+
Support for setting the Content Workspace View First has not been implemented yet.
83+
{% endhint %}
84+
7385
Enable this to show the Content Workspace View by default instead of the collection's.
7486

7587
## Content Example
@@ -80,24 +92,21 @@ This example shows how to use a generic field from a child item and display its
8092

8193
![Collection content email label template](images/collection-label-template.png)
8294

83-
Here, the `{=value}` placeholder retrieves the value of the *Email* property and displays it in the collection, as shown in the image below:
95+
You can use the [Umbraco Flavored Markdown](../../../../umbraco-flavored-markdown.md) syntax to display the label value. Here, the `{=value}` placeholder retrieves the value of the *Email* property and displays it in the collection, as shown in the image below:
8496

8597
![Collection content email value displayed](images/collections-display-email.png)
8698

87-
### Member name
88-
89-
First, a Member Picker property needs to be present on the content item. In this example, the `child item` has gotten a Member Picker Data Type with the alias of `isAuthor`.
99+
### Content name
90100

91-
![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker.png)
101+
First, a Content Picker property needs to be present on the content item. In this example, the `child item` has gotten a Content Picker Data Type with the alias of `contentPicker`.
92102

93-
The child item has a member and the value that should be displayed is the name of the picked value. The next step is to reconfigure the template value in the collection setting.
103+
![Collection content picker](images/content-picker-property.png)
94104

95-
![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker-settings.png)
105+
The child item has a document and the value that should be displayed is the name of the picked value. The next step is to reconfigure the template value in the collection setting.
96106

97-
This will take the value picked up by the member picker. ![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/picked-member.png)
107+
![Collection content picker](images/collection-column-content-picker.png)
98108

99-
And display it in the collection. Shown in the example below: ![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/list-member-picked.png)
109+
This will take the value picked up by the content picker. ![Collection content picker with picked value](images/content-picker-picked-value.png)
100110

101-
### Other examples
111+
And display it in the collection. Shown in the example below: ![Collection view cards with content picker value](images/collection-view-cards-content-picker.png)
102112

103-
![Collection other examples](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/others.png) ![Collection other examples](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/others-result.png)
Loading
Loading

15/umbraco-cms/reference/umbraco-flavored-markdown.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ The essence of the UFM syntax is curly brackets with an alias prefix delimited w
2525

2626
For clarity...
2727

28-
- The opening token is `{` U+007B Left Curly Bracket
28+
- The opening token is `{` Left Curly Bracket
2929
- The alias prefix can be any valid Unicode character(s), including emojis
30-
- Followed by `:` U+003A Colon, (not part of the alias prefix itself)
30+
- Followed by `:` Colon, (not part of the alias prefix itself)
3131
- The contents within the curly brackets can include any Unicode characters, including whitespace
32-
- The closing token is `}` U+007D Right Curly Bracket
32+
- The closing token is `}` Right Curly Bracket
3333

3434
An example of this syntax to render a value of a property by its alias is: `{umbValue: bodyText}`.
3535

@@ -48,7 +48,7 @@ The internal working of the `ufm-label-value` component would then be able to ac
4848

4949
In addition, a filter syntax can be applied to UFM contents. This can be useful for formatting or transforming a value without needing to develop your own custom UFM component.
5050

51-
The syntax for UFM filters uses a pipe character `|` (U+007C Vertical Line). Multiple filters may be applied, and the value from the previous filter is passed onto the next.
51+
The syntax for UFM filters uses a pipe character `|` (Vertical Line). Multiple filters may be applied, and the value from the previous filter is passed onto the next.
5252

5353
To display a rich text value, stripping out the HTML markup and limiting it to the first 15 words could use the following filters:
5454

0 commit comments

Comments
 (0)