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..

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

2 Answers 2

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);
  }
3
  • :) 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 ? ) Commented Feb 1, 2017 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. Commented Feb 1, 2017 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')" Commented Feb 1, 2017 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 and acknowledge you have read our privacy policy.

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