|
| 1 | +--- |
| 2 | +title: Adding support for Top Actions |
| 3 | +description: Top Actions is a SharePoint Framework feature that allows web part developers to add commands to a web part's toolbar |
| 4 | +ms.date: 11/14/2022 |
| 5 | +--- |
| 6 | + |
| 7 | +# Adding support for Top Actions |
| 8 | + |
| 9 | +Today, users need to be aware of the web part property panels to find out the additional options each web part provides. This is a common piece of feedback where users want actions surfacing in context of where they are without having to rely on opening something to get to those options. Therefore, we are now allowing to surface most common configurations from a web part's property panel directly on to the web part's toolbar. These common configurations are referred to as the web part's Top Actions. |
| 10 | + |
| 11 | +> [!IMPORTANT] |
| 12 | +> This feature is still preview status as part of the 1.16 release and should not be used in production. We are looking into releasing them officially as part of the upcoming 1.17 release. |
| 13 | +
|
| 14 | +> At the time of writing this article, Top Actions only supports rendering a drop down and button command. |
| 15 | +
|
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +## Getting started |
| 20 | + |
| 21 | +> [!TIP] |
| 22 | +> These instructions assume you know [how to create a hello world web part](../get-started/build-a-hello-world-web-part.md). |
| 23 | +
|
| 24 | +### 1. Define your Top Action configurations |
| 25 | + |
| 26 | +In the example below we are defining the callback function that will be used to pull the configurations for our Top Action commands. |
| 27 | + |
| 28 | +> Note: `getTopActionsConfiguration` must be defined as public on your web part's class. |
| 29 | +
|
| 30 | +```typescript |
| 31 | +import { ITopActions } from '@microsoft/sp-top-actions'; |
| 32 | + |
| 33 | +public getTopActionsConfiguration(): ITopActions | undefined { |
| 34 | + return { |
| 35 | + topActions: [], |
| 36 | + onExecute: (actionName: string, newValue: any) => {} |
| 37 | + }; |
| 38 | +} |
| 39 | +``` |
| 40 | + |
| 41 | +### 3. Define your toolbar's user interface |
| 42 | + |
| 43 | +The `topActions` array is an ordered list of controls to render in the web part toolbar. In the example below we are defining one top action as a button interface. |
| 44 | + |
| 45 | +```typescript |
| 46 | +import { PropertyPaneFieldType } from '@microsoft/sp-property-pane'; |
| 47 | + |
| 48 | +return { |
| 49 | + topActions: [ |
| 50 | + { |
| 51 | + targetProperty: 'reset', |
| 52 | + properties: { |
| 53 | + icon: 'Reset' |
| 54 | + }, |
| 55 | + type: PropertyPaneFieldType.Button |
| 56 | + } |
| 57 | + ] |
| 58 | + ... |
| 59 | +} |
| 60 | +``` |
| 61 | + |
| 62 | +### 4. Execute the command when the user interacts |
| 63 | +The previous step demonstrated how to get a button to display in the web part's toolbar. Now we will perform an action when the user clicks the button. Note that `actionName` was defined as `targetProperty` in the last step and since this is a button we can ignore the `newValue` that comes in. |
| 64 | + |
| 65 | +```typescript |
| 66 | +return { |
| 67 | + ... |
| 68 | + onExecute: (actionName: string, newValue: any) => { |
| 69 | + if (actionName === 'reset') { |
| 70 | + // user defined logic to reset the web part |
| 71 | + this.reset(); |
| 72 | + } |
| 73 | + } |
| 74 | +} |
| 75 | +``` |
| 76 | +> Common pitfalls when implementing the `onExecute` command, is not syncing the new state with the web part properties and/or not refreshing or re-rendering the web part. |
| 77 | +
|
| 78 | +## Code Snippets |
| 79 | +### Button command |
| 80 | +The type interace for a button is similar to the property panel's button (`IPropertyPaneButtonProps`). |
| 81 | + |
| 82 | +```typescript |
| 83 | +import { ITopActions } from '@microsoft/sp-top-actions'; |
| 84 | +import { PropertyPaneFieldType } from '@microsoft/sp-property-pane'; |
| 85 | +... |
| 86 | +public getTopActionsConfiguration(): ITopActions | undefined { |
| 87 | + return { |
| 88 | + topActions: [ |
| 89 | + { |
| 90 | + targetProperty: 'reset', |
| 91 | + type: PropertyPaneFieldType.Button, |
| 92 | + properties: { |
| 93 | + icon: 'Reset' |
| 94 | + } |
| 95 | + } |
| 96 | + ], |
| 97 | + onExecute: (actionName: string, newValue: any) => { |
| 98 | + if (actionName === 'reset') { |
| 99 | + // user defined logic to reset the web part |
| 100 | + this.reset(); |
| 101 | + } |
| 102 | + } |
| 103 | + }; |
| 104 | +} |
| 105 | +``` |
| 106 | + |
| 107 | +### Drop down command |
| 108 | +The type interace for a drop down is similar to the property panel's choice group (`IPropertyPaneChoiceGroupOption`). |
| 109 | + |
| 110 | +```typescript |
| 111 | +import { ITopActions } from '@microsoft/sp-top-actions'; |
| 112 | +import { PropertyPaneFieldType } from '@microsoft/sp-property-pane'; |
| 113 | +... |
| 114 | +public getTopActionsConfiguration(): ITopActions | undefined { |
| 115 | + return { |
| 116 | + topActions: [{ |
| 117 | + targetProperty: 'layout', |
| 118 | + type: PropertyPaneFieldType.ChoiceGroup, |
| 119 | + properties: { |
| 120 | + options: [ |
| 121 | + { |
| 122 | + // key maps to newValue in onExecute |
| 123 | + key: 'card', |
| 124 | + text: 'Card Layout', |
| 125 | + imageSize: { width: 32, height: 32 }, |
| 126 | + iconProps: { officeFabricIconFontName: 'ArticlesIcon' }, |
| 127 | + checked: this.state.layout === 'card' |
| 128 | + }, |
| 129 | + { |
| 130 | + key: 'list', |
| 131 | + text: 'List Layout', |
| 132 | + imageSize: { width: 32, height: 32 }, |
| 133 | + // you can use iconProps, icon to define icons |
| 134 | + icon: 'List', |
| 135 | + checked: this.state.alignment === 'list' |
| 136 | + } |
| 137 | + ] |
| 138 | + } |
| 139 | + }], |
| 140 | + // for ChoiceGroup drop down, the newValue tells us which option's key was selected |
| 141 | + onExecute: (actionName: string, newValue: any) => { |
| 142 | + if (actionName === 'layout') { |
| 143 | + this.setLayout(newValue); |
| 144 | + this.render(); |
| 145 | + } |
| 146 | + } |
| 147 | + }; |
| 148 | +} |
| 149 | +``` |
| 150 | + |
| 151 | +## Advanced configurations |
| 152 | +For advanced configurations of your top action commands, checkout the type definitions from `@microsoft/sp-property-pane` and `@microsoft/sp-top-actions`. Currently, the two supported top action commands, button and drop down, can be defined using a subset of the types `IPropertyPaneChoiceGroupOption` and `IPropertyPaneButtonProps`. |
| 153 | + |
| 154 | +For `IPropertyPaneButtonProps`, the currently supported properties are `icon`, `text`, `ariaLabel`, `disabled` |
| 155 | + |
| 156 | +For `IPropertyPaneChoiceGroupOption`, the currently supported porperty is `options` and from that array we support `key`, `text`, `iconProps.officeFabricIconFontName`, `imageSize`, `checked`, `title` |
| 157 | + |
| 158 | +> [!WARNING] |
| 159 | +> The APIs used for Top Actions are subject to change as the feature graduates to stable status. |
| 160 | +
|
| 161 | +```typescript |
| 162 | +import { IPropertyPaneButtonProps, IPropertyPaneChoiceGroupOption } from '@microsoft/sp-property-pane' |
| 163 | +import { ITopActions } from '@microsoft/sp-top-actions'; |
| 164 | +``` |
| 165 | +### See more |
| 166 | +[Top Actions API](/javascript/api/sp-top-actions) |
| 167 | + |
| 168 | +[IPropertyPaneButtonProps](/javascript/api/sp-webpart-base/ipropertypanebuttonprops) |
| 169 | + |
| 170 | +[IPropertyPaneChoiceGroupOption](/javascript/api/sp-webpart-base/ipropertypanechoicegroupoption) |
0 commit comments