Timeline-style activity log with category filtering, inline email sub-details, configurable icon mapping, skeleton loading, and full light/dark theming. Built for case management, CRM, and approval tracking screens.
Power Apps Studio rendering note
After importing, the component may appear incomplete in the Studio editor until you press F5 (Preview) or publish. This is standard Power Apps behavior for YAML-imported components — the editor doesn't fully evaluate nested gallery templates until a preview cycle. End users always see the fully rendered component.
| Property | Type | Default |
|---|---|---|
ItemsAudit trail entries. Schema: EventTitle, EventDescription, Author, DisplayDateTime, Category (must match FilterOptions/IconMap), HasSubDetail, SubTo, SubCC, SubPriority, SubMessage. Cards size themselves to their content, so cap long SubMessage values at the source if you need a bounded row height. | Table | 12 sample entries |
FilterOptionsTable of {Value: Text} rows for the filter dropdown. Values must match Category values in Items and IconMap. | Table | 6 categories |
IconMapMaps Category values to icon types and dot colors. Case-insensitive. Include a "default" row. IconType values: comment, email, document, person, checkbadge, check, workflow, folder. | Table | 6 mappings |
Theme"Light" or "Dark" theme mode. | Text | "Light" |
ThemeConfigComplete light and dark theme token sets with background, surface, border, rail, text, and HTML color values. Override to customize. | Record | Light + Dark tokens |
IsLoadingWhen true shows skeleton placeholder cards instead of data. | Boolean | false |
HideHeaderWhen true hides the toolbar with filter, entry count, and action buttons. | Boolean | false |
CardHeightMinimum height of a standard entry card with no sub-detail. Cards grow past this to fit their content. | Number | 104 |
SubDetailCardHeightMinimum height of an entry card with the sub-detail panel (email preview). Also sets the sub-detail block’s initial height before it measures its content. Cards grow past this. | Number | 224 |
ShowScrollbarWhen true shows the scrollbar on the timeline gallery. | Boolean | false |
| Property | Type | Description |
|---|---|---|
SelectedItem | Record | The last tapped audit trail record with all fields. |
ActiveFilter | Text | The currently selected filter value from the dropdown. |
| Event | Description |
|---|---|
OnItemSelect | Fires when an audit trail card is tapped. SelectedItem is populated before firing. |
OnExport | Fires when the export button in the toolbar is tapped. |
OnPrint | Fires when the print button in the toolbar is tapped. |
Vertical VariableHeight gallery with a 2px rail line connecting category-colored dots. Each entry card sits to the right of the rail and auto-sizes to its content — the title, description, and (when present) the email sub-panel wrap and grow, and the tap overlay and rail line follow the card height. CardHeight and SubDetailCardHeight act as minimum heights.
The IconMap table maps each Category to an IconType string and a DotColor RGBA value. The component resolves the icon SVG internally via a Switch on IconType. The dot on the timeline rail uses the DotColor.
The dropdown is driven by the FilterOptions table. Selecting a filter value shows only entries where Category = ActiveFilter. The first option should be an “All” value that bypasses the filter.
Entries with HasSubDetail = true render an HTML text control below the main card showing To, CC, Priority, and Message fields. The card's minimum height comes from SubDetailCardHeight (instead of CardHeight) and grows to fit the message.
The full SubMessage is rendered, so a very long body produces an oversized card and can hurt gallery scroll performance. Cap it where you shape the data, e.g. SubMessage: Left('Message Body', 300) inside an AddColumns over your source.
cmpActivityTimeline.Items: YourDataSource
cmpActivityTimeline.Width: Parent.Width
cmpActivityTimeline.Height: 600
cmpActivityTimeline.Theme: "Light"cmpActivityTimeline.Theme: "Dark"
cmpActivityTimeline.Items: Table(
{
EventTitle: "Email Sent",
EventDescription: "Request for Review",
Author: "Jordan Mitchell",
DisplayDateTime: "Nov 14 3:45 PM",
Category: "Emails",
HasSubDetail: true,
SubTo: "Sarah Johnson",
SubCC: "Lisa Park",
SubPriority: "High",
SubMessage: "Please review..."
}
)cmpActivityTimeline.IconMap: Table(
{Category: "Notes",
IconType: "comment",
DotColor: RGBA(124,58,237,1)},
{Category: "Calls",
IconType: "person",
DotColor: RGBA(37,99,235,1)},
{Category: "Uploads",
IconType: "document",
DotColor: RGBA(217,119,6,1)},
{Category: "default",
IconType: "comment",
DotColor: RGBA(107,114,128,1)}
)cmpActivityTimeline.OnItemSelect: |
Notify(
"Selected: " &
cmpActivityTimeline
.SelectedItem.EventTitle,
NotificationType.Information
)
cmpActivityTimeline.OnExport: |
// Export logic
cmpActivityTimeline.OnPrint: |
// Print logicOne email when something new ships. Unsubscribe anytime.
Use the toolbar to format · or type markdown directly