SPFx edit pass complete (SharePoint#1312)

* Edits in progress

* Edit in progress

* Edit in progress

* Edits in progress

* Edits in progress

* Edits in progress

* Fixed broken links

* Fixed broken links

* Fixed broken links

* Final edit

* Edit in progress

* Final edit

* Fixed errors

* Edit in progress

* Final edit

* Changed ```ts to ```typescript

* Changed ```ts to ```typescript

Author: Linda-Editor

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

@@ -1,8 +1,16 @@
+---
+title: Tutorial - Use GraphHttpClient to call Microsoft Graph
+description: Use the GraphHttpClient class to make calls to the Microsoft Graph REST API by using the get(), post(), and fetch() methods.
+ms.date: 02/02/2018
+ms.prod: sharepoint
+---
+
 # Use GraphHttpClient to call Microsoft Graph
+
 > [!IMPORTANT]
->The **GraphHttpClient** is currently in preview and is subject to change. It is not currently supported for use in production environments.
+> The **GraphHttpClient** is currently in preview and is subject to change. It is not currently supported for use in production environments.
 
-Use the **GraphHttpClient** class to make calls to the Microsoft Graph REST API. You can make GET, POST, and PATCH requests using the **get()**, **post()**, and **fetch()** methods. This article shows how to build a web part that uses **GraphHttpClient**, but you can use **GraphHttpClient** in any SharePoint Framework client code.
+Use the **GraphHttpClient** class to make calls to the Microsoft Graph REST API. You can make GET, POST, and PATCH requests by using the **get()**, **post()**, and **fetch()** methods. This article shows how to build a web part that uses **GraphHttpClient**, but you can use **GraphHttpClient** in any SharePoint Framework client code.
 
 ## Retrieve Office 365 groups using a GET call
 
@@ -36,11 +44,11 @@ You can use the **get()** method to make a REST call to Microsoft Graph. This ex
   * Select **Web Part** as the type of client-side component to create.
   * Enter **HelloGraph** as your web part name.
   * Enter **Calls the Microsoft Graph Groups API** as the web part description.
-  * Accept the default **No javascript web framework** as the framework, and choose Enter.
+  * Accept the default **No javascript web framework** as the framework, and select Enter.
 
   ![GraphHttpClient values to enter at command line](../images/graphhttpclient-web-part-create.jpg)
 
-5. The Yeoman generator will build the web part. When the scaffolding is finished, 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 that you prefer.
+5. The Yeoman generator builds the web part. When the scaffolding is finished, 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 that you prefer.
 
 6. Run the gulp serve command and confirm that it runs in the local workbench correctly.
 
@@ -49,13 +57,14 @@ You can use the **get()** method to make a REST call to Microsoft Graph. This ex
   ```
 
 ### Add a button and placeholder for results
+
 Next, you'll modify the HTML to provide a button to retrieve Office 365 groups. The HTML also needs a placeholder to display the groups.
 
 1. In your code editor, open the **/src/webparts/helloGraph/HelloGraphWebPart.ts** file.
 
-2. Modify the **render()** method so that it contains a button and a **div** where the code will list the Office 365 groups after they are retrieved.
+2. Modify the **render()** method so that it contains a button and a **div** where the code lists the Office 365 groups after they are retrieved.
 
-  Your code should look like the following TypeScript.
+  Your code should look like the following TypeScript:
 
   ```typescript
     public render(): void {
@@ -96,6 +105,7 @@ Next, you'll modify the HTML to provide a button to retrieve Office 365 groups.
   ```
 
 ### Use the GraphHttpClient.get method to retrieve Office 365 groups
+
 Next, you'll call the **GraphHttpClient.get()** method to make a REST call to Microsoft Graph to retrieve a list of Office 365 groups.
 
 1. Import the **GraphHttpClient** class and related types by adding the following import statement near the top of the **HelloGraphWebPart.ts** file.
@@ -122,13 +132,13 @@ Next, you'll call the **GraphHttpClient.get()** method to make a REST call to Mi
   }
   ```
 
-  In the previous code, the context property has the GraphHttpClient instance. When you call the **get()** method, a REST call is made to Microsoft Graph that passes the specified URL. In this case, the URL is **v1.0/groups?orderby=displayName**. This issues a GET request and Microsoft Graph will return all Office 365 groups in the tenant in order by display name.
+  In the previous code, the context property has the GraphHttpClient instance. When you call the **get()** method, a REST call is made to Microsoft Graph that passes the specified URL. In this case, the URL is **v1.0/groups?orderby=displayName**. This issues a GET request, and Microsoft Graph returns all Office 365 groups in the tenant in order by display name.
 
-  You can issue any GET request by using this technique and entering the correct URL values. To find the URL values, see the [Microsoft Graph documentation](https://developer.microsoft.com/en-us/graph/docs/concepts/overview). For example, you can use URL specified in the [Groups GET request](https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/group_get) topic to get groups. 
+  You can issue any GET request by using this technique and entering the correct URL values. To find the URL values, see the [Microsoft Graph documentation](https://developer.microsoft.com/en-us/graph/docs/concepts/overview). For example, you can use the URL specified in the [Groups GET request](https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/group_get) topic to get groups. 
 
-  The **get()** method returns an **HttpClientResponse**, which you can use to determine whether the call was successful. The returned JSON is in the **result.value**. Because you expect multiple groups to be returned, you will pass the value to a **_renderTable()** method, which will build a table of rows for each group.
+  The **get()** method returns an **HttpClientResponse**, which you can use to determine whether the call was successful. The returned JSON is in the **result.value**. Because you expect multiple groups to be returned, you pass the value to a **_renderTable()** method, which builds a table of rows for each group.
 
-3. Create a **_renderTable()** method to render the returned groups in a table where each row represent a group. Add the following method to the **HelloGraphWebPart** class.
+3. Create a **_renderTable()** method to render the returned groups in a table where each row represents a group. Add the following method to the **HelloGraphWebPart** class.
 
   ```typescript
   protected _renderTable(items: IOffice365Group[]): void {
@@ -159,6 +169,7 @@ Next, you'll call the **GraphHttpClient.get()** method to make a REST call to Mi
   ```
 
 ### Run the web part to call Microsoft Graph
+
 The code needs to call the **GraphHttpClient** application that runs on SharePoint, so you can't run it on the local workbench. You have to package and deploy it to SharePoint.
 
 1. Use gulp to package your solution.
@@ -170,34 +181,36 @@ The code needs to call the **GraphHttpClient** application that runs on SharePoi
 2. Deploy the solution to your SharePoint tenant:
   * Go to your site's App Catalog.
   * Upload or drag and drop the **hellograph-webpart.sppkg** to the App Catalog.
-  * When prompted, if you trust the **hellograph-webpart-client-side-solution**, select **Make this solution available to all sites in the organization**, and choose **Deploy**.
+  * When prompted, if you trust the **hellograph-webpart-client-side-solution**, select **Make this solution available to all sites in the organization**, and select **Deploy**.
 
 3. Use gulp serve to host the web part.
 
   ```
   gulp serve --nobrowser
   ```
 
-4. Add the web part to a web page, or use the SharePoint workbench.
+4. Add the web part to a web page, or use the SharePoint Workbench.
 
   You should see the following on your page.
+
   ![GraphHttpClient web part showing read groups button and one group listed in a table](../images/graphhttpclient-read-groups-display.jpg)
 
-  When you choose **Read Groups**, you will see a list of all the Office 365 groups on your tenant. If no groups are listed, you'll just see a message that indicates that there were no groups. You will create a new group next.
+  When you select **Read Groups**, you see a list of all the Office 365 groups on your tenant. If no groups are listed, you'll just see a message that indicates that there were no groups. You will create a new group next.
 
 ## Create a new Office 365 group using a POST call
 
 You can issue POST calls to the Microsoft Graph API by using the **GraphHttpClient.post()** method. You'll use the **post()** method to create a new Office 365 group.
 
 
 ### Add a button and placeholder for results
-Again, you need to modify the HTML to add a button that will create a new group.
+
+Again, you need to modify the HTML to add a button that creates a new group.
 
 1. In your code editor, open the **/src/webparts/helloGraph/HelloGraphWebPart.ts** file.
 
-2. Modify the **render()** method so that it contains a button and a **div** that will indicate whether the creation was successful.
+2. Modify the **render()** method so that it contains a button and a **div** that indicates whether the creation was successful.
 
-  Your code should look like the following TypeScript.
+  Your code should look like the following TypeScript:
 
   ```typescript
     public render(): void {
@@ -254,7 +267,7 @@ Again, you need to modify the HTML to add a button that will create a new group.
     }
   ```
 
-  The previous code creates a simple group using the code example from the Microsoft Graph [Create group](https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/group_post_groups) article.
+  The previous code creates a simple group by using the code example from the Microsoft Graph [Create group](https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/group_post_groups) article.
 
   The **post()** issues a POST REST API call to the **v1.0/groups** URL. The third parameter is an **IGraphHttpClientOptions** value in which the JSON body is specified to describe the new group. The **HttpClientResponse** is used to determine whether the call was successful, and to display an appropriate result.
 
@@ -271,24 +284,25 @@ Again, you need to modify the HTML to add a button that will create a new group.
 2. Deploy the solution to your SharePoint tenant:
   * Go to your site's App Catalog.
   * Upload or drag and drop the **hellograph-webpart.sppkg** to the App Catalog.
-  * Because your solution is already registered, you'll be prompted as to whether you want to replace it. Choose **Replace it**.
-  * When prompted as to whether you trust the solution, choose **Deploy**.
+  * Because your solution is already registered, you are prompted as to whether you want to replace it. Select **Replace it**.
+  * When prompted as to whether you trust the solution, select **Deploy**.
 
 3. Use gulp serve to host the web part.
 
   ```
   gulp serve --nobrowser
   ```
 
-4. Add the web part to a web page, or use the SharePoint workbench.
+4. Add the web part to a web page, or use the SharePoint Workbench.
 
   You should see the following on your page.
+
   ![GraphHttpClient web part with create group button indicating group was created successfully](../images/graphhttpclient-group-created.jpg)
 
-5. When you choose **Create New Group**, the code will create a new Office 365 group. 
+5. When you select **Create New Group**, the code creates a new Office 365 group. 
 
   > [!NOTE] 
-  >If you try to create the same group again, the code will return an error because the group already exists. The error is logged to the console, which you can view in the browser's developer mode.
+  > If you try to create the same group again, the code returns an error because the group already exists. The error is logged to the console, which you can view in the browser's developer mode.
 
 ## Update a group using a PATCH call
 
@@ -316,3 +330,7 @@ The following code shows how to call the **fetch()** method to update an existin
 ```
 
 The ID of the group is specified in the URL. Get the ID by using a GET call first. The **method** parameter is set to **PATCH**. The body specifies which group properties to modify.
+
+## See also
+
+- [Overview of the GraphHttpClient class](overview-graphhttpclient.md)

docs/spfx/css-recommendations.md

@@ -46,7 +46,7 @@ To avoid issues, you should always assume that there are multiple instances of y
 
 #### Bad practice
 
-```ts
+```typescript
 // ...
 
 export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
@@ -66,7 +66,7 @@ export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorld
 
 #### Good practice
 
-```ts
+```typescript
 // ...
 
 export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
@@ -175,7 +175,7 @@ exports.default = styles;
 
 To use the generated class names in your code, you first import the styles of your component, and then use the property pointing to the particular class:
 
-```ts
+```typescript
 import styles from './todoList.module.scss';
 // ...
 

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

@@ -94,7 +94,7 @@ Open the **HelloWorldCommandSet.ts** file in the **src\extensions\helloWorld** f
 
 Notice that the base class for the ListView Command Set is imported from the **sp-listview-extensibility** package, which contains SharePoint Framework code required by the ListView Command Set.
 
-```ts
+```typescript
 import { override } from '@microsoft/decorators';
 import { Log } from '@microsoft/sp-core-library';
 import {
@@ -112,7 +112,7 @@ The **onListViewUpdated()** event occurs separately for each command (for exampl
 
 When using the method `tryGetCommand`, you get a Command object, which is a representation of the command that shows in the UI. You can modify its values, such as `title`, or `visible`, to modify the UI element. SPFx uses this information when re-rendering the commands. These objects keep the state from the last render, so if a command is set to `visible = false`, it remains invisible until it is set back to `visible = true`.
 
-```ts
+```typescript
   @override
   public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
     const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
@@ -126,7 +126,7 @@ 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. 
 
 
-```ts
+```typescript
   @override
   public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
     switch (event.itemId) {
@@ -218,7 +218,7 @@ The default solution takes advantage of a new Dialog API, which can be used to s
 
 5. Update the **onExecute** method as follows:
     
-    ```ts
+    ```typescript
       @override
       public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
         switch (event.commandId) {

docs/spfx/extensions/get-started/building-simple-field-customizer.md

@@ -93,7 +93,7 @@ Open the **HelloWorldFieldCustomizer.ts** file in the **src\extensions\helloWorl
 
 Notice that the base class for the Field Customizer is imported from the **sp-listview-extensibility** package, which contains SharePoint Framework code required by the Field Customizer.
 
-```ts
+```typescript
 import { Log } from '@microsoft/sp-core-library';
 import { override } from '@microsoft/decorators';
 import {
@@ -110,7 +110,7 @@ The logic for your Field Customizer is contained in the **OnInit()**, **onRender
 
 The following are the contents of **onRenderCell()** and **onDisposeCell()** in the default solution:
 
-```ts
+```typescript
 @override
   public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
     // Use this method to perform your custom cell rendering.
@@ -227,7 +227,7 @@ Now that we have successfully tested the out-of-the-box starting point of the Fi
     
 2. Open the **HelloWorldFieldCustomizer.ts** file in the **src\extensions\helloWorld** folder, and update the **onRednerCell** method as follows.
 
-    ```ts
+    ```typescript
         @override
         public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
 

docs/spfx/extensions/get-started/using-page-placeholder-with-extensions.md

@@ -23,7 +23,7 @@ You can also follow these steps by watching the video on the [SharePoint PnP You
 
 Application Customizer extensions are supported with `Site`, `Web`, and `List` scopes. You can control the scope by deciding where or how the Application Customizer is registered in your SharePoint tenant. When the Application Customizer exists in the scope and is being rendered, you can use the following method to get access to the placeholder. 
 
-```ts
+```typescript
     // Handling the Bottom placeholder
     if (!this._bottomPlaceholder) {
       this._bottomPlaceholder =
@@ -44,7 +44,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 2. Add the `PlaceholderContent` and `PlaceholderName` to the import from `@microsoft/sp-application-base` by updating the import statement as follows:
 
-	```ts
+	```typescript
 		import {
 			BaseApplicationCustomizer, 
 			PlaceholderContent,
@@ -54,7 +54,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 	Also add the following import statements after the `strings` import at the top of the file:
 
-	```ts
+	```typescript
 		import styles from './AppCustomizer.module.scss';
 		import { escape } from '@microsoft/sp-lodash-subset'; 
 	```
@@ -97,7 +97,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 	> [!NOTE] 
 	> If your Command Set uses the ClientSideComponentProperties JSON input, it is deserialized into the `BaseExtension.properties` object. You can define an interface to describe it.
 
-	```ts
+	```typescript
 		export interface IHelloWorldApplicationCustomizerProperties {
 			Top: string;
 			Bottom: string;
@@ -106,7 +106,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 6. Add the following private variables inside the **HelloWorldApplicationCustomizer** class. In this scenario, these can just be local variables in an `onRender` method, but if you want to share them with other objects, define them as private variables. 
 
-	```ts
+	```typescript
 		export default class HelloWorldApplicationCustomizer
 			extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {
 
@@ -118,7 +118,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 7. Update the `onInit` method code as follows:
 
-	```ts
+	```typescript
 			@override
 			public onInit(): Promise<void> {
 				Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
@@ -134,7 +134,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 8. Create a new `_renderPlaceHolders` private method with the following code:
 
-	```ts
+	```typescript
 	    private _renderPlaceHolders(): void {
 
 	      console.log('HelloWorldApplicationCustomizer._renderPlaceHolders()');
@@ -213,7 +213,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
 
 9. Add the following method after the `_renderPlaceHolders` method. In this case, you simply output a console message when the extension is removed from the page. 
 
-	```ts
+	```typescript
 	    private _onDispose(): void {
 	      console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
 	    }