arrow-left

All pages
gitbookPowered by GitBook
1 of 2

Loading...

Loading...

Field Views

Configuring field views in Umbraco UI Builder, the backoffice UI builder for Umbraco.

Field Views allow you to customize the markup used by a field when displayed in a list view. Field Views are implemented as .NET Core View Components that are passed a single FieldViewsContext argument with information about the entity/field being rendered.

hashtag
Defining a field view

You can define a field view in one of two ways.

hashtag
1. A basic view file for the built in FieldView view component

The simplest way to define a field view for non-complex fields is to place a view file in the /Views/Shared/Components/FieldView folder with the following markup.

When registering a basic file view you can pass the name of the view file (excluding the .cshtml file extension) to the relevant API method.

hashtag
2. A complete custom view component

To define a more complex field view you can create your own view component class (which can use dependency injection for any required dependencies). This can be done by using the following signature:

circle-info

It's important to know that the FieldViewContext parameter to the InvokeAsync method MUST be named context.

For the view element of your component, based on the example above, you would place a file Default.cshtml into the /Views/Shared/Components/MyComplexFieldView folder with the following markup:

hashtag
The field view context

Field view components are passed a FieldViewContext object with the following information:

hashtag
Setting the field view of a list view field

A field view is assigned to a list view field as part of the list view configuration. For more information you can check the .

List View Documentation
@model Umbraco.UIBuilder.Web.Models.FieldViewContext
<!-- Insert your markup here -->
// Example
public class MyComplexFieldViewViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(FieldViewContext context)
    {
        // Do your custom logic here

        return View("Default", model);
    }
}
@model Namespace.Of.Model.Returned.By.Custom.ViewComponent
<!-- Insert your markup here -->
public class FieldViewContext
{
    public string ViewName { get; set; }
    public object Entity { get; set; }
    public string PropertyName { get; set; }
    public object PropertyValue { get; set; }
}

List Views

Configuring the list view of a collection in Umbraco UI Builder, the backoffice UI builder for Umbraco.

A list view is a list-based view of a collection entity providing features: pagination for large collections, custom data views, searching, and bulk actions.

A collection list view

hashtag
Configuring a list view

The list view configuration is a sub-configuration of a Collection config builder instance and is accessed via its ListView method.

hashtag
ListView(Lambda listViewConfig = null) : ListViewConfigBuilder<TEntityType>

Accesses the list view config of the given collection.

hashtag
Adding a field to the list view

hashtag
AddField(Lambda propertyExpression, Lambda fieldConfig = null) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Adds the given property to the list view.

hashtag
Changing the heading of a field

hashtag
SetHeading(string heading) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the heading for the list view field.

hashtag
Formatting the value of a field

hashtag
SetFormat(Lambda formatExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the format expression for the list view field.

hashtag
Setting the view of a field

With field views, you can customize the markup the list view's field so you can show richer visualizations of the field's content. For more information you can check the .

hashtag
SetView(string viewComponentName) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

hashtag
SetView<TView>() : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

hashtag
Setting the visibility of a field

hashtag
SetVisibility(Predicate<ListViewFieldVisibilityContext> visibilityExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the runtime visibility of the list view field.

hashtag
Changing the page size

hashtag
SetPageSize(int pageSize) : ListViewConfigBuilder<TEntityType>

Sets the number of items to display per page for the given list view.

Field Views Documentation
// Example
collectionConfig.ListView(listViewConfig => {
    ...
});
// Example
listViewConfig.AddField(p => p.FirstName, fieldConfig => {
    ...
});
// Example
fieldConfig.SetHeading("First Name");
// Example
fieldConfig.SetFormat((v, p) => $"{v} years old");
// Example
fieldConfig.SetView("ImageFieldView");
// Example
fieldConfig.SetView<ImageFieldView>();
// Example
fieldConfig.SetVisibility(ctx => ctx.UserGroups.Any(x => x.Alias == "editor"));
// Example
listViewConfig.SetPageSize(20);