Count Cards

Configuring count cards in Umbraco UI Builder, the backoffice UI builder for Umbraco.

Count cards allow you to define cards directly against the collection 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, you'll want to take a look at the custom cards documentation.

Adding a count card to a collection

Cards allow you to display basic summaries of key information that may be useful to the editor.

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

Adds a card with the given name and where clause filter expression. Expression must be a boolean expression.

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

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

Adds a card with the given name + icon and where clause filter expression. Expression must be a boolean expression.

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

Change the color of a count card

SetColor(string color) : CardConfigBuilder

Sets the color of the card.

// Example
cardConfig.SetColor("blue");

Add a suffix to a count value

SetSuffix(string suffix) : CardConfigBuilder

Sets the suffix of the card value.

// Example
cardConfig.SetSuffix("years");

Formatting the value of a count

SetFormat(Lambda formatExpression) : CardConfigBuilder

Sets the format expression for the card.

// Example
cardConfig.SetFormat((v) => $"{v}%");