Konstrukt
🚨 Konstrukt is now Umbraco UI Builder 🚨
  • Konstrukt Documentation
  • Getting Started
    • Overview
    • Installation
    • Configuration
    • User Interface
  • Guides
    • Creating your first integration
  • Areas
    • Overview
    • Sections
      • Summary Dashboards
    • Trees
      • Folders
    • Dashboards
    • Context Apps
  • Collections
    • Overview
    • The Basics
    • List Views
      • Field Views
    • Editors
    • Child Collections
      • Child Collection Groups
  • Searching
    • Overview
    • Searchable Properties
  • Filtering
    • Overview
    • Global Filters
    • Data Views
      • Data Views Builders
    • Filterable Properties
  • Actions
    • Overview
    • The Basics
    • Action Visbility
    • Inbuilt Actions
  • Cards
    • Overview
    • Count Cards
    • Custom Cards
  • Property Editors
    • Overview
    • Entity Picker
  • Advanced
    • Virtual Sub Trees
    • Encrypted Properties
    • Value Mappers
    • Repositories
    • Events
  • Extras
    • Conventions
    • Umbraco Aliases
    • Konstrukt vs UI-O-Matic
    • Known Issues
    • Changelog
Powered by GitBook
On this page
  • Configuring a list view
  • Adding a field to the list view
  • Changing the heading of a field
  • Formatting the value of a field
  • Setting the view of a field
  • Setting the visibility of a field
  • Changing the page size
Edit on GitHub
  1. Collections

List Views

Configuring the list view of a collection in Konstrukt, the back office UI builder for Umbraco.

PreviousThe BasicsNextField Views

Last updated 2 years ago

A list view is a list based view of a collections entities providing such features as pagination for large collections, custom data views, searching and bulk actions.

Configuring a list view

ListView(Lambda listViewConfig = null) : KonstruktListViewConfigBuilder<TEntityType>

Accesses the list view config of the given collection.

// Example
collectionConfig.ListView(listViewConfig => {
    ...
});

Adding a field to the list view

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

Adds the given property to the list view.

// Example
listViewConfig.AddField(p => p.FirstName, fieldConfig => {
    ...
});

Changing the heading of a field

SetHeading(string heading) : KonstruktListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the heading for the list view field.

// Example
fieldConfig.SetHeading("First Name");

Formatting the value of a field

SetFormat(Lambda formatExpression) : KonstruktListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the format expression for the list view field.

// Example
fieldConfig.SetFormat((v, p) => $"{v} years old");

Setting the view of a field

SetView(string viewComponentName) : KonstruktListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

// Example
fieldConfig.SetView("ImageFieldView");

SetView<TView>() : KonstruktListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

// Example
fieldConfig.SetView<ImageFieldView>();

Setting the visibility of a field

SetVisibility(Predicate<KonstruktListViewFieldVisibilityContext> visibilityExpression) : KonstruktListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the runtime visibility of the list view field.

// Example
fieldConfig.SetVisibility(ctx => ctx.UserGroups.Any(x => x.Alias == "editor"));

Changing the page size

SetPageSize(int pageSize) : KonstruktListViewConfigBuilder<TEntityType>

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

// Example
listViewConfig.SetPageSize(20);

The list view configuration is a sub configuration of a config builder instance and is accessed via it's ListView method.

Field views allow you to customize the markup of the field in the list view so that you can show more rich visualizations of the fields content. See for more info.

Collection
Field Views Documentation
A collection list view