Skip to content

Commit a864d5b

Browse files
committed
🐞 address floating promise eslint warning in tutorial
- fix markdown formatting
1 parent d2a20e2 commit a864d5b

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
title: Connect your client-side web part to SharePoint (Hello World part 2)
33
description: Access functionality and data in SharePoint and provide a more integrated experience for end users.
4-
ms.date: 06/13/2022
4+
ms.date: 11/22/2022
55
ms.localizationpriority: high
66
ms.custom: scenarios:getting-started
77
---
88
# Connect your client-side web part to SharePoint (Hello World part 2)
99

1010
Connect your web part to SharePoint to access functionality and data in SharePoint and provide a more integrated experience for end users.
1111

12-
You can also follow these steps by watching this video on the Microsoft 365 Platform Communtiy (PnP) YouTube Channel:
12+
You can also follow these steps by watching this video on the Microsoft 365 Platform Community (PnP) YouTube Channel:
1313

1414
> [!Video https://www.youtube.com/embed/5M3zDpgxIMs]
1515
@@ -43,7 +43,7 @@ this.context.pageContext
4343
```
4444

4545
1. Within Visual Studio Code, locate & open **.\src\webparts\helloWorld\HelloWorldWebPart.ts**.
46-
1. Inside the `render()` method, replace the **innerHTML** code block with the following:
46+
1. Inside the `render()` method, replace the `innerHTML` code block with the following:
4747

4848
```tsx
4949
this.domElement.innerHTML = `
@@ -96,7 +96,6 @@ You need a list model to start working with SharePoint list data. To retrieve th
9696

9797
The **ISPList** interface holds the SharePoint list information that we're connecting to.
9898

99-
10099
## Retrieve lists from SharePoint site
101100

102101
Next you need to retrieve lists from the current site. You'll use SharePoint REST APIs to retrieve the lists from the site, which are located at **`https://yourtenantprefix.sharepoint.com/_api/web/lists`**.
@@ -119,10 +118,11 @@ SharePoint Framework includes a helper class `spHttpClient` to execute REST API
119118

120119
```typescript
121120
private _getListData(): Promise<ISPLists> {
122-
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
121+
return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
123122
.then((response: SPHttpClientResponse) => {
124123
return response.json();
125-
});
124+
})
125+
.catch(() => {});
126126
}
127127
```
128128

@@ -133,15 +133,15 @@ SharePoint Framework includes a helper class `spHttpClient` to execute REST API
133133

134134
## Add new styles
135135

136-
The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-processor, and specifically uses the [SCSS syntax](http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html), which is fully compliant with normal CSS syntax. Sass extends the CSS language and allows you to use features such as variables, nested rules, and inline imports to organize and create efficient style sheets for your web parts. The SharePoint Framework already comes with a SCSS compiler that converts your Sass files to normal CSS files, and also provides a typed version to use during development.
136+
The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-processor, and specifically uses the [SCSS syntax](http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html), which is fully compliant with normal CSS syntax. Sass extends the CSS language and allows you to use features such as variables, nested rules, and inline imports to organize and create efficient style sheets for your web parts. The SharePoint Framework already comes with an SCSS compiler that converts your Sass files to normal CSS files, and also provides a typed version to use during development.
137137

138138
### To add new styles
139139

140140
1. Open **HelloWorldWebPart.module.scss**. This is the SCSS file where you define your styles.
141141

142142
By default, the styles are scoped to your web part. You can see that as the styles are defined under `.helloWorld`.
143143

144-
2. Add the following styles after the `.links` style:
144+
1. Add the following styles after the `.links` style:
145145

146146
```css
147147
.list {
@@ -173,7 +173,7 @@ The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-proce
173173
}
174174
```
175175
176-
3. Save the file.
176+
1. Save the file.
177177
178178
Gulp rebuilds the code in the console as soon as you save the file. This generates the corresponding typings in the **HelloWorldWebPart.module.scss.ts** file. After compiled to TypeScript, you can then import and reference these styles in your web part code.
179179
@@ -214,20 +214,20 @@ Open the `HelloWorldWebPart` class.
214214

215215
This method references the new CSS styles added earlier by using the `styles` variable and is used to render list information that will be received from REST API.
216216

217-
2. Save the file.
218-
3. Add the following private method inside the `HelloWorldWebPart` class to call the method to retrieve list data:
217+
1. Save the file.
218+
1. Add the following private method inside the `HelloWorldWebPart` class to call the method to retrieve list data:
219219

220220
```typescript
221221
private _renderListAsync(): void {
222222
this._getListData()
223223
.then((response) => {
224224
this._renderList(response.value);
225-
});
225+
})
226+
.catch(() => {});
226227
}
227228
```
228229

229-
4. Save the file.
230-
230+
1. Save the file.
231231

232232
## Retrieve list data
233233

@@ -269,4 +269,4 @@ Open the `HelloWorldWebPart` class.
269269

270270
Congratulations on connecting your web part to SharePoint list data!
271271

272-
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'll learn how to deploy and preview the Hello World web part in a SharePoint page.
272+
You can continue building out your Hello World web part in the next article [Deploy your web part to a SharePoint page](./serve-your-web-part-in-a-sharepoint-page.md). You'll learn how to deploy and preview the Hello World web part in a SharePoint page.

0 commit comments

Comments
 (0)