UI view

It is possible to nest a UI view within a UI view.

To nest a related UI view :

In the same way as for the context node, a relation must be made between the two UI views by using the SubUIView metadata.
Entities of the UI view and the nested UI view must be associated by using the EntityAssociation metadata.
The relation-property-name must be filled in with the name of the relation property of the sub UI view. Node name : ui-view

To nest an independent UI view, the name attribute must be filled in with the name of the UI view.

To nest an independent UI view that uses the data source of another UI view, the data-shared-with attribute must be filled with the reference of the UI view :

To reference the main UI view : #Main
To reference a sub-UI view of the main UI view : #Main.[RelationPropertyName] (e.g. #Main.OrderDetails).
To reference an independent nested UI view, the id attribute must be set on the independent nested UI view that will share its data source and use this same identifier as the value of the data-shared-with attribute on the UI view that uses the shared data source.

For more information on data sharing, see this article.

Attributes

Attribute	Type	Required	Description
name	`string`	`true`	Name of the UI view.
relation-property-name	`string`	`false`	Relation property name of the sub UI view.
id	`string`	`false`	Unique identifier.
data-shared-with	`string`	`false`	Reference of the UI view.
parameters	`GroupeIsa.Neos.Designer.UIAbstractions.NavigationParameters`	`false`	Navigation parameters used to populate the view context (as well as current id, creation mode, page number and records by page properties). This only works in the case of an independent nested UI view (without the `relation-property-name` attribute).
source	Collection of UI view items	`false`	Computed that provides the data source of the UI view.
remote	`string`	`false`	Remote cluster name that contains the UI view.

Examples

Nesting an independent UI view

<ui-view name="OrderListUI" />

<ui-view relation-property-name="OrderDetails" />

Nesting an independent UI view that uses the main UI view datasource

<ui-view name="OrderListUI" data-shared-with="#Main" />

<ui-view name="OrderDetailsUI" data-shared-with="#Main.OrderDetails" />

Nesting an independent UI view that uses an independent UI view datasource

<ui-view id="OrderList" name="OrderListUI" />
<ui-view name="OrderEditUI" data-shared-with="OrderList" />

Pass parameters to an independent UI views

<ui-view name="OrderListUI" parameters="@Fields.OrderListUIParameters" />

OrderListUIParameters is a GroupeIsa.Neos.Designer.UIAbstractions.NavigationParameters type field. The parameters will populate the CurrentId, PageNumber, RecordsByPage and ViewContext properties of the OrderListUI UI view.

When the field changes, the OrderListUI will be recreated.

UI view based on a computed source

Sometimes we do not want to make all items from a collection available in a ui-view node.
In this case, we need to declare a computed that returns a IEnumerable of items of the same type as the corresponding sub UI view and filter the collection in the getter.
This computed can be used in the source attribute of the context node.

Here is an example where we want to display all LicenseModuleDetails from all Datasource items in a single UI view.

<ui-view relation-property-name="LicenseModuleDetails" source="@Computeds.AllLicenseModuleDetails" />

- Name: AllLicenseModuleDetails
  DotNetDataType: System.Collections.Generic.IList<GroupeIsa.Neos.LicenseManagement.CSharpAbstractions.LicenseModuleDetailUI>
  Getter: return Datasource.SelectMany(d => d.LicenseModuleDetails).ToList();

Table of Contents