diff --git a/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md b/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md index b7d512b61..827151211 100644 --- a/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md +++ b/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md @@ -1,28 +1,29 @@ -# Using Custom Dialogs with SharePoint Framework Extensions +# Use custom dialog boxes with SharePoint Framework Extensions -Custom dialogs are available from the **@microsoft/sp-dialog** package and can be used within the context of SharePoint Framework Extensions or client-side web parts. +You can use custom dialog boxes, available from the **@microsoft/sp-dialog** package, within the context of SharePoint Framework Extensions or client-side web parts. -This tutorial demonstrates the creation of a custom dialog and using it within the context of a ListView Command Set extension. +This article describes how to create a custom dialog box and use it within the context of a ListView Command Set extension. -> The SharePoint Framework dialog is currently in preview status and we are looking to collect feedback before it's officially released. Please provide feedback by using the [sp-dev-docs repository Issue list](https://github.com/SharePoint/sp-dev-docs/issues). +>**Note:** The custom dialog box feature is currently in preview. We are looking for your feedback before we release. To provide feedback, [file an issue in our GitHub repo](https://github.com/SharePoint/sp-dev-docs/issues). > Please note that debugging Custom ListView Command Sets in SharePoint Online is currently only available from the modern list experience within classic team sites hosted in a **developer tenant**. -> The end result of this tutorial is available as source code at https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-dialog. -## Setup your Environment +You can access the sample code that this article is based on in the [](https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-dialog) repo. -Before you can complete this guide, you will need to ensure you have [setup your environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) for development -using the SharePoint Framework (SPFx) and that you are using the latest SharePoint Framework Yeoman templates. +## Set up your development environment -> You can update your SharePoint Framework Yeoman templates by running the following command: -> ```sh -> npm install -g @microsoft/generator-sharepoint` -> ``` +To create a custom dialog box, you'll need to follow the steps in the [Set up your development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment). Make sure that you're using the latest SharePoint Framework Yeoman templates. -## Create a New Project +To update your SharePoint Framework Yeoman templates, run the following command: -Start by creating a new folder for the project using your console of choice: +```sh +npm install -g @microsoft/generator-sharepoint` +``` + +## Create a new project + +Create a new folder for the project using your console of choice: ```sh md dialog-cmd @@ -34,7 +35,7 @@ Then enter that folder: cd dialog-cmd ``` -Then run the Yeoman generator for the SharePoint Framework: +Run the Yeoman generator for the SharePoint Framework: ```sh yo @microsoft/sharepoint @@ -59,9 +60,9 @@ When the scaffold is complete, you should see the following message indicating a ![SharePoint client-side solution scaffolded successfully](../../../../images/ext-com-dialog-yeoman-complete.png) -> For information about troubleshooting any errors, see [Known issues](../basics/known-issues). +>**Note:** For information about troubleshooting any errors, see [Known issues](../basics/known-issues). -Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer. To open the folder in Visual Studio Code use the following command in the console: +When the scaffolding is complete, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer. To open the folder in Visual Studio Code, use the following command in the console: ```sh code . @@ -69,7 +70,7 @@ code . ![Initial Visual Studio Code structure after scaffolding](../../../../images/ext-com-dialog-vs-code-initial.png) -## Modify the Extension Manifest +## Modify the extension manifest In the extension manifest, configure the extension to have only one button. In the code editor, open the **./src/extensions/dialogDemo/DialogDemoCommandSet.manifest.json** file. Replace the commands section with the following JSON: @@ -85,24 +86,25 @@ In the extension manifest, configure the extension to have only one button. In t } ``` -## Adding the sp-dialog Package to the Solution +## Add the sp-dialog package to the solution -Return to the console and execute the following command to include the dialog API in your solution: +Return to the console and run the following command to include the dialog API in your solution: ```sh npm install @microsoft/sp-dialog --save ``` -Since we are using the `--save` option, this dependency will be added to the **package.json** file. This will ensure that it will be automatically installed when the `npm install` command is executed (this is important when restoring or cloning your project elsewhere). +Because you're using the `--save` option, this dependency will be added to the **package.json** file. This ensures that it will be installed automatically when the `npm install` command runs (this is important when you restore or clone your project elsewhere). Return to Visual Studio Code (or your preferred editor). -## Creating a Custom Dialog +## Create a custom dialog box + Create a new file called **ColorPickerDialog.tsx** in the **./src/extensions/dialogDemo/** folder. -Add the following import statements at the top of the newly created file. We are creating our custom dialog using the [Office UI Fabric React components](https://dev.office.com/fabric#/components), so the implementation will be in React. +Add the following import statements at the top of the newly created file. You're creating your custom dialog box using the [Office UI Fabric React components](https://dev.office.com/fabric#/components), so the implementation will be in React. -> Currently the `DialogContent` component is coming from `@microsoft/sp-dialog`, but will be included as part of the Office UI Fabric React components soon, as mentioned in the code comments below. +> **Note:** Currently the `DialogContent` component is coming from `@microsoft/sp-dialog`, but it will be included as part of the Office UI Fabric React components soon. ```ts import * as React from 'react'; @@ -121,7 +123,7 @@ import { import { DialogContent } from '@microsoft/sp-dialog'; ``` -Add the following interface definition just below the import statements. This wil be used to pass information and functions between your ListView Command Set extension and your custom dialog. +Add the following interface definition just below the import statements. This will be used to pass information and functions between your ListView Command Set extension and your custom dialog box. ```ts interface IColorPickerDialogContentProps { @@ -132,7 +134,7 @@ interface IColorPickerDialogContentProps { } ``` -Add the following class just below the interface definition. This React class is responsible for rendering the UI experiences inside of the custom dialog. Notice that we use the Office UI Fabric React components for actual rendering and just pass the needed properties. +Add the following class just below the interface definition. This React class is responsible for rendering the UI experiences inside the custom dialog box. Notice that you use the Office UI Fabric React components for actual rendering and just pass the needed properties. ```ts class ColorPickerDialogContent extends React.Component { @@ -165,7 +167,7 @@ class ColorPickerDialogContent extends React.Component - +