Upload Third Party Web Part Sharepoint Online

Howdy everyone, welcome to my SPFx article series this my third article on SPFx. Hither we will discuss how to add together resources correctly in a client-side web part.

Kickoff, we will run into what kind of resources nosotros add in a web part? Resources include images either a logo or icons, external 3rd party CSS and JS, custom CSS and JS.

There are two ways to add external libraries in SPFx

• Load the library from an NPM package
• Load a script from a Content Delivery Network (CDN)

Load the library from an NPM package

We know programmer toolchain uses Webpack, SystemJS, and CommonJS to bundle spider web parts. This includes loading whatever external dependencies such as jQuery or jQueryUI. To load external dependencies, nosotros need to install from NPM at time of project creation.

Installing jQuery or jquery UI from NPM packages

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

By default, any dependency y'all installed through NPM package is added in externals{ }section under config\config.json.

1 2 iii four v 6 7 viii ix 10 11 12 13 xiv 15 16 17 18 19 twenty 21 22

{ "$schema" : "https://dev.part.com/json-schemas/spfx-build/config.two.0.schema.json" , "version" : "two.0" , "bundles" : { "wp-howdy-earth-web-function" : { "components" : [ { "entrypoint" : "./lib/webparts/wpHelloWorld/WpHelloWorldWebPart.js" , "manifest" : "./src/webparts/wpHelloWorld/WpHelloWorldWebPart.manifest.json" } ] } } , < strong > "externals" : { "jquery" : "node_modules/jquery/dist/jquery.min.js" , "jqueryui" : "node_modules/jqueryui/jquery-ui.min.js" } , </strong > "localizedResources" : { "WpHelloWorldWebPartStrings" : "lib/webparts/wpHelloWorld/loc/{locale}.js" } }

In this scenario, all references are added past default in .ts principal files.

Load a script from a Content Delivery Network (CDN)

In this scenario, we manually add external JS files from the Content Delivery Network. Nosotros add references of JS in externals{ } section under config\config.json and imports these files references in .ts file.

1 2 three iv five 6 7 8 9 ten eleven 12 xiii xiv fifteen 16 17 18 19 20 21 22

{ "$schema" : "https://dev.part.com/json-schemas/spfx-build/config.ii.0.schema.json" , "version" : "2.0" , "bundles" : { "wp-hello-world-web-part" : { "components" : [ { "entrypoint" : "./lib/webparts/wpHelloWorld/WpHelloWorldWebPart.js" , "manifest" : "./src/webparts/wpHelloWorld/WpHelloWorldWebPart.manifest.json" } ] } } , "externals" : { "jquery" : "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.iii.1/jquery.min.js" , "jqueryui" : "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" } , "localizedResources" : { "WpHelloWorldWebPartStrings" : "lib/webparts/wpHelloWorld/loc/{locale}.js" } }

At the elevation of the file, where nosotros tin find other imports, add the following imports:

import 'jquery' ; import 'jqueryui' ;

In the to a higher place two scenarios, we add tertiary-party JS files from CDN but what about if we want to add custom one? Here I explain how to add together custom js files externally and inline.

Add together Custom JS files

Create script.js files under src/webparts/

Here I add fix() part and warning() message. Now nosotros add reference of this file into our main file .ts
In .ts file, I add reference of a script file in render() function require('path: string'). At the top of the file, where nosotros tin can find other imports like 'jquery' which is defined nether config.js file. At present run into the output, alerts () bulletin volition show when we add a web part on a page.
Here we too add together inline js without creating an external file for that we create a variable of 'jquery' name '$' .
Now see the output, alerts () bulletin will show when nosotros add a web part on a page.

In above we cover all almost JS files at present we move on to CSS files.

Note: TypeScript is just a superset of JavaScript. All the TypeScript code is still converted to JavaScript code when you lot compile.

Add CSS into SPFx web function

We add CSS into SPFx solution using four ways are they

1. SPComponentLoader module
2. require() function
3. Sassy CSS .scss
4. inline CSS

SPComponentLoader

The common method of loading external libraries in SPFx solutions is to include a library path in the config/config.json file, in particular by including the module in the " externals " section. What if we want to add library conditional based?

SPComponentLoader responsible for loads a CSS and JS files.

Load external CSS files by using the module loader. Add the post-obit import at the top of the .ts file:

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

Load the jQueryUI styles in a web part course past calculation a constructor and using the newly imported SPComponentLoader. Add the following constructor to our web role:

public constructor ( ) { super ( ) ; //Add external CSS file from CDN SPComponentLoader . loadCss ( 'https://lawmaking.jquery.com/ui/1.12.1/themes/base of operations/jquery-ui.min.css' ) ; }

When spider web part initialize it calls a parent constructor() and then load CSS file.

crave()

Using require() we besides add custom CSS file just like a JS file which I explain already.

require('./main.css'); Here the difference is nosotros reference filename with extension.

Sassy CSS .scss

SCSS is a special type of file for SASS, a program written in Crimson that assembles CSS mode sheets for a browser. SASS adds lots of additional functionality to CSS similar variables, nesting and more which tin can make writing CSS easier and faster. SCSS files are processed by the server running a spider web app to output a traditional CSS that your browser tin can understand.

When we create a web part solution past default .scss file is created. In this file, we also add CSS and and then utilize this class in .ts file.

As you meet an above screenshot here I create Border class in a module.scss file and reference of that grade in .ts file using ${styles.Edge}

inline CSS

Inline CSS hateful we directly add CSS in <mode> tag on .ts file. In this case, we don't need to extra care of .SCSS file.

Add an Image in web role solution

To add custom images in SPFx solution, create a folder under src/webpart with name avails and add images into it.

Now add the following import at the top of the .ts file:

const logo : whatsoever = crave ( './avails/bubble.png' ) ;

Once we create a variable of the image now nosotros use this variable 'logo' in <img> src attribute : src="${logo}"

Reference:

• Modern SharePoint and Modern SharePoint vs Classic SharePoint in SharePoint Online
• Client-Side Spider web Function using SharePoint Framework (SPFx)
• Deploy SPFx Customer-side web part in SharePoint Online

This Commodity is TAGGED in App catalog Site Collection, Apps for Office, Apps for SharePoint, Classic SharePoint, Client side web part, Communication Site, Gulp, Modern SharePoint, Mod Site Pages, nodejs, SharePoint Admin Center, SharePoint App Catalog, SharePoint Framework, SharePoint Framework(SPFx), SharePoint Hub Site, SharePoint Workbench, SPFx, Team Site, Tenant Admin, Spider web part project structure, Yeoman SharePoint Generator, Yeomen. BOOKMARK THE permalink.

zimmereiver1982.blogspot.com

Source: https://mundrisoft.com/tech-bytes/how-to-add-external-libraries-and-assets-in-sharepoint-client-side-web-part/

Share this post