Skip to content

Commit dc4f2ca

Browse files
committed
Updating jQuery wp tutorial
1 parent e237b5a commit dc4f2ca

File tree

2 files changed

+17
-25
lines changed

2 files changed

+17
-25
lines changed

docs/images/jquery-accordion-wb.png

6.69 KB
Loading

docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Add jQueryUI Accordion to your SharePoint client-side web part
33
description: Adding the jQueryUI Accordion to your web part project involves creating a new web part.
4-
ms.date: 01/08/2018
4+
ms.date: 08/20/2018
55
ms.prod: sharepoint
66
---
77

@@ -15,7 +15,6 @@ Adding the jQueryUI Accordion to your web part project involves creating a new w
1515
Ensure that you've completed the following steps before you start:
1616

1717
* [Build your first web part](build-a-hello-world-web-part.md)
18-
* [Connect your web part to SharePoint](connect-to-sharepoint.md)
1918

2019
You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:
2120

@@ -40,7 +39,7 @@ The developer toolchain uses Webpack, SystemJS, and CommonJS to bundle your web
4039
```
4140
4241
> [!WARNING]
43-
> Make sure to create this directory in a new folder, not as a subdirectory of `helloworld-webpart`.
42+
> Make sure to create this directory in a new folder, not as a subdirectory of `helloworld-webpart`, if you continue to this tutorial from the *hello world series*.
4443
4544
2. Go to the project directory:
4645

@@ -70,47 +69,41 @@ The developer toolchain uses Webpack, SystemJS, and CommonJS to bundle your web
7069

7170
At this point, Yeoman installs the required dependencies and scaffolds the solution files. This might take a few minutes. Yeoman scaffolds the project to include your **jQueryWebPart** as well.
7271

73-
6. After the scaffolding completes, lock down the version of the project dependencies by running the following command:
74-
75-
```sh
76-
npm shrinkwrap
77-
```
78-
79-
7. Enter the following to open the web part project in Visual Studio Code:
80-
81-
```
82-
code .
83-
```
84-
8572

8673
## Install jQuery and jQuery UI NPM Packages
8774

8875
1. In the console, enter the following to install the jQuery npm package:
8976

9077
```
91-
npm install --save jquery@2
78+
npm install jquery@2
9279
```
9380

9481
2. Now enter the following to install the jQueryUI npm package:
9582

9683
```
97-
npm install --save jqueryui
84+
npm install jqueryui
9885
```
9986

10087
Next, we need to install the typings for our project. Starting from TypeScript 2.0, we can use npm to install needed typings.
10188

10289
3. Open your console and install the needed types:
10390

10491
```
105-
npm install --save @types/jquery@2
106-
npm install --save @types/jqueryui
92+
npm install @types/jquery@2
93+
npm install @types/jqueryui
10794
```
10895

10996
### To unbundle external dependencies from web part bundle
11097

111-
By default, any dependencies you add are bundled into the web part bundle. In some cases, this is not ideal. You can choose to unbundle these dependencies from the web part bundle.
98+
By default, any dependencies you add are bundled into the web part bundle. In some cases, this is not ideal as it increases the file size. You can choose to unbundle these dependencies from the web part bundle.
11299

113-
1. In Visual Studio Code, open the file **config\config.json**.
100+
1. Enter the following to open the web part project in Visual Studio Code:
101+
102+
```
103+
code .
104+
```
105+
106+
2. In Visual Studio Code, open the file **config\config.json**.
114107

115108
This file contains information about your bundle(s) and any external dependencies.
116109

@@ -129,13 +122,13 @@ By default, any dependencies you add are bundled into the web part bundle. In so
129122
},
130123
```
131124

132-
2. The `externals` section contains the libraries that are not bundled with the default bundle.
125+
3. The `externals` section contains the libraries that are not bundled with the default bundle.
133126

134127
```json
135128
"externals": {},
136129
```
137130

138-
3. To exclude `jQuery` and `jQueryUI` from the default bundle, add the modules to the `externals` section:
131+
4. To exclude `jQuery` and `jQueryUI` from the default bundle, add the modules to the `externals` section:
139132

140133
```json
141134
"jquery":"node_modules/jquery/dist/jquery.min.js",
@@ -355,5 +348,4 @@ Open the project folder **jquery-webpart** in Visual Studio Code. Your project s
355348
3. In the console where you have `gulp serve` running, select Ctrl+C to terminate the task.
356349

357350
> [!NOTE]
358-
> If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues). Thanks for your input in advance.
359-
351+
> 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)