Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ Once Collections are configured, the parent content item displays its child item

### Columns Displayed

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.
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.

![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)
![Collection property picker example](images/collection-property-picker.png)

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.
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.

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.

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

### Order Direction

You can select order of the content nodes displayed, "Acsending" or "Descending". The order is affected by the "Order By" selection.
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.

### Page Size

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.

### Workspace View icon

{% hint style="info" %}
Support for changing the Workspace View icon has not been implemented yet.
{% endhint %}

Changes the icon in the backoffice of the collection. By default it will look like the image below.

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

### Workspace View name

{% hint style="info" %}
Support for changing the Workspace View name has not been implemented yet.
{% endhint %}

You can change the name of the collection itself. Default if empty: 'Child Items'.

### Show Content Workspace View First

{% hint style="info" %}
Support for setting the Content Workspace View First has not been implemented yet.
{% endhint %}

Enable this to show the Content Workspace View by default instead of the collection's.

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

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

Here, the `{=value}` placeholder retrieves the value of the *Email* property and displays it in the collection, as shown in the image below:
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:

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

### Member name

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`.
### Content name

![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker.png)
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`.

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.
![Collection content picker](images/content-picker-property.png)

![Collection member picker](../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/images/member-picker-settings.png)
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.

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)
![Collection content picker](images/collection-column-content-picker.png)

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)
This will take the value picked up by the content picker. ![Collection content picker with picked value](images/content-picker-picked-value.png)

### Other examples
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)

![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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions 15/umbraco-cms/reference/umbraco-flavored-markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ The essence of the UFM syntax is curly brackets with an alias prefix delimited w

For clarity...

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

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

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

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.

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.
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.

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

Expand Down