Shimmer control

A control used to display a loading experience.

Note

Full documentation and source code found in the GitHub code components repository.

Description

This code component provides a wrapper around the Fluent UI Shimmer control bound to a button for use in canvas & custom pages.

Key properties

Property	Description
Items	The action items to render
Rows	The action items to render
SpacebetweenShimmer	Space or Gap between each Shimmer incase of muliple rows.

Items properties

Each Record in the below Table contains can have following values.

Property	Description
ItemKey	Required. The key to use to indicate specific ShimmerElement. The keys must be unique.
ItemType	Required. The Shimmer element type from the list of three shimmer elements, i.e. circle, gap & line.
ItemRowKey	Required. The key to use to indicate the RowKey and establish relationship.
ItemHeight	Height of ShimmerElement
ItemWidth	Width of ShimmerElement
ItemVerticalAlign	To specify how the element should align. i.e. 'top', 'center' or'bottom'.

Example Power Fx formula:

Table({ItemKey:"1",ItemWidth:"3.8",ItemHeight:60,ItemRowKey:"1",ItemType:"circle"},{ItemKey:"2",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"3",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"4",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"5",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"6",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"7",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"8",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"9",ItemWidth:"3.8",ItemHeight:40,ItemRowKey:"1",ItemType:"line"},{ItemKey:"10",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"11",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"12",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"13",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"14",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"15",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"16",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"})

Rows (rows_Items) Property value

Each Record in the below Table contains can have following values.

Property	Description
RowKey	Required. The key to use to indicate specific Shimmer, and when adding sub items. The keys must be unique.
RowOrder	The order by which the Shimmer should render
RowCount	Number of Shimmers to render
RowWidth	Width of Shimmer

Example Power Fx formula:

Table(
    {
        RowKey: "1",
        RowOrder:1,
        RowCount:5,
        RowWidth: 100
    }
)

Style Properties

Property	Description
Theme	Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps. See theming for guidance on how to configure.
AccessibilityLabel	Screen reader aria-label

Example Theme

The Theme JSON string is passed to the component property, whilst the varTheme can be used to style other standard components such as buttons using the individual colors.

For more information on the color palette to be used while working with Shimmer, refer IShimmerColors Interface section of IShimmerElement documentation.

Limitations

This code component can only be used in canvas apps and custom pages.