Skip to content

Commit 5ffecd3

Browse files
authored
Edit pass of SPFx > Extensions (SharePoint#1234)
* Edit in progress Serving your extension... * Fixed errors * Replace Enter Replaced bold Enter with plain Enter * Final edit * Final edit Extensions > Getting started * Edit in progress - Migrating extensions * Final edit * Edit in progress * Final edit * Edited customer instances * Final tweaks
1 parent f300ea9 commit 5ffecd3

25 files changed

+1070
-999
lines changed

docs/declarative-customization/site-design-pnp-provisioning.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ ms.date: 12/14/2017
99
> [!NOTE]
1010
> Site designs and site scripts are currently in preview and are subject to change. They are not currently supported for use in production environments.
1111
12-
Site designs offer a great way to standardize the look and feel of your site collections. You can't do some things with site designs, however, like add a footer to every page. You can use the PnP provisioning engine to create a template that you can use to provision an application customizer to a site. This application customizer can then update your page design, for example to register a footer on every page.
12+
Site designs offer a great way to standardize the look and feel of your site collections. You can't do some things with site designs, however, like add a footer to every page. You can use the PnP provisioning engine to create a template that you can use to provision an Application Customizer to a site. This Application Customizer can then update your page design, for example to register a footer on every page.
1313

14-
This article describes how to create a site design that applies a PnP provisioning template to a site. The template will add an application customizer to render a footer.
14+
This article describes how to create a site design that applies a PnP provisioning template to a site. The template will add an Application Customizer to render a footer.
1515

1616
The steps in this article use the following components:
1717

docs/design/accessibility.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Use the space bar to select or deselect the item currently in focus in a control
8484

8585
### Run a control
8686

87-
Select **Enter** or the return key to run a control.
87+
Select Enter or the return key to run a control.
8888

8989
*Figure 4. Selecting Enter to run a control*
9090

docs/spfx/call-microsoft-graph-using-graphhttpclient.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ You can use the **get()** method to make a REST call to Microsoft Graph. This ex
3636
* Select **Web Part** as the type of client-side component to create.
3737
* Enter **HelloGraph** as your web part name.
3838
* Enter **Calls the Microsoft Graph Groups API** as the web part description.
39-
* Accept the default **No javascript web framework** as the framework, and choose **Enter**.
39+
* Accept the default **No javascript web framework** as the framework, and choose Enter.
4040

4141
![GraphHttpClient values to enter at command line](../images/graphhttpclient-web-part-create.jpg)
4242

docs/spfx/extensions/basics/configure-extension-icon.md

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
11
---
2-
title: Configure extension icon
3-
ms.date: 11/20/2017
2+
title: Configure extension icon in SharePoint Framework (SPFx) Extensions
3+
description: Options for configuring the icon for your commands in SharePoint Framework (SPFx) Extensions.
4+
ms.date: 01/11/2018
45
ms.prod: sharepoint
56
---
67

78
# Configure extension icon
89

9-
Selecting an icon that illustrates the purpose of your custom command, makes it easier for users to find your command among other options visible in the toolbar or in the context menu. This article explains the different options available to you to configure the icon for your commands.
10-
11-
## Extension types that support icons
10+
Selecting an icon that illustrates the purpose of your custom command in SharePoint Framework makes it easier for users to find your command among other options visible in the toolbar or in the context menu. Specifying an icon for a command is optional. If you don't specify an icon, only the command title is displayed in the command bar.
1211

1312
SharePoint Framework supports building the following types of extensions:
1413

15-
- Application customizer
16-
- Field customizer
17-
- Command set
14+
- Application Customizer
15+
- Field Customizer
16+
- Command Set
17+
18+
The Command Set is the only type of SharePoint Framework Extension for which you can configure icons.
19+
20+
When deploying Command Sets, you can choose whether their commands should be visible on:
1821

19-
Command set is the only type of SharePoint Framework extension for which you can configure icons.
22+
- The command bar (`___location: ClientSideExtension.ListViewCommandSet.CommandBar`)
2023

21-
## Defining Command set locations
24+
- The context menu (`___location: ClientSideExtension.ListViewCommandSet.ContextMenu`)
2225

23-
When deploying command sets, you can choose whether their commands should be visible on the command bar (`___location: ClientSideExtension.ListViewCommandSet.CommandBar`), in the context menu (`___location: ClientSideExtension.ListViewCommandSet.ContextMenu`) or both (`___location: ClientSideExtension.ListViewCommandSet`). Icons defined for the different commands will be displayed only for commands displayed in the command bar.
26+
- Both (`___location: ClientSideExtension.ListViewCommandSet`)
2427

25-
## Configuring command set icons
28+
Icons defined for the different commands are displayed only for commands displayed in the command bar.
2629

27-
SharePoint Framework offers you two ways to define the icon for your extension.
30+
SharePoint Framework offers you two ways to define the icon for your extension:
2831

29-
### Using an external icon image
32+
- Use an external icon image
33+
- Use a base64-encoded image
34+
35+
## Use an external icon image
3036

3137
When building SharePoint Framework command sets, you can specify an icon for each command by providing an absolute URL pointing to the icon image in the extension manifest, in the **iconImageUrl** property.
3238

@@ -58,17 +64,21 @@ When building SharePoint Framework command sets, you can specify an icon for eac
5864
}
5965
```
6066

61-
The command icon displayed in the command bar is 16x16px. If your image is bigger, it will be sized proportionally to match these dimensions.
67+
<br/>
68+
69+
The command icon displayed in the command bar is 16x16 px. If your image is bigger, it is sized proportionally to match these dimensions.
6270

6371
![Custom image used as the command icon in the command bar](../../../images/extensionicon_commandbar_imagepng.png)
6472

65-
While using custom images gives you flexibility to choose an icon for your command, it requires you to deploy them along with your other extension assets. Additionally, your image might lose quality when displayed in higher DPI or specific accessibility settings. To avoid quality loss, you can use vector-based SVG images which are also supported by the SharePoint Framework.
73+
<br/>
6674

67-
### Using a base64 encoded image
75+
While using custom images gives you flexibility to choose an icon for your command, it requires you to deploy them along with your other extension assets. Additionally, your image might lose quality when displayed in higher DPI or specific accessibility settings. To avoid quality loss, you can use vector-based SVG images, which are also supported by the SharePoint Framework.
6876

69-
When using a custom image, rather than specifying an absolute URL to the image file hosted together with other extension assets, you can have your image base64 encoded and use the base64 string instead of the URL.
77+
## Use a base64-encoded image
7078

71-
> There are a number of services available on the Internet that you can use to base64 encode your image, such as [https://www.base64-image.de](https://www.base64-image.de).
79+
When using a custom image, rather than specifying an absolute URL to the image file hosted together with other extension assets, you can have your image base64-encoded and use the base64 string instead of the URL.
80+
81+
A number of services are available online that you can use to base64-encode your image, such as [Convert your images to Base64](https://www.base64-image.de).
7282

7383
After encoding the image, copy the base64 string and use it as the value for the **iconImageUrl** property in the web part manifest.
7484

@@ -100,10 +110,12 @@ After encoding the image, copy the base64 string and use it as the value for the
100110
}
101111
```
102112

103-
![Base64 encoded image displayed as web part icon in the toolbox](../../../images/extensionicon_commandbar_base64.png)
113+
<br/>
104114

105-
Base64 encoding works both for bitmap images such as PNG as well as vector SVG images. The big benefit of using base64 encoded images is, that you don't need to deploy the web part icon image separately.
115+
Base64 encoding works for both bitmap images, such as PNG, as well as vector SVG images. The big benefit of using base64-encoded images is that you don't need to deploy the web part icon image separately.
116+
117+
![Base64 encoded image displayed as web part icon in the toolbox](../../../images/extensionicon_commandbar_base64.png)
106118

107-
## Additional considerations
119+
## See also
108120

109-
Specifying an icon for a command is optional. If you don't specify an icon, then only the command title will be displayed in the command bar.
121+
- [Overview of SharePoint Framework Extensions](../overview-extensions.md)

docs/spfx/extensions/get-started/build-a-hello-world-extension.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,17 @@ You can also follow the steps in this article by watching the video on the [Shar
3838
3939
4. When prompted:
4040
41-
* Accept the default **app-extension** as your solution name, and select **Enter**.
42-
* Select **SharePoint Online only (latest)**, and select **Enter**.
43-
* Select **Use the current folder**, and select **Enter**.
41+
* Accept the default **app-extension** as your solution name, and select Enter.
42+
* Select **SharePoint Online only (latest)**, and select Enter.
43+
* Select **Use the current folder**, and select Enter.
4444
* Select **N** to require the extension to be installed on each site explicitly when it's being used.
4545
* Select **Extension** as the client-side component type to be created.
4646
* Select **Application Customizer** as the extension type to be created.
4747
4848
5. The next set of prompts ask for specific information about your extension. When prompted:
4949
50-
* Accept the default **HelloWorld** as your extension name, and select **Enter**.
51-
* Accept the default **HelloWorld description** as your extension description, and select **Enter**.
50+
* Accept the default **HelloWorld** as your extension name, and select Enter.
51+
* Accept the default **HelloWorld description** as your extension description, and select Enter.
5252
5353
<br/>
5454

0 commit comments

Comments
 (0)