Summary Card

SummaryCard shows one figure, large, under a label — an open pipeline, a count of cases, a win rate — and SummaryCards lays several out in a row that wraps on a narrow screen. A card shows a value you give it, a column of the record it's on, or a figure Dataverse works out over records: a total, average, minimum, maximum or count, formatted by the server in the user's culture. The same on Blazor and React.

React Blazor

Inside a record context, RelationshipName (relationshipName in React) keeps the records to those related to the record, as a SubGrid does. With a FetchXml or ViewId as well, its filters choose among them; without, every related record counts. A count needs no column: it counts the records. The figure is worked out again when the record context refreshes or saves, and a record not yet saved has none. The Account 360 demo has four across the top of an account.

React Blazor

A value of the record

Without an Aggregate (aggregate), ColumnName (columnName) shows the record's own value of the column, formatted as its form shows it. Value (value) shows a figure the page works out itself.

React Blazor

Captions and ratios

Caption (caption) puts a line under the figure. With CaptionAggregate (captionAggregate), {0} in it is a second figure over the same records, worked out in the same request. With OfFetchXml or OfViewId (ofFetchXml, ofViewId), the card shows its figure as a share of the same figure over those records: a percentage, with a bar under it unless ShowProgressBar (showProgressBar) is false.

React Blazor

Clicking a card

OnClick (onClick) makes the card a button: a click, Enter or Space raises it. Href (href) makes it a link, which opens in a new tab like any other; in React, onNavigate follows it through your router on a plain click.

Summary cards

Four figures over every deal in the demo's data: the open pipeline and how many deals make it up, the average open deal, the revenue won, and the share of closed deals that were won. Click the pipeline to list its deals. Money is in the organization's base currency.

React example Blazor example React TypeScript DetailPageRecords.ts Razor DetailPageRecords.cs
Open pipeline $58,413,28091 open deals
Average open deal $641,904
Won revenue $966,238,6811,725 deals won
Win rate 44%
React Blazor

SummaryCard Class

Parameters

Name
Type
Default
Description
AggregateQueryAggregate?
The figure to work out over the records: a Models.QueryAggregate on its own, not a combination. Unset, the card shows SummaryCard.ColumnName's value on the cascading record.
Captionstring?
A line under the figure. With SummaryCard.CaptionAggregate, {0} in it is that figure: '{0} open deals'.
CaptionAggregateQueryAggregate?
A second figure for SummaryCard.Caption, worked out over the same records with the first. The caption shows once it arrives.
CaptionColumnNamestring?
The column SummaryCard.CaptionAggregate is worked out over. Unset, a count counts the records and any other figure is worked out over SummaryCard.ColumnName.
ChildContentRenderFragment?
Anything under the figure.
ColumnNamestring?
The column the figure is: the one SummaryCard.Aggregate is worked out over — revenue, or alias.column for a column of a table the query joins — or, without an aggregate, the cascading record's column whose value is shown. A count without one counts the records.
FetchXmlstring?
The query whose records the figure is worked out over, in place of SummaryCard.ViewId. Its filters choose the records; its columns, sort and paging don't matter.
Formatstring?
A .NET numeric format for a worked-out figure — N0, C0, #,##0.0 — applied in the user's culture, as a grid's totals are. null formats it as the column is. A count keeps its own, and a ratio is a whole percentage.
Hrefstring?
Makes the card a link to this address.
IconIcon?
The icon beside the figure. None by default.
Label*string
What the figure is: 'Open pipeline', 'Win rate'.
OfFetchXmlstring?
The query of the records the figure is a share of, in place of SummaryCard.OfViewId.
OfViewIdGuid?
The Dataverse view of the records the figure is a share of. Set, the card shows its figure divided by the same figure over these records, kept to the same related records.
RecordTableRecord?
The record the card belongs to, cascaded by the surrounding record context.
RelationshipNamestring?
Keeps the records to those related to the cascading record through this relationship, as a SubGrid does: opportunity_customer_accounts for an account's opportunities. Without SummaryCard.ViewId or SummaryCard.FetchXml, every related record counts. Until the record is saved there is no figure.
SelfReferencingRoleEntityRole?
Which side of a self-referencing many-to-many SummaryCard.RelationshipName the cascading record is on. Required for such a relationship, ignored for any other.
ShowProgressBarbool
True
Shows a ratio as a bar too, under the percentage. Defaults to true.
Valuestring?
The figure, as it is shown. Set, it is shown in place of any other.
ViewIdGuid?
The Dataverse view whose records the figure is worked out over.
Name: Aggregate
Type: QueryAggregate?
Description: The figure to work out over the records: a Models.QueryAggregate on its own, not a combination. Unset, the card shows SummaryCard.ColumnName's value on the cascading record.
Name: Caption
Type: string?
Description: A line under the figure. With SummaryCard.CaptionAggregate, {0} in it is that figure: '{0} open deals'.
Name: CaptionAggregate
Type: QueryAggregate?
Description: A second figure for SummaryCard.Caption, worked out over the same records with the first. The caption shows once it arrives.
Name: CaptionColumnName
Type: string?
Description: The column SummaryCard.CaptionAggregate is worked out over. Unset, a count counts the records and any other figure is worked out over SummaryCard.ColumnName.
Name: ChildContent
Type: RenderFragment?
Description: Anything under the figure.
Name: ColumnName
Type: string?
Description: The column the figure is: the one SummaryCard.Aggregate is worked out over — revenue, or alias.column for a column of a table the query joins — or, without an aggregate, the cascading record's column whose value is shown. A count without one counts the records.
Name: FetchXml
Type: string?
Description: The query whose records the figure is worked out over, in place of SummaryCard.ViewId. Its filters choose the records; its columns, sort and paging don't matter.
Name: Format
Type: string?
Description: A .NET numeric format for a worked-out figure — N0, C0, #,##0.0 — applied in the user's culture, as a grid's totals are. null formats it as the column is. A count keeps its own, and a ratio is a whole percentage.
Name: Href
Type: string?
Description: Makes the card a link to this address.
Name: Icon
Type: Icon?
Description: The icon beside the figure. None by default.
Name: Label*
Type: string
Description: What the figure is: 'Open pipeline', 'Win rate'.
Name: OfFetchXml
Type: string?
Description: The query of the records the figure is a share of, in place of SummaryCard.OfViewId.
Name: OfViewId
Type: Guid?
Description: The Dataverse view of the records the figure is a share of. Set, the card shows its figure divided by the same figure over these records, kept to the same related records.
Name: Record
Type: TableRecord?
Description: The record the card belongs to, cascaded by the surrounding record context.
Name: RelationshipName
Type: string?
Description: Keeps the records to those related to the cascading record through this relationship, as a SubGrid does: opportunity_customer_accounts for an account's opportunities. Without SummaryCard.ViewId or SummaryCard.FetchXml, every related record counts. Until the record is saved there is no figure.
Name: SelfReferencingRole
Type: EntityRole?
Description: Which side of a self-referencing many-to-many SummaryCard.RelationshipName the cascading record is on. Required for such a relationship, ignored for any other.
Name: ShowProgressBar
Type: bool
Default: True
Description: Shows a ratio as a bar too, under the percentage. Defaults to true.
Name: Value
Type: string?
Description: The figure, as it is shown. Set, it is shown in place of any other.
Name: ViewId
Type: Guid?
Description: The Dataverse view whose records the figure is worked out over.

Events

Name
Type
Description
OnClickEventCallback<MouseEventArgs>
Makes the card a button, raised when it is clicked or pressed with Enter or Space.
Name: OnClick
Type: EventCallback<MouseEventArgs>
Description: Makes the card a button, raised when it is clicked or pressed with Enter or Space.
React Blazor

SummaryCards Class

Parameters

Name
Type
Default
Description
ChildContentRenderFragment?
The cards.
MinCardWidthstring
220px
The narrowest a card is drawn, as a CSS length: fewer fit on a row once they would be narrower. Defaults to 220px.
Name: ChildContent
Type: RenderFragment?
Description: The cards.
Name: MinCardWidth
Type: string
Default: 220px
Description: The narrowest a card is drawn, as a CSS length: fewer fit on a row once they would be narrower. Defaults to 220px.