Skip to content

Commit 3bf81d1

Browse files
authored
Update connect-to-sharepoint.md
Clarify the text around using this.context.pageContext
1 parent 21ae0e0 commit 3bf81d1

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

docs/spfx/web-parts/get-started/connect-to-sharepoint.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ However, when the Workbench is hosted in SharePoint, you get access to the page
4040

4141
### To get access to the page context
4242

43-
1. Use the following variable in your web part class:
43+
To access contextual information in your web part, you'll be using the following object in your code:
4444

4545
```typescript
4646
this.context.pageContext
4747
```
4848

49-
2. Switch to Visual Studio code (or your preferred IDE) and open **src\webparts\helloWorld\HelloWorldWebPart.ts**.
49+
1. Switch to Visual Studio code (or your preferred IDE) and open **src\webparts\helloWorld\HelloWorldWebPart.ts**.
5050

51-
3. Inside the **render** method, replace the **innerHTML** code block with the following code:
51+
2. Inside the **render** method, replace the **innerHTML** code block with the following code:
5252

5353
```HTML
5454
this.domElement.innerHTML = `
@@ -70,23 +70,23 @@ However, when the Workbench is hosted in SharePoint, you get access to the page
7070
</div>`;
7171
```
7272

73-
4. Notice how `${ }` is used to output the variable's value in the HTML block. An extra HTML `p` is used to display `this.context.pageContext.web.title`. Because this web part loads from the local environment, the title is **Local Workbench**.
73+
3. Notice how `${ }` is used to output the variable's value in the HTML block. An extra HTML `p` is used to display `this.context.pageContext.web.title`. Because this web part loads from the local environment, the title is **Local Workbench**.
7474

75-
5. Save the file. The `gulp serve` running in your console detects this save operation and:
75+
4. Save the file. The `gulp serve` running in your console detects this save operation and:
7676

7777
- Builds and bundles the updated code automatically.
7878
- Refreshes your local Workbench page (as the web part code needs to be reloaded).
7979

8080
> [!NOTE]
8181
> Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.
8282
83-
6. In your browser, switch to the local **SharePoint Workbench** tab. If you have already closed the tab, the URL is `https://localhost:4321/temp/workbench.html`.
83+
5. In your browser, switch to the local **SharePoint Workbench** tab. If you have already closed the tab, the URL is `https://localhost:4321/temp/workbench.html`.
8484

8585
You should see the following in the web part:
8686

8787
![SharePoint page context in localhost](../../../images/sp-mock-localhost-wp.png)
8888

89-
7. Navigate to the SharePoint Workbench hosted in SharePoint. The full URL is `https://your-sharepoint-site-url/_layouts/workbench.aspx`. Notice that on the SharePoint Online side, you need to refresh the page to see the changes.
89+
6. Navigate to the SharePoint Workbench hosted in SharePoint. The full URL is `https://your-sharepoint-site-url/_layouts/workbench.aspx`. Notice that on the SharePoint Online side, you need to refresh the page to see the changes.
9090

9191
You should now see your SharePoint site title in the web part now that page context is available to the web part.
9292

@@ -382,4 +382,4 @@ Congratulations on connecting your web part to SharePoint list data!
382382
You can continue building out your Hello World web part in the next topic [Deploy your web part to a SharePoint page](./serve-your-web-part-in-a-sharepoint-page.md). You will learn how to deploy and preview the Hello World web part in a SharePoint page.
383383

384384
> [!NOTE]
385-
> If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues) or by adding a comment to this article. Thanks for your input in advance.
385+
> If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues) or by adding a comment to this article. Thanks for your input in advance.

0 commit comments

Comments
 (0)