1

I have installed jquery and bootstrap to my spfx projects via npm. The menu loads well but it seems i'm having issues with bootstrap js because when i click on the menu with dropdown(see screenshot below) it doesn't work What am i missing and how should i be referencing the js and css.

Thanks in advance

My css is being loaded by using :-

SPComponentLoader.loadCss('https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/bootstrap.min.css');

enter image description here

In my config.json i have declared external ref js

externals": {
    "jquery":"https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/jquery.min.js",
    "bootstrap":"https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/bootstrap.min.js"
    },

and since i'm just testing the bootstrap menu out i have the html for now hardcoded like below

export default class BootStrapTemplate {

    public static templateHtml: string = `
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Navigation</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul> 

        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>`;
4

1) If you are adding jquery & bootstrap via CDN, no need to npm install them

2) bootstap components depend on jQuery. So, you need to first load jQuery and then bootstrap js. You can specify the loading order by globalDependencies attribute

3) You can then import these libraries in your files using the import statement.

So, modify your config.json file as below, I am using global CDN, but you can change the path as per your environment requirements:

"externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-1.12.4.js",
      "globalName": "jquery"
    },
    "bootstrap": {
      "path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
      "globalName": "bootstrap",
      "globalDependencies": ["jquery"]
    }
  },

After that, in your webpart typescript file, make the below mentioned changes:

1) add following import statements:

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

import 'jquery';
import 'bootstrap';

2) Add a constructor and then change the render method as below:

export default class TestspfxWebPart extends BaseClientSideWebPart<ITestspfxWebPartProps> {

  public constructor() {
    super();

    SPComponentLoader.loadCss("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
  }

  public render(): void {
    this.domElement.innerHTML = `
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Navigation</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul> 

        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>`;


  }
  • Gautam thanks alot. Although i was working on an extension but the changes in the config.json worked like a charm.Thanks – naijacoder Feb 6 '18 at 9:41

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.