Steps Of SpFx with jQueryUI

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)

2.        Create Directory
>>  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.

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 .

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

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

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.

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 /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';

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';

11.      To load the jQueryUI styles, in the 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:

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