Skip to content

Dashboard control

Dashboard component for Microsoft Teams.


As this component is based on @fluentui/react-northstar the main usage scenario is Microsoft Teams projects. You can still use it in non-Teams related projects as well.

Here is an example of the control in action:

Carousel control

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
  • Use the Dashboard control in your code as follows:
const linkExample = { href: "#" };
const calloutItemsExample = [
    id: "action_1",
    title: "Info",
    icon: <Icon iconName={'Edit'} />,
  { id: "action_2", title: "Popup", icon: <Icon iconName={'Add'} /> },
// ...
    title: "Card 1",
    desc: "Last updated Monday, April 4 at 11:15 AM (PT)",
    widgetActionGroup: calloutItemsExample,
    size: WidgetSize.Triple,
    body: [
        id: "t1",
        title: "Tab 1",
        content: (
            Content #1
        id: "t2",
        title: "Tab 2",
        content: (
            Content #2
        id: "t3",
        title: "Tab 3",
        content: (
            Content #3
    link: linkExample,
    title: "Card 2",
    size: WidgetSize.Single,
    link: linkExample,
    title: "Card 3",
    size: WidgetSize.Double,
    link: linkExample,
  }]} />


The Dashboard component can be configured with the following properties:

Property Type Required Description
widgets IWidget[] yes Widgets collection.
allowHidingWidget boolean no Specifies if widgets can be hidden from the dashboard.
onWidgetHiding (widget: IWidget) => void no Handler of widget hiding event.
toolbarProps IToolbarProps no Dashboard toolbar props. See Toolbar.
WidgetContentWrapper React.ComponentType\> no Optional component which wraps every Widget component. Useful for a custom error handling or styling.

Interface IWidget

Provides settings of Dashboard's widget

Property Type Required Description
size WidgetSize yes Size.
title string yes Title.
desc string no Description.
widgetActionGroup IWidgetActionKey[] no Actions.
controlOptions IWidgetControlOptions no Component rendering options.
body IWidgetBodyContent[] no Widget's content (children) rendered as tabs.
link IWidgetLink no Widget's link rendered at the bottom part of the widget.

Interface IWidgetActionKey

Provides Dashboard Widget Action properties

Property Type Required Description
id string yes Action id.
icon JSX.Element no Action icon.
title string yes Action title.
onClick () => void no Action handler.

Interface IWidgetControlOptions

Provides Widget component options

Property Type Required Description
isHidden boolean no Specifies if current widget is hidden.

Interface IWidgetBodyContent

Provides Widget content (tab) properties

Property Type Required Description
id string yes Content (tab) id.
title string yes Content (tab) title.
content React.ReactNode yes Tab content.

Interface IWidgetLink

Provides Widget link properties

Property Type Required Description
href string yes Link to be opened.

Enum WidgetSize

Provides size of the widget

Value Description
Single Single-sized grid item.
Double Double-width grid item.
Triple Triple width grid item.
Box Double-width, double-height grid item.