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
  • Adding a Count Card to a Collection
  • Using the AddCard() Method
  • Using the AddCard() Method with Icon
  • Change the Color of a Count Card
  • Add a Suffix to a Count Value
  • Formatting the Value of a Count

Was this helpful?

Edit on GitHub
Export as PDF
  1. Cards

Count Cards

Learn how to configure count cards in Umbraco UI Builder.

PreviousDisplay Insights with CardsNextCustom Cards

Last updated 2 months ago

Was this helpful?

Count cards allow you to define cards directly against the configuration, providing a basic where clause to use in a count SQL statement. These work perfectly for basic data visualizations based on counts of entities in a collection.

If you need to do more than a basic count, see the article.

Adding a Count Card to a Collection

Count cards display basic summaries of key information that may be useful to the editor.

Using the AddCard() Method

Adds a count card with the specified name and a where clause filter expression. The filter expression must be a boolean value.

Method Syntax

AddCard(string name, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder

Example

collectionConfig.AddCard("Older than 30", p => p.Age > 30, cardConfig => {
    ...
});

Using the AddCard() Method with Icon

Adds a count card with the specified name, an icon, and a where clause filter expression. The filter expression must be a boolean value.

Method Syntax

AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder

Example

collectionConfig.AddCard("Older than 30", "icon-umb-users", p => p.Age > 30, cardConfig => {
    ...
});

Change the Color of a Count Card

Using the SetColor() Method

Sets the color for the count card.

Method Syntax

SetColor(string color) : CardConfigBuilder

Example

cardConfig.SetColor("blue");

Add a Suffix to a Count Value

Using the SetSuffix() Method

Sets a suffix to be displayed alongside the card value.d

Method Syntax

SetSuffix(string suffix) : CardConfigBuilder

Example

cardConfig.SetSuffix("years");

Formatting the Value of a Count

Using the SetFormat() Method

Sets a custom format for the card's value.

Method Syntax

SetFormat(Lambda formatExpression) : CardConfigBuilder

Example

cardConfig.SetFormat((v) => $"{v}%");
Collection
Custom Cards