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

// 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);@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; }
}