You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/web-parts/get-started/connect-to-sharepoint.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -40,15 +40,15 @@ However, when the Workbench is hosted in SharePoint, you get access to the page
40
40
41
41
### To get access to the page context
42
42
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:
44
44
45
45
```typescript
46
46
this.context.pageContext
47
47
```
48
48
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**.
50
50
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:
52
52
53
53
```HTML
54
54
this.domElement.innerHTML = `
@@ -70,23 +70,23 @@ However, when the Workbench is hosted in SharePoint, you get access to the page
70
70
</div>`;
71
71
```
72
72
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**.
74
74
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:
76
76
77
77
- Builds and bundles the updated code automatically.
78
78
- Refreshes your local Workbench page (as the web part code needs to be reloaded).
79
79
80
80
> [!NOTE]
81
81
> Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.
82
82
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`.
84
84
85
85
You should see the following in the web part:
86
86
87
87

88
88
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.
90
90
91
91
You should now see your SharePoint site title in the web part now that page context is available to the web part.
92
92
@@ -382,4 +382,4 @@ Congratulations on connecting your web part to SharePoint list data!
382
382
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.
383
383
384
384
> [!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