Umbraco UI Builder
CMSCloudHeartcoreDXP
15.latest
15.latest
  • Umbraco UI Builder Documentation
  • Known Issues
  • Release Notes
  • Getting Started
    • First Steps with UI Builder
    • Requirements
    • Installing Umbraco UI Builder
    • Licensing
    • Configuration
    • User Interface
  • Upgrading
    • Upgrade your UI Builder setup
    • Upgrading Umbraco UI Builder
    • Version Specific Upgrade Notes
    • Migrate from Konstrukt to Umbraco UI Builder
  • How-to Guides
    • Creating your First Integration
  • Areas
    • Explore Areas in UI Builder
    • Sections
      • Summary Dashboards
    • Trees
      • Folders
    • Dashboards
    • Context Apps
  • Collections
    • Work with Collections in UI Builder
    • The Basics
    • List Views
      • Field Views
    • Editors
    • Child Collections
      • Child Collection Groups
      • Retrieve Child Collections
    • Related Collections
    • Entity Identifier Converters
  • Searching
    • Add Search to Your Collections
    • Searchable Properties
  • Filtering
    • Filter Your Data with Ease
    • Global Filters
    • Data Views
      • Data Views Builders
    • Filterable Properties
  • Actions
    • Trigger Actions in UI Builder
    • The Basics
    • Action Visibility
    • Inbuilt Actions
  • Cards
    • Display Insights with Cards
    • Count Cards
    • Custom Cards
  • Property Editors
    • Enhance Input with Property Editors
    • Entity Picker
  • Advanced
    • Ready to go deeper?
    • Virtual Sub Trees
    • Encrypted Properties
    • Value Mappers
    • Repositories
    • Events
  • Miscellaneous
    • Conventions
    • Umbraco Aliases
Powered by GitBook
On this page
  • Defining a Custom Card
  • Configuration Options
  • Adding a Custom Card to a Collection
  • Using the AddCard() Method
  • Using the AddCard(Type cardType) Method

Was this helpful?

Edit on GitHub
Export as PDF
  1. Cards

Custom Cards

Learn how to configure custom cards in Umbraco UI Builder.

Custom cards enable more complex metric calculations and are defined by a class that implements the Card base class.

When Umbraco UI Builder resolves a card, it tries to do so from the global DI container. This means you can inject any dependencies required for the card's value calculation. If no type is found in the DI container, Umbraco UI Builder will fall back to manually instantiating a new instance of the value mapper.

Defining a Custom Card

To define a custom card, create a class that inherits from the base class Card and configure it in the constructor as shown below:

// Example
public class AvgPersonAgeCard : Card
{
    public override string Alias => "avgPersonAge";
    public override string Name => "Average Age";
    public override string Icon => "icon-calendar";
    public override string Color => "green";
    public override string Suffix => "yrs";
        
    public override object GetValue(object parentId = null)
    {
        // Perform value calculation logic
    }
}

Configuration Options

Option
Description
Required

Name

The name of the card.

Yes

Alias

A unique alias for the card.

Yes

GetValue(object parentId = null)

A method to retrieve the card's value.

Yes

Icon

An icon displaed in the card.

No

Color

The color of the card.

No

Suffix

The suffix displayed after the card value.

No

Adding a Custom Card to a Collection

Using the AddCard() Method

Adds a custom card of the specified type to the collection.

Method Syntax

AddCard() : CollectionConfigBuilder<TEntityType>

Example

collectionConfig.AddCard<AvgPersonAgeCard>();

Using the AddCard(Type cardType) Method

Adds a custom card of the specified type to the collection, using the Type parameter to pass the card type dynamically.

Method Syntax

AddCard(Type cardType) : CollectionConfigBuilder<TEntityType>

Example

collectionConfig.AddCard(typeof(AvgPersonAgeCard));
PreviousCount CardsNextEnhance Input with Property Editors

Last updated 1 month ago

Was this helpful?