Merge pull request SharePoint#4087 from andrewconnell/docfix-issue1916

Correct error in tutorial steps

Author: andrewconnell

docs/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api.md

@@ -20,34 +20,34 @@ You can follow these steps by watching the video on the SharePoint PnP YouTube C
 ## Create an extension project
 
 1. Create a new project directory in your favorite location.
-    
-    ```
+
+    ```shell
     md command-extension
     ```
-    
-2. Go to the project directory.
-    
-    ```
+
+1. Go to the project directory.
+
+    ```shell
     cd command-extension
     ```
-    
-3. Create a new HelloWorld extension by running the Yeoman SharePoint Generator.
-    
-    ```
+
+1. Create a new HelloWorld extension by running the Yeoman SharePoint Generator.
+
+    ```shell
     yo @microsoft/sharepoint
     ```
-    
-4. When prompted:
+
+1. When prompted:
 
     * Accept the default value of **command-extension** as your solution name, and then select Enter.
     * Select **SharePoint Online only (latest)**, and select Enter.
     * Select **Use the current folder**, and select Enter.
     * Select **N** to allow solution to be deployed to all sites immediately.
     * Select **N** on the question if solution contains unique permissions.
-    * Select **Extension** as the client-side component type to be created. 
+    * Select **Extension** as the client-side component type to be created.
     * Select **ListView Command Set** as the extension type to be created.
 
-5. The next set of prompts ask for specific information about your extension:
+1. The next set of prompts ask for specific information about your extension:
 
     * Accept the default value of **HelloWorld** as your extension name, and then select Enter.
     * Accept the default value of **HelloWorld description** as your extension description, and select Enter.
@@ -62,9 +62,9 @@ You can follow these steps by watching the video on the SharePoint PnP YouTube C
 
     For information about troubleshooting any errors, see [Known issues](../../known-issues-and-common-questions.md).
 
-6. Next, type the following into the console to start Visual Studio Code.
+1. Next, type the following into the console to start Visual Studio Code.
 
-    ```
+    ```shell
     code .
     ```
 
@@ -75,7 +75,7 @@ You can follow these steps by watching the video on the SharePoint PnP YouTube C
 
     ![SharePoint Framework solution opened after initial scaffolding](../../../images/ext-com-vscode-solution-structure.png)
 
-7. Open **HelloWorldCommandSet.manifest.json** in the **src\extensions\helloWorld** folder.
+1. Open **HelloWorldCommandSet.manifest.json** in the **src\extensions\helloWorld** folder.
 
     This file defines your extension type and a unique identifier `id` for your extension. You need this unique identifier later when debugging and deploying your extension to SharePoint.
 
@@ -85,7 +85,7 @@ You can follow these steps by watching the video on the SharePoint PnP YouTube C
 
     Currently, images are not properly referenced unless you are referring to them from absolute locations in a CDN within your manifest. This will be improved in future releases.
 
-## Code your ListView Command Set 
+## Code your ListView Command Set
 
 Open the **HelloWorldCommandSet.ts** file in the **src\extensions\helloWorld** folder.
 
@@ -123,30 +123,30 @@ When using the method `tryGetCommand`, you get a Command object, which is a repr
 The **OnExecute()** method defines what happens when a command is executed (for example, the menu item is selected). In the default implementation, different messages are shown based on which button was selected.
 
 ```typescript
-  @override
-  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
-    switch (event.itemId) {
-      case 'COMMAND_1':
-        Dialog.alert(`${this.properties.sampleTextOne}`);
-        break;
-      case 'COMMAND_2':
-        Dialog.alert(`${this.properties.sampleTextTwo}`);
-        break;
-      default:
-        throw new Error('Unknown command');
-    }
+@override
+public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
+  switch (event.itemId) {
+    case 'COMMAND_1':
+      Dialog.alert(`${this.properties.sampleTextOne}`);
+      break;
+    case 'COMMAND_2':
+      Dialog.alert(`${this.properties.sampleTextTwo}`);
+      break;
+    default:
+      throw new Error('Unknown command');
   }
+}
 ```
 
 ## Debug your ListView Command Set
 
-You cannot currently use the local Workbench to test SharePoint Framework Extensions. You'll need to test and develop them directly against a live SharePoint Online site. You don't have to deploy your customization to the app catalog to do this, which makes the debugging experience simple and efficient. 
+You cannot currently use the local Workbench to test SharePoint Framework Extensions. You'll need to test and develop them directly against a live SharePoint Online site. You don't have to deploy your customization to the app catalog to do this, which makes the debugging experience simple and efficient.
 
 1. Go to any SharePoint list in your SharePoint Online site by using the modern experience or create a new list. Copy the URL of the list to clipboard as we will be needing that in following step.
 
     Because our ListView Command Set is hosted from localhost and is running, we can use specific debug query parameters to execute the code in the list view.
 
-2. Open **serve.json** file from **config** folder. Update the **pageUrl** attributes to match a URL of the list where you want to test the solution. After edits your serve.json should look somewhat like:
+1. Open **serve.json** file from **config** folder. Update the **pageUrl** attributes to match a URL of the list where you want to test the solution. After edits your serve.json should look somewhat like:
 
     ```json
     {
@@ -182,98 +182,91 @@ You cannot currently use the local Workbench to test SharePoint Framework Extens
     }
     ```
 
-2. Compile your code and host the compiled files from the local machine by running this command:
+1. Compile your code and host the compiled files from the local machine by running this command:
 
-    ```
+    ```shell
     gulp serve
     ```
 
     When the code compiles without errors, it serves the resulting manifest from https://localhost:4321.
 
     This will also start your default browser within the URL defined in **serve.json** file. Notice that at least in Windows, you can control which browser window is used by activating the preferred one before executing this command.
 
-4. Accept the loading of debug manifests by selecting **Load debug scripts** when prompted.
-    
+1. Accept the loading of debug manifests by selecting **Load debug scripts** when prompted.
+
     ![Accept loading debugripts](../../../images/ext-com-accept-debug-scripts.png)
-    
-5. Notice the new **Command Two** button available in the toolbar. Select that button to see the text provided as property for the `sampleTextTwo` property.
+
+1. Notice the new **Command Two** button available in the toolbar. Select that button to see the text provided as property for the `sampleTextTwo` property.
 
     ![Command Two button visible in the document library toolbar](../../../images/ext-com-default-customizer-output.png)
 
-6. The **Command One** button is not visible based on the code, until one row is selected in the document library. Upload or create a document to the library and confirm that the second button is visible.
+1. The **Command One** button is not visible based on the code, until one row is selected in the document library. Upload or create a document to the library and confirm that the second button is visible.
 
     ![Selecting one document to get Command One button visible](../../../images/ext-com-default-customizer-doc-select.png)
 
-7. Select **Command Two** to see how the dialog control works, which is used in the default output from the solution scaffolding when the ListView Command Set is selected as the extension type. 
+1. Select **Command Two** to see how the dialog control works, which is used in the default output from the solution scaffolding when the ListView Command Set is selected as the extension type. 
 
     ![Selecting one document to get Command One button visible](../../../images/ext-com-default-customizer-btn-click.png)
 
-
 ### More details about serve.config options
 
-- **customActions** simulates a custom action. You can set many properties on this `CustomAction` object that affect the look, feel, and location of your button; we’ll cover them all later.
-    - **GUID**: GUID of the extension.
-    - **Location**: Where the commands are displayed. The possible values are:
-        - **ClientSideExtension.ListViewCommandSet.ContextMenu**:  The context menu of the item(s).
-        - **ClientSideExtension.ListViewCommandSet.CommandBar**: The top command set menu in a list or library.
-        - **ClientSideExtension.ListViewCommandSet**: Both the context menu and the command bar (corresponds to SPUserCustomAction.Location="CommandUI.Ribbon").
-    - **Properties**: An optional JSON object containing properties that are available via the `this.properties` member.
+* **customActions** simulates a custom action. You can set many properties on this `CustomAction` object that affect the look, feel, and location of your button; we’ll cover them all later.
+  * **GUID**: GUID of the extension.
+  * **Location**: Where the commands are displayed. The possible values are:
+    * **ClientSideExtension.ListViewCommandSet.ContextMenu**:  The context menu of the item(s).
+    * **ClientSideExtension.ListViewCommandSet.CommandBar**: The top command set menu in a list or library.
+    * **ClientSideExtension.ListViewCommandSet**: Both the context menu and the command bar (corresponds to SPUserCustomAction.Location="CommandUI.Ribbon").
+  * **Properties**: An optional JSON object containing properties that are available via the `this.properties` member.
 
 <br/>
 
 ## Enhance the ListView Command Set rendering
 
 The default solution takes advantage of a new Dialog API, which can be used to show modal dialogs easily from your code. In the following steps, we'll slightly modify the default experience to demonstrate Dialog API use cases.
 
-1. Return to the console, and execute the following command to include the Dialog API in our solution.
-
-2. Return to Visual Studio Code (or your preferred editor).
+1. Return to Visual Studio Code (or your preferred editor).
+1. Open **HelloWorldCommandSet.ts** from the **src\extensions\helloWorld** folder.
+1. Update the **onExecute** method as follows:
 
-3. Open **HelloWorldCommandSet.ts** from the **src\extensions\helloWorld** folder.
-
-4. Update the **onExecute** method as follows:
-    
     ```typescript
-      @override
-      public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
-        switch (event.itemId) {
-          case 'COMMAND_1':
-            Dialog.alert(`Clicked ${strings.Command1}`);
-            break;
-          case 'COMMAND_2':
-            Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {
-              Dialog.alert(value);
-            });
-            break;
-          default:
-            throw new Error('Unknown command');
-        }
+    @override
+    public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
+      switch (event.itemId) {
+        case 'COMMAND_1':
+          Dialog.alert(`Clicked ${strings.Command1}`);
+          break;
+        case 'COMMAND_2':
+          Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {
+            Dialog.alert(value);
+          });
+          break;
+        default:
+          throw new Error('Unknown command');
       }
-    ``` 
-    
-5. In your console window, ensure that you do not have any exceptions. If you do not already have the solution running in localhost, execute the following command:
-
+    }
     ```
+
+1. In your console window, ensure that you do not have any exceptions. If you do not already have the solution running in localhost, execute the following command:
+
+    ```shell
     gulp serve
     ```
 
-6. Accept the loading of debug manifests by selecting **Load debug scripts** when prompted.
+1. Accept the loading of debug manifests by selecting **Load debug scripts** when prompted.
 
     ![Accept loading debug scripts](../../../images/ext-com-accept-debug-scripts.png)
 
     We still have the same buttons in the toolbar, but you'll notice they behave differently if you select them one-by-one. Now we are using the new Dialog API, which can be easily used with your solutions, even for complex scenarios. 
 
     ![Accept loading debug scripts OK button](../../../images/ext-com-show-adv-dialog-input.png)
 
-
 ## Add a ListView Command Set to a solution package for deployment
 
 1. Return to your solution in Visual Studio Code (or to your preferred editor).
+1. Extend the **sharepoint** folder and **assets** sub folder in the root of the solution to see the existing **elements.xml** file. 
 
-2. Extend the **sharepoint** folder and **assets** sub folder in the root of the solution to see the existing **elements.xml** file. 
-    
     ![assets folder in solution structure](../../../images/ext-com-assets-folder.png)
-    
+
 ### Review the elements.xml file
 
 Open the **elements.xml** file inside the **sharepoint\assets** folder.
@@ -294,7 +287,7 @@ Notice that we use a specific location value of `ClientSideExtension.ListViewCom
         ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
         ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
     </CustomAction>
-    
+
 </Elements>
 ```
 
@@ -376,46 +369,41 @@ Now you are ready to deploy the solution to a SharePoint site and have the `Cust
 Since solutions will by default use the **asset packaging** capability, your JavaScript files and other assets will be automatically packaged inside of the **sppkg** file and then hosted automatically from Office 365 CDN or from the app catalog site collection. 
 
 1. In the console window, enter the following command to package your client-side solution that contains the extension so that we get the basic structure ready for packaging:
-    
-    ```
+
+    ```shell
     gulp bundle --ship
     ```
 
-2. Execute the following command so that the solution package is created:
+1. Execute the following command so that the solution package is created:
 
-    ```
+    ```shell
     gulp package-solution --ship
     ```
 
     The command creates the package in the **sharepoint/solution** folder:
 
-    ```
+    ```shell
     command-extension.sppkg
     ```
 
-3. Deploy the package that was generated to the app catalog. To do this, go to your tenant's **app catalog** and open the **Apps for SharePoint** library.
-
-4. Upload or drag-and-drop the `command-extension.sppkg` located in the **sharepoint/solution** folder to the app catalog. SharePoint displays a dialog and asks you to trust the client-side solution.
-
-5. Select the **Deploy** button.
+1. Deploy the package that was generated to the app catalog. To do this, go to your tenant's **app catalog** and open the **Apps for SharePoint** library.
+1. Upload or drag-and-drop the `command-extension.sppkg` located in the **sharepoint/solution** folder to the app catalog. SharePoint displays a dialog and asks you to trust the client-side solution.
+1. Select the **Deploy** button.
 
     ![Trust operation in app catalog upload](./../../../images/ext-com-sppkg-deploy-trust.png)
 
-7. Go to the site where you want to test SharePoint asset provisioning. This could be any site collection in the tenant where you deployed this solution package.
-
-8. Select the gears icon on the top navigation bar on the right, and then select **Add an app** to go to your Apps page.
-
-9. In the **Search** box, enter **extension**, and then select Enter to filter your apps.
+1. Go to the site where you want to test SharePoint asset provisioning. This could be any site collection in the tenant where you deployed this solution package.
+1. Select the gears icon on the top navigation bar on the right, and then select **Add an app** to go to your Apps page.
+1. In the **Search** box, enter **extension**, and then select Enter to filter your apps.
 
     ![installing the listview command set to a site](../../../images/ext-com-install-solution-to-site.png)
 
-10. Select the **command-extension-client-side-solution** app to install the solution on the site. When the installation is complete, refresh the page by selecting F5.
-
-11. When the application has been successfully installed, select **New** from the toolbar on the **Site Contents** page, and then select **List**.
+1. Select the **command-extension-client-side-solution** app to install the solution on the site. When the installation is complete, refresh the page by selecting F5.
+1. When the application has been successfully installed, select **New** from the toolbar on the **Site Contents** page, and then select **List**.
 
     ![Creating a new list](../../../images/ext-com-create-new-list.png)
 
-12. Provide the name as **Sample**, and then select **Create**.
+1. Provide the name as **Sample**, and then select **Create**.
 
     Notice how **Command One** and **Command Two** are rendering in the toolbar based on your ListView Command Set customizations. Notice that the extension is also rendered automatically for any existing lists, not only for new ones.
 
@@ -426,5 +414,5 @@ Since solutions will by default use the **asset packaging** capability, your Jav
 
 ## See also
 
-- [Build your first Field Customizer extension](./building-simple-field-customizer.md)
-- [Overview of SharePoint Framework Extensions](../overview-extensions.md)
+* [Build your first Field Customizer extension](./building-simple-field-customizer.md)
+* [Overview of SharePoint Framework Extensions](../overview-extensions.md)