KPI
The KPI web part for Sprocket 365 lets you surface key metrics - revenue, active projects, quotes past due, and so on - as clean, configurable cards on a SharePoint page. Each card shows a value with an optional label and icon, and the cards are driven from a simple SharePoint list so the numbers are easy to maintain (or update automatically from another system). In this article, we will show you how to create and use the KPI web part in Sprocket 365.
Features
- Show one card per metric, laid out in a responsive grid
- Two layout modes: Icon (icon + value + label) and Text (value + label only)
- Icon mode: choose the icon position (top or left) and the order of value and label
- Text mode: choose alignment (left, middle, right), value/label order, and an optional accent bar
- Add a unit to the value (for example
%,$,k) and choose whether it appears before or after the number, per card - Pick a built-in icon per card, or point to your own icon image stored in SharePoint
- Responsive by section: up to four cards per row, automatically dropping to two, then one, in narrower two- and three-column sections and the sidebar
- Limit how many cards are shown with Maximum Number of Items
- Creates its backing list automatically the first time the web part is added
- Shows sample cards until the list has content, so you can see the layout before adding data
Configurations
After you add the Sprocket KPI web part, click the Configure Web Part button or the icon on the menu to the left of the web part to open the configuration panel on the right.
1. Display
| Field | Description |
|---|---|
| Show Title | Enable the title display of the web part. |
| Show in Panel | Enable to place a fine grey border and solid white background around the web part. |
| Maximum Number of Items | The most cards to show, regardless of how many are in the list. Default is 6. Set to 0 to show all. |
| Layout | Choose Icon or Text. Icon shows an icon alongside the value and label. Text shows just the value and label. |
Icon layout options
| Field | Description |
|---|---|
| Icon Position | Top places the icon above the text (larger card). Left places the icon beside the text (compact card). |
| Value/Label Order | Value Top shows the number above the label. Label Top shows the label above the number. |
| Alignment | Available when Icon Position is Left. Aligns the card text Left, Middle, or Right. |
Text layout options
| Field | Description |
|---|---|
| Alignment | Aligns the card text Left, Middle, or Right. |
| Value/Label Order | Value Top or Label Top, as above. |
| Accent Border | Enable to show a coloured accent bar (site theme colour) on the card. |
| Accent Position | Available when Accent Border is on. Places the bar on the Left, Top, or Bottom edge. |
2. Data Source
Point the web part at the list that holds your KPIs. All three fields are mandatory.
| Field | Description |
|---|---|
| Site URL | Select the source site. |
| Web URL | Select the source web. |
| List | Select the source list. Defaults to the KPI list created automatically when the web part is first added. |
3. Styles
Optional styling overrides:
| Field | Description |
|---|---|
| Custom CSS | Add custom CSS for the web part. |
| Custom CSS Class | Add a CSS class applied to the root element of the web part. |
When configuration is complete, click Republish to publish the page.
Managing KPI content
The cards are read from a SharePoint list. When you first add the web part, a list named KPI is created for you in the current site. Add, edit, remove, and reorder your metrics by editing that list directly (use Go to List from the web part in edit mode). Each list item is one card.
| Column | Description |
|---|---|
| Title | The label shown on the card. |
| Value | The metric (a number). Required. |
| Unit | Optional. A unit shown with the value, such as %, $, or k. |
| UnitPosition | Prefix shows the unit before the value (for example $131,631); Suffix shows it after (for example 92%). Leave blank for Suffix. |
| Icon | A built-in icon: Bar Chart, List, Monitor, or Layout. Used unless an Icon URL is set. Applies in Icon layout. |
| IconUrl | Optional. A link to your own icon image (PNG or SVG) stored in this SharePoint tenant. When set, it overrides the Icon choice. |
| SortOrder | Controls the order the cards appear in (lowest first). |
Using your own icon
To use a custom icon instead of a built-in one, upload the image (a square PNG around 104px works well) to a library in the same site - for example Site Assets - then paste its link into the IconUrl column.
- Use the file's direct link, not a "Copy link" sharing link. The most reliable way to get it is to select the file, open the Details pane, and copy the Path value.
- The image must live in the same SharePoint tenant. Links to external sites are ignored.
- PNG and JPG render reliably. SVG may not display if your tenant serves SVG files as downloads.
FAQs
1. How do I change the KPI web part title?
Edit the page, then highlight the title text on the web part and type to replace it.
2. How do I add or change a card? Cards come from the KPI list, not the page. In edit mode, click Go to List on the web part (or open the KPI list in the site), then add or edit items. Each item is one card - set the Title, Value, and optionally Unit, Icon, and SortOrder.
3. Why is my card showing sample data? Sample cards appear until the KPI list has at least one item (or while the web part is not yet configured). Add items to the list to replace them with your own.
4. How do I show a unit like a dollar sign in front of the value? Set the Unit column (for example $) and set UnitPosition to Prefix. Leave UnitPosition blank or set it to Suffix for units that follow the number, such as %.
5. Why isn't my custom icon showing?
Most often the link is a library view URL or a "Copy link" sharing link rather than the file itself. Use the file's Path from the Details pane (for example /sites/yoursite/SiteAssets/logo.png). Also make sure the image is in the same tenant, and try a PNG if an SVG does not appear.
6. Can the numbers update automatically from Power BI or another system? The web part reads from the SharePoint list, so the list is the interface. To keep the numbers live, use a scheduled Power Automate flow (or similar) to write values from your source - Power BI, SQL, an API - into the list's Value column. No web part changes are needed.