1

This is the example referenced and I already imported required sources from cdn; after installed bootstrap("npm install --save bootstrap") I added the references.

SampleWebPart.ts:

export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsProps> {
public constructor() {
    super();
    SPComponentLoader.loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');

Sample.tsx:

import * as $ from 'jquery';
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/css/bootstrap.css';
//import 'bootstrap/dist/js/bootstrap.js';
...
public render(): JSX.Element {
    return (
        <div>
        <button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <div className="modal fade" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>  
          </div>
        </div></div>

The thing is; if I comment out "import 'bootstrap/dist/js/bootstrap.js';"web part broken completely; enter image description here

if not, looks fine except;

error in console window

But I am pretty use I have jquery and able to call jquery functions..

  • SPComponentLoader.loadCss feels wrong for loading a JS file, is that correct? Are you sure bootstrap is loaded? – Eric Alexander Jan 31 '17 at 21:51
  • oops you have a point but I check the network it looks fine on there. Also edited post – TyForHelpDude Jan 31 '17 at 21:55
6

In the SampleWebpart.ts, you can use it as below:

export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsProps> {
public constructor() {
    super();
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js',  { globalExportsName: 'jQuery' }).then((): void => {        
      });
    });
  }

In the Samplewebpart.tsx, the code would be :

export default class Announcements extends React.Component<IAnnouncementProperties, IWebPartState> {

  private listItemEntityTypeName: string = "SP.Data.AnnouncementsListItem";//Announcement2ListItem
  private siteUrl: string = "https://mod970274.sharepoint.com/sites/site26jan";
  constructor(props: IAnnouncementProperties, state: IWebPartState) {
    super(props);

    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js',  { globalExportsName: 'jQuery' }).then((): void => {        
      });
    });

    this.state = {
      status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
      items: []
    };

    //read items..
    this.readItems(0, 10);
  }
  • :) Its very efficient solution but whatif I already installed jquery(installed with "npm i jquery") and it works fine.. how can I add only bootstrapjs?(or do I have to load jquery from cdn ? ) – TyForHelpDude Feb 1 '17 at 13:33
  • bootstrap js depends on jquery , so you need jquery to be loaded before bootstrap js. Else only bootstrap js is not possible. – Gautam Sheth Feb 1 '17 at 13:35
  • I understood your point thanks, it makes clear much, but I have jquery package so how can I struct of page load jquery from local before call "SPComponentLoader.loadScript('http:../bootstrap.js')" – TyForHelpDude Feb 1 '17 at 13:50
4

Another possibility is to include jquery and bootstrap in your solution and unbundle them by first running the following commands:

Npm install jquery --save
npm install @types/jquery --save
npm install bootstrap --save
npm install @types/bootstrap --save

then add the following lines to your config.json file`"

externals": {
"jquery": {
  "path": "node_modules/jquery/dist/jquery.min.js",
  "globalName": "jQuery"
},
 "bootstrap": {
  "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "globalName": "jQuery"
}`

Finally add the following lines to your web part .ts file

import * as jQuery from 'jquery';
import * as bootstrap from 'bootstrap';

I find doing this allows an easier time looking at the browser development tools - network tab to ensure the libraries are being loaded correctly and in the right order. Also you keep everything local and don't have to rely on reaching across the internet to the hosted CDN's to pull in your libraries.

I created a blog post using these libraries and others in SPFX SharePoint Online Responsive Web Part using the SharePoint Framework, Bootstrap, JQuery, JQuery Datatables and Toastr - Here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.