|
1 | 1 | ---
|
2 | 2 | title: Simplify adding web parts with preconfigured entries
|
3 | 3 | description: Use preconfigured entries in a SharePoint Framework client-side web part to provide users with preconfigured versions of your web part.
|
4 |
| -ms.date: 07/19/2022 |
| 4 | +ms.date: 12/05/2023 |
5 | 5 | ms.localizationpriority: high
|
6 | 6 | ---
|
7 | 7 | # Simplify adding web parts with preconfigured entries
|
@@ -54,15 +54,15 @@ If you've built classic web parts with full-trust solutions, you can think of ea
|
54 | 54 |
|
55 | 55 | Each item in the `preconfiguredEntries` array consists of several properties. The following table explains the purpose of each property.
|
56 | 56 |
|
57 |
| -| Property name | Value type | Required | Purpose | Sample value | |
58 |
| -| :----------------------- | :--------------- | :------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- | |
59 |
| -| `title` | ILocalizedString | yes | The web part title that is displayed in the toolbox. | `"title": { "default": "Weather", "nl-nl": "Weerbericht" }` | |
60 |
| -| `description` | ILocalizedString | yes | The web part description that is displayed in the toolbox tooltips. | `"description": { "default": "Shows weather in the given ___location", "nl-nl": "Toont weerbericht voor de opgegeven locatie" }` | |
61 |
| -| `officeFabricIconFontName` | string | no | The icon for the web part that is displayed in the toolbox. Its value must be one of the [Office UI Fabric icon names](https://developer.microsoft.com/fluentui#/styles/web/icons). If this property has a value, the `iconImageUrl` property is ignored. | `"officeFabricIconFontName": "Sunny"` | |
62 |
| -| `iconImageUrl` | string | no | The icon for the web part that is displayed in the toolbox and is represented by an image URL. The image at the URL must be exactly 40x28 px. If the `officeFabricIconName` property doesn't have a value, this property must have a value. | `"iconImageUrl": "https://cdn.contoso.com/weather.png"` | |
63 |
| -| `groupId` | string | yes | The group ID to determine which modern group contains the web part in a modern site page. The SharePoint Framework reserves group IDs for [predefined groups](#predefined-modern-groups). The developer can pick one from those groups. If the developer fills an ID not in the predefined groups, it falls back to **Other** group. | `"groupId": "1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489"` | |
64 |
| -| `group` | ILocalizedString | no | The group name in the web part picker to contain the web part in the classic page. If no value is provided, the web part is displayed in the **Miscellaneous** group. | `"group": { "default": "Content", "nl-nl": "Inhoud" }` | |
65 |
| -| `properties` | TProperties | yes | A key-value pair object with default values for web part properties. | `"properties": { "___location": "Redmond", "numberOfDays": 3, "showIcon": true }` | |
| 57 | +| Property name | Value type | Required | Purpose | Sample value | |
| 58 | +| :------------------------- | :--------------- | :------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- | |
| 59 | +| `title` | ILocalizedString | yes | The web part title that is displayed in the toolbox. | `"title": { "default": "Weather", "nl-nl": "Weerbericht" }` | |
| 60 | +| `description` | ILocalizedString | yes | The web part description that is displayed in the toolbox tooltips. | `"description": { "default": "Shows weather in the given ___location", "nl-nl": "Toont weerbericht voor de opgegeven locatie" }` | |
| 61 | +| `officeFabricIconFontName` | string | no | The icon for the web part that is displayed in the toolbox. Its value must be one of the [Office UI Fabric icon names](https://developer.microsoft.com/fluentui#/styles/web/icons). If this property has a value, the `iconImageUrl` property is ignored. | `"officeFabricIconFontName": "Sunny"` | |
| 62 | +| `iconImageUrl` | string | no | The icon for the web part that is displayed in the toolbox and is represented by an image URL. The image at the URL must be exactly 40x28 px. If the `officeFabricIconName` property doesn't have a value, this property must have a value. | `"iconImageUrl": "https://cdn.contoso.com/weather.png"` | |
| 63 | +| `groupId` | string | yes | The group ID to determine which modern group contains the web part in a modern site page. The SharePoint Framework reserves group IDs for [predefined groups](#predefined-modern-groups). The developer can pick one from those groups. If the developer fills an ID not in the predefined groups, it falls back to **Other** group. | `"groupId": "1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489"` | |
| 64 | +| `group` | ILocalizedString | no | The group name in the web part picker to contain the web part in the classic page. If no value is provided, the web part is displayed in the **Miscellaneous** group. | `"group": { "default": "Content", "nl-nl": "Inhoud" }` | |
| 65 | +| `properties` | TProperties | yes | A key-value pair object with default values for web part properties. | `"properties": { "___location": "Redmond", "numberOfDays": 3, "showIcon": true }` | |
66 | 66 |
|
67 | 67 | Some web part properties have a value of type `ILocalizedString`. This type is a key-value pair object that allows developers to specify strings for the different locales. At a minimum, a value of type `ILocalizedString` must contain the `default` value.
|
68 | 68 |
|
@@ -95,17 +95,17 @@ An `ILocalizedString` value that isn't valid because the `default` key is missin
|
95 | 95 |
|
96 | 96 | There are seven out-of-the-box groups as shown in the following table. Use the group ID in the `groupId` property.
|
97 | 97 |
|
98 |
| -| Group name | ID | Group includes... | |
| 98 | +| Group name | ID | Group includes... | |
99 | 99 | | ------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
100 | 100 | | Text, media, and content | `cf066440-0614-43d6-98ae-0b31cf14c7c3` | Web parts that display text, multi-media, documents, information from the web, and other rich content. |
|
101 |
| -| Discovery | `1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489` | Web parts that organize, group, and filter content to help users discover information. | |
| 101 | +| Discovery | `1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489` | Web parts that organize, group, and filter content to help users discover information. | |
102 | 102 | | Communication and collaboration | `75e22ed5-fa14-4829-850a-c890608aca2d` | Web parts that facilitate information sharing, team work, and social interactions. |
|
103 | 103 | | Planning and process | `1bc7927e-4a5e-4520-b540-71305c79c20a` | Web parts that empower team productivity with the use of planning and process tools. |
|
104 | 104 | | Business and intelligence | `4aca9e90-eff5-4fa1-bac7-728f5f157b66` | Web parts for tracking and analyzing data, and for integrating business flow with pages. |
|
105 | 105 | | Site tools | `070951d7-94da-4db8-b06e-9d581f1f55b1` | Web parts for site information and management. |
|
106 |
| -| Other | `5c03119e-3074-46fd-976b-c60198311f70` | Web parts not in other groups. | |
| 106 | +| Advanced | `5c03119e-3074-46fd-976b-c60198311f70` | Web parts not in other groups. | |
107 | 107 |
|
108 |
| -If the developer fills an ID not in the previous list, the web part falls back to the **Other** group. |
| 108 | +If the developer fills an ID not in the previous list, the web part falls back to the **Advanced** group. |
109 | 109 |
|
110 | 110 | To see how you can use preconfigured entries when building web parts, you'll build a sample gallery web part. Using several properties, users can configure this web part to show items from a selected list in a specific way. For brevity, you'll omit the actual implementation of the web part logic and will focus on using the `preconfiguredEntries` property to provide preconfigured versions of the gallery web part.
|
111 | 111 |
|
|
0 commit comments