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
  • Defining a dashboard
  • Changing a dashboard alias
  • Changing when a dashboard should display
  • Setting the collection of a dashboard
Edit on GitHub
  1. Areas

Dashboards

Configuring dashboards in Konstrukt, the back office UI builder for Umbraco.

PreviousFoldersNextContext Apps

Last updated 2 years ago

A dashboard is a view that is displayed at the root of a section and usually contains welcome information and/or useful tools relevant to the given section. When there are multiple dashboards to display in a section these are usually presented in a tabbed layout to allow you to swich between the different dashboard views.

Defining a dashboard

AddDashboard(string name, Lambda dashboardConfig = null) : KonstruktDashboardConfigBuilder

Adds a dashboard with the given name.

// Example
sectionConfig.AddDashboard("Team", dashboardConfig => {
    ...
});

AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : KonstruktDashboardConfigBuilder

Adds a dashboard with the given name before the dashboard with the given alias.

// Example
sectionConfig.AddDashboardBefore("contentIntro", "Team", dashboardConfig => {
    ...
});

AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : KonstruktDashboardConfigBuilder

Adds a dashboard with the given name after the dashboard with the given alias.

// Example
sectionConfig.AddDashboardAfter("contentIntro", "Team", dashboardConfig => {
    ...
});

Changing a dashboard alias

SetAlias(string alias) : KonstruktDashboardConfigBuilder

Sets the alias of the dashboard.

Optional: When adding a new dashboard, an alias is automatically generated from the supplied name for you, however you can use the SetAlias method to override this should you need a specific alias.

// Example
dashboardConfig.SetAlias("team");

Changing when a dashboard should display

Changing when a dashboard is displayed is controlled via an inner config. Options on the inner config are ShowForUserGroup and HideForUserGroup to control the visibility of the dashboard for given user groups. You can call these config methods multiple times to add multiple role configurations.

By default, Konstrukt will pre-filter dashboards to only display on the section it is defined in. This will be combined with the SetVisibility config to decide when to display the dashboard.

SetVisibility(Lambda visibilityConfig) : KonstruktDashboardConfigBuilder

Sets the dashboard visibility config.

// Example
dashboardConfig.SetVisibility(visibilityConfig => visibilityConfig
    .ShowForUserGroup("admin")
    .HideForUserGroup("translator")
);

Setting the collection of a dashboard

Dashboards are only able to display a single collection. If you need to display multiple collections, then you need to configure multiple dashboards.

SetCollection<TEntityType>(Lambda idFieldExpression, string nameSingular, string namePlural, string description, Lambda collectionConfig = null) : KonstruktContextAppConfigBuilder

// Example
dashboardConfig.SetCollection<Comment>(p => p.Id, p=> "Team Member", "Team Members", "A collection of team members", collectionConfig => {
    ...
});

SetCollection<TEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda collectionConfig = null) : KonstruktContextAppConfigBuilder

// Example
dashboardConfig.SetCollection<Comment>(p => p.Id, "Team Member", "Team Members", "A collection of team members", "icon-umm-user", "icon-umb-user", collectionConfig => {
    ...
});

You define a dashboard by calling one of the AddDashboard methods on either a or a instance.

Sets the collection of the current dashboard with the given names and description and default icons. An ID property accessor expression is required so that Konstrukt knows which property is the ID property. See the for more info.

Sets the collection of the current dashboard with the given names, description and icons. An ID property accessor expression is required so that Konstrukt knows which property is the ID property. See the for more info.

Collections documentation
Collections documentation
KonstruktSectionConfigBuilder
Dashboards
KonstruktWithSectionConfigBuilder