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/add-jqueryui-accordion-to-web-part.md
+17-25Lines changed: 17 additions & 25 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Add jQueryUI Accordion to your SharePoint client-side web part
3
3
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
5
5
ms.prod: sharepoint
6
6
---
7
7
@@ -15,7 +15,6 @@ Adding the jQueryUI Accordion to your web part project involves creating a new w
15
15
Ensure that you've completed the following steps before you start:
16
16
17
17
*[Build your first web part](build-a-hello-world-web-part.md)
18
-
*[Connect your web part to SharePoint](connect-to-sharepoint.md)
19
18
20
19
You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:
21
20
@@ -40,7 +39,7 @@ The developer toolchain uses Webpack, SystemJS, and CommonJS to bundle your web
40
39
```
41
40
42
41
> [!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*.
44
43
45
44
2. Go to the project directory:
46
45
@@ -70,47 +69,41 @@ The developer toolchain uses Webpack, SystemJS, and CommonJS to bundle your web
70
69
71
70
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.
72
71
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
-
85
72
86
73
## Install jQuery and jQuery UI NPM Packages
87
74
88
75
1. In the console, enter the following to install the jQuery npm package:
89
76
90
77
```
91
-
npm install --save jquery@2
78
+
npm install jquery@2
92
79
```
93
80
94
81
2. Now enter the following to install the jQueryUI npm package:
95
82
96
83
```
97
-
npm install --save jqueryui
84
+
npm install jqueryui
98
85
```
99
86
100
87
Next, we need to install the typings for our project. Starting from TypeScript 2.0, we can use npm to install needed typings.
101
88
102
89
3. Open your console and install the needed types:
103
90
104
91
```
105
-
npm install --save @types/jquery@2
106
-
npm install --save @types/jqueryui
92
+
npm install @types/jquery@2
93
+
npm install @types/jqueryui
107
94
```
108
95
109
96
### To unbundle external dependencies from web part bundle
110
97
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.
112
99
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**.
114
107
115
108
This file contains information about your bundle(s) and any external dependencies.
116
109
@@ -129,13 +122,13 @@ By default, any dependencies you add are bundled into the web part bundle. In so
129
122
},
130
123
```
131
124
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.
133
126
134
127
```json
135
128
"externals": {},
136
129
```
137
130
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:
@@ -355,5 +348,4 @@ Open the project folder **jquery-webpart** in Visual Studio Code. Your project s
355
348
3. In the console where you have `gulp serve` running, select Ctrl+C to terminate the task.
356
349
357
350
> [!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