Adding jQuery to SPFx webpart & Adding Accordion control using jQuery

By -

 Adding jQuery to SPFx webpart

        Follow this link to create SPFx webpart(initial steps) & Open the solution in visual studio code. 


Step 1: Add jQuery & jQueryUI  NPM Packages :

                    npm install jquery@2
                    npm install jqueryui

           Open visual studio code > open Terminal(ctrl+`) & Enter above code that will add jQuery & jQueryUI to the node modules. jquery@2 represents version of jQuery.


Also this will be added under solution file 'package.json' > 'dependencies'




Step 2: Install the typings

                        npm install @types/jquery@2 --save-dev
                        npm install @types/jqueryui --save-dev

            Adding jQuery to 'devdependencies' which is used during development time & above code will add these jQuery under solution file 'package.json' > 'devdependencies'


Step 3: Import jQuery & jQueryUI in Webpart.ts file:


                                import * as $ from 'jquery'
                                import 'jqueryui'
                    Add this import code in our src\webpart\webpart.ts file. Now we can go to render method & we can see all the jQuery functionalities.


Step 4: Adding jQuery under External:

            To avoid jQuery added in package we need to add this files under external in config\config.json file

            "jquery":"node_modules/jquery/dist/jquery.min.js",
            "jqueryui":"node_modules/jqueryui/jquery-ui.min.js"

Now we have added jQuery to our SPFx webpart.


Adding Accordion control using Jquery

Step 5: Load External CSS using Module loader

    To add Accordion control we need to import SPComponentLoader in src\webpart.ts file.

                      import {SPComponentLoader} from '@microsoft/sp-loader'


Step 6: Add this sample code for Accordion

Add this below constructor to load external css(above render method) in src\webpart.ts file.
      public consturctor(){
        SPComponentLoader.loadCss("http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css");
      }



Add this sample html & according code under render method.

    this.domElement.innerHTML = `
    <div class="accordion">
         <h3>Section1</h3>
        <div>
             <P>Paragraph text Section1</p>
         </div>
        <h3>Section2</h3>
        <div>
            <P>Paragraph text Section2</p>
         </div>
        <h3>Section3</h3>
        <div>
             <P>Paragraph text Section3</p>
        </div>
     </div>
     `;

       $('.accordion').accordion();
    }


To Test the webpart:

            We can test this using SharePoint workbench, under config\serve.json enter site url for workbench.

Then run the "gulp serve" it will open the workbench & we can add and test our webpart.


Finally our jQuery Accordion is added in SPFx wepart



Refer this link for more details


        



Comments

Post a Comment

Popular posts from this blog

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013

By -
Image
Upload  Single/Multiple  file by using the REST API and jQuery SharePoint 2013 Here you can find how to upload single/multiple file in SharePoint 2013 Library using Rest API. We can use the Content Editor web part to call the script files. Include Script files in Content Editor: Go to content editor -> Edit Source -> enter the code like below (code for including the script files) For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that. <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> OR use the below code <script src="/ sites/<SiteName>/<Subsite>/SiteAssets/jquery-1.11.1.min.j s"></script> <script src="/ sites/ <SiteName>/<Subsite> /SiteAssets/taskpage.js " type="text/javascript"></script> <script src=" /sites/ <SiteName>/<Subs
Read more

A type named 'SP.Data. could not be resolved by the model error

By -
Image
When we are trying to update task list we will get this error " A type named 'SP.Data. could not be resolved by the model error. When a model is available, each type name must resolve to a valid name must resolve to a a valid type" This happens because there is a space in the list name. To resolve this issue we need to get the exact list name to be used in "SP.Data" 1.Use the below URL in chrome browser <SiteUrl>/_api/web/lists/GetByTitle('List Name')/ For Example:  https://SiteURL/_api/web/lists/GetByTitle('Workflow Tasks')/ Some times in Chrome browser you may get Authentication error. For that first open the list from your Chrome browser & then use the above URL. 2.Find "SP.Data" -> now you will get the list name that you can be used in SP.Data.ListNameListitem
Read more

Add content type to SharePoint List/Library using REST API

By -
Add content type to SharePoint List/Library using REST API Use this below code to add content type to SharePoint Library using REST API. For this you need to use the content type ID. Below function will get the content type ID from content type name & we will pass the content type id to next function which will update content type to list/library. var   varContentTypeName = " Your Content Type name "; var   Listname = " Your List name where you want to add content type "; //This will get the content type ID from content type Name function  getContentTypeID() { var deferred = $.Deferred();     var  isCurrentUserIsApprover = false ; var  serverURL = _spPageContextInfo.webAbsoluteUrl; var  listURL = String.format(" {0}/_api/web/AvailableContentTypes?$select=Name,Id,StringId&$filter=Name eq '"+varContentTypeName+"' ",serverURL); $.ajax({ url: listURL, type: " GET ", async: false, headers:
Read more