Steps Of SpFx with jQueryUI
1.
Setup and configure spfx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Let’s Create a client-side webpart (Add jQueryUI Accordion to your SharePoint client-side web part)
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Let’s Create a client-side webpart (Add jQueryUI Accordion to your SharePoint client-side web part)
2.
Create Directory
>> md testWp
>> md testWp
3.
Enter Directory
>> cd testWp
Create a new web part by running the Yeoman SharePoint Generator
>> yo @microsoft/sharepoint
Accept the default jquery-webpart as your solution name and choose Enter.
Choose SharePoint Online only (latest), and press Enter.
Select Use the current folder for where to place the files.
Choose N to require the extension to be installed on each site explicitly when it's being used.
Choose WebPart as the client-side component type to be created.
The next set of prompts will ask for specific information about your web part:
Type jQuery for the web part name and choose Enter.
Enter jQuery Web Part as the description of the web part and choose Enter.
Accept the default No JavaScript framework option for the framework and choose Enter to continue.
>> cd testWp
Create a new web part by running the Yeoman SharePoint Generator
>> yo @microsoft/sharepoint
Accept the default jquery-webpart as your solution name and choose Enter.
Choose SharePoint Online only (latest), and press Enter.
Select Use the current folder for where to place the files.
Choose N to require the extension to be installed on each site explicitly when it's being used.
Choose WebPart as the client-side component type to be created.
The next set of prompts will ask for specific information about your web part:
Type jQuery for the web part name and choose Enter.
Enter jQuery Web Part as the description of the web part and choose Enter.
Accept the default No JavaScript framework option for the framework and choose Enter to continue.
4.
Once the scaffolding completes, lock down the version of the
project dependencies by running the following command:
>> npm shrinkwrap
Next, type the following to open the web part project in Visual Studio Code:
>> code .
>> npm shrinkwrap
Next, type the following to open the web part project in Visual Studio Code:
>> code .
5.
In the console, type the following to install jQuery npm
package:
>> npm install --save jquery@2
Now type the following to install jQueryUI npm package:
>> npm install --save jqueryui
>> npm install --save jquery@2
Now type the following to install jQueryUI npm package:
>> npm install --save jqueryui
6.
Next we'll need
to install the typings for our project. Starting from TypeScript 2.0, we can
use npm to install needed typings.
>> npm install --save @types/jquery@2
>> npm install --save @types/jqueryui
>> npm install --save @types/jquery@2
>> npm install --save @types/jqueryui
7.
Unbundle external dependencies from web part bundle
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.
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.
In Visual
Studio Code, open the file config\config.json.
This
file contains information about your bundle(s) and any external dependencies.
The bundles region contains the default bundle
information - in this case, the jQuery web part bundle. When you add more web
parts to your solution, you will see one entry per web part
{
"$schema":
"https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"j-query-web-part": {
"components": [
{
"entrypoint":
"./lib/webparts/jQuery/JQueryWebPart.js",
"manifest":
"./src/webparts/jQuery/JQueryWebPart.manifest.json"
}
]
}
},
"externals": {
"jquery":"node_modules/jquery/dist/jquery.min.js",
"jqueryui":"node_modules/jqueryui/jquery-ui.min.js"
},
"localizedResources": {
"JQueryWebPartStrings":
"lib/webparts/jQuery/loc/{locale}.js"
}
}
8.
Build
the Accordion
Open the project folder jquery-webpart in Visual Studio Code. Your project should have the jQuery web part that you added earlier under the
Add Accordion HTML
Add a new file in the
Create and export (as a module) a class
Open the project folder jquery-webpart in Visual Studio Code. Your project should have the jQuery web part that you added earlier under the
/src/webparts/jQuery folder.Add Accordion HTML
Add a new file in the
src/webparts/jQuery folder called MyAccordionTemplate.ts.Create and export (as a module) a class
MyAccordionTemplate that holds the HTML code for the accordion. export default class MyAccordionTemplate {
public static templateHtml: string = ‘
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Section 3
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
Section 4
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
’;
}
9.
Import Accordion HTML
In Visual Studio Code, open src\webparts\jQuery\JQueryWebPart.ts.
At the top of the file, where you can find other imports, add the following import:
import MyAccordionTemplate from './MyAccordionTemplate';
In Visual Studio Code, open src\webparts\jQuery\JQueryWebPart.ts.
At the top of the file, where you can find other imports, add the following import:
import MyAccordionTemplate from './MyAccordionTemplate';
10.
Import jQuery and jQueryUI
You can import jQuery your web part in the same way that you imported MyAccordionTemplate.
At the top of the file, where you can find other imports, add the following imports:
import * as jQuery from 'jquery';
import 'jqueryui';
Next, you'll load some external css files. To do that, use the module loader. Add the following import:
import { SPComponentLoader } from '@microsoft/sp-loader';
You can import jQuery your web part in the same way that you imported MyAccordionTemplate.
At the top of the file, where you can find other imports, add the following imports:
import * as jQuery from 'jquery';
import 'jqueryui';
Next, you'll load some external css files. To do that, use the module loader. Add the following import:
import { SPComponentLoader } from '@microsoft/sp-loader';
11.
To
load the jQueryUI styles, in the
public constructor() {
super();
SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}
This code does the following:
Calls the parent constructor with the context to initialize the web part.
Loads the accordion styles from a CDN asynchronously.
JQueryWebPart web part class, you'll need to add a
constructor and use the newly imported SPComponentLoader. Add following
constructor to your web part.public constructor() {
super();
SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}
This code does the following:
Calls the parent constructor with the context to initialize the web part.
Loads the accordion styles from a CDN asynchronously.
Render Accordion
In the jQueryWebPart.ts, go to the render method.
Set the web part's inner HTML to render the accordion HTML:
>> gulp serve
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part
In the jQueryWebPart.ts, go to the render method.
Set the web part's inner HTML to render the accordion HTML:
public render(): void {
this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
const accordionOptions: JQueryUI.AccordionOptions = {
animate: true,
collapsible: false,
icons: {
header: 'ui-icon-circle-arrow-e',
activeHeader: 'ui-icon-circle-arrow-s'
}
};
jQuery('.accordion', this.domElement).accordion(accordionOptions);
}
>> gulp serve
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part
