Context

Live demo

By default, components used in a UI template are bound to the UI view. Sometimes, you may need to bind them to another data source.
The context node allows you do to that. All the components it contains are bound to another data source than the one of the UI view.

Node name : context

Context based on a sub UI view

When the UI view has collection or editable reference properties, it is possible to define sub UI views to display / edit them.
If you want a part of the template to work on the items of a the collection or an editable reference, you can use the context node.
All child nodes will be bound to the sub UI view items instead of the main UI view items.
@DatasourceCurrent will be an object of the type of the sub UI view instead of the type of the main UI view.
In this case, you need to set the relation-property-name attribute with the name of the relation of the sub UI view.

Context based on a computed source

Sometimes we do not want to make all items from a collection available in a context node.
In this case, we need to declare a computed that returns a list 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 instead of the relation-property-name attribute.
@DatasourceCurrent will be an object of the type of the sub UI view instead of the type of the main UI view.

Important

When binding a datagrid to a computed, you must use the <context source="@Computeds.YourComputed"> syntax rather than binding directly to the datagrid element.
The source attribute on a datagrid is reserved for sub-datagrids (nested collections), not for computed data sources.
Always wrap the datagrid in a context element when using a computed.

Attributes

Attribute	Type	Required	Default value	Description
relation-property-name	string	true if source is not used		Relation property name of the sub UI view that provides the data source of the context.
source	Collection of UI view items	true if relation-property-name is not used		Computed that provides the data source of the context.
id	string	false		Unique identifier.

Warning

Directives cannot be used on a context node because this component is only intended for abstraction and not for display.

Examples

Here is an example showing multiple uses of the context node. It represents the UI template of UI view OrderUI that displays an order and its details.

Order details come from collection property OrderDetails. A sub UI view OrderDetailListUI is configured to represent the relation between the Order and its OrderDetails. The name of the relation is OrderDetails.

A computed called OrderDetailsWithAPriceGreaterThan100Dollars is defined. It lists the order details form collection OrderDetails with a price greater that 100$. Its return type is IEnumerable<OrderDetailUI>. Its getter is as follows :

if (DatasourceCurrent == null)
{
    return Array.Empty<OrderDetailListUI>();
}

return DatasourceCurrent.OrderDetails.Where(od => od.Price > 100);

Here is the template of UI view OrderUI :

<vertical-layout>
  <!-- Form fields bound to the Order -->
  <form-field property-name="OrderId" />
  <form-field property-name="CustomerId" />
  <form-field property-name="OrderDate" />

  <!-- DatasourceCurrent is the Order in this context -->
  <text>Date of the current Order : @DatasourceCurrent.OrderDate</text>

  <!-- Context based on a sub UI view -->
  <context relation-property-name="OrderDetails">
    <!-- The toolbar, datagrid and pagination bar contained in the context are bound to the sub UI view with the relation name "OrderDetails" -->
    <vertical-layout>
      <toolbar />
      <datagrid />
      <pagination-bar />

      <!-- DatasourceCurrent is one of the OrderDetails in this context -->
      <text>Product of the current OrderDetail : @DatasourceCurrent.ProductName</text>
    </vertical-layout>
  </context>

  <!-- Context based on a computed source -->
  <context source="@Computeds.OrderDetailsWithAPriceGreaterThan100Dollars">
    <vertical-layout>
      <!-- The toolbar, datagrid and pagination bar contained in the context are bound to the OrderDetailsWithAPriceGreaterThan100Dollars computed -->
      <toolbar />
      <datagrid />
      <pagination-bar />

      <!-- DatasourceCurrent is one of the OrderDetails of the OrderDetailsWithAPriceGreaterThan100Dollars computed in this context -->
      <text>Product of the current OrderDetail of computed OrderDetailsWithAPriceGreaterThan100Dollars : @DatasourceCurrent.ProductName</text>
    </vertical-layout>
  </context>