3

I've used the jQuery plugin jOrgChart with success in a SharePoint add-in by simply referencing the file and making the call, i.e.

<script type="text/javascript" src="jquery.jOrgChart.js"></script>
...
jQuery(document).ready(function() {
    $("#org").jOrgChart();
});

Now I want to use the same plugin in a SPFx webpart. What have is:

import * as jQuery from "jquery";
import "jqueryui";
import "jorgchart";
//  also tried with the same result:
//  require("jorgchart");
...
let jOrgChart:any = require("./Scripts/jOrgChart.js");
...
jQuery("#org").jOrgChart({ chartElement: "#chart", dragAndDrop: false });

my json.config file includes:

"externals": {
"jquery": { 
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js",
    "globalName": "jquery"
},
"jqueryui":{
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
    "globalName": "jquery",
    "globalDependencies": ["jquery"]
},
"jorgchart": {
    "path": "./Scripts/jOrgChart.js",
    "globalName": "jquery",
    "globalDependencies": ["jqueryui"]
}
},

but I get the build TypeScript error: Property 'jOrgChart' does not exist on type 'JQuery'. Is it something with the way the jOrgChart.js code is written?

Full code is here.

What am I missing?

2

Add "declare var $;" Replace "jQuery("#org").jOrgChart()" with "$("#org").jOrgChart()"

1

You need to first ensure that jQuery is loaded and after that your plugin is loaded.

One way to fix it would be to add an external reference in the config.json file.

So, go to the config > config.json file and modify the externals section as below. Modify as per your path/folder structure. Just ensure that the file is accessible to end users:

 //standard code 
"externals": {
    // standard entries omitted for brevity
    "jquery": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js",
      "globalName": "jquery"
    },
    "jqueryui":{
        "path": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js",
        "globalName": "jquery"
        "globalDependencies": ["jquery"]
    }
    "jOrgChart": {
      "path": "https://tenant.sharepoint.com/sites/test/MyDocLib/Scripts/jOrgChart.js",
      "globalName": "jquery",
      "globalDependencies": ["jqueryui"]
    }
  },
 //standard code

Once done, go to your webpart typescript file and add the references as:

import * as jQuery from 'jquery';
require('jqueryui');
require('jOrgChart');

After that you can call your jQuery("#org").jOrgChart method in either render method or any other custom method that you are using something like:

public render(): void {
    this.domElement.innerHTML = "<your html content>";

    jQuery(document).ready(function() { 
        jQuery("#org").jOrgChart({ chartElement: "#chart", dragAndDrop: false });
    });    
}

Reference - Add jQueryUI to your webpart

Update as per comments -

I see that you are using the drag and drop functionality. According to jQuery Org Chart plugin, if you need to use the drag-drop, then you need to add additional dependency on jQuery UI as well. So, first load the files in the order as jQuery > jQueryUI > jQueryOrgChart

8
  • I did have the externals in my json.config, so added that to the question. I've tried require("jOrgChart"); and import "jOrgChart"; but still I get Property 'jOrgChart' does not exist on type 'JQuery' as a typescript build error. Could it be an issue with the way the jOrgChart.js file is written?
    – dikuw
    Apr 18 '18 at 22:55
  • have updated answer, can you check now ? Apr 19 '18 at 4:44
  • Thanks - same error with jQuery UI added (updated code above): Property 'jOrgChart' does not exist on type 'JQuery'
    – dikuw
    Apr 20 '18 at 11:49
  • it needs to be "jorgchart": { "path": "./Scripts/jOrgChart.js", "globalName": "jquery", "globalDependencies": ["jqueryui"] } in the dependencies. You are specifying jquery Apr 20 '18 at 11:52
  • Okay corrected that, still getting the same error but now getting "Property 'dialog' does not exist on type 'JQuery'" as well, which is part of jQuery UI so I must have broken something. Checking...
    – dikuw
    Apr 20 '18 at 11:57

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.