2

Trying to use vis.js Network library in Salesforce I have tried both in LWC and in an Aura component with api version 40.0 but am receiving regeneratorRuntime is not defined [regeneratorRuntime is not defined] trying to use https://unpkg.com/browse/vis-network@8.1.0/standalone/umd/vis-network.min.js

Melissa
  • 21
  • 3

2 Answers2

0

Here is what I believe would solve your issue.

First Approach (only if library is small enough to be uploaded as LWC component)

You need to create two LWC component:

  • myNetwork
    • myNetwork.js
    • myNetwork.html
    • myNetwork.js-meta.xml
  • visNetworkLib 

import { LightningElement } from 'lwc'
import { DataSet, Network } from 'c/visNetworkLib'

export default class MyNetwork extends LightningElement {
  nodes = null
  edgeds = null

  renderedCallback () {
    this.nodes = new DataSet([
      {id: 1, label: 'Node 1'},
      {id: 2, label: 'Node 2'},
      {id: 3, label: 'Node 3'},
      {id: 4, label: 'Node 4'},
      {id: 5, label: 'Node 5'},
    ])

    this.edges = new DataSet([
      {from: 1, to: 3},
      {from: 1, to: 2},
      {from: 2, to: 4},
      {from: 2, to: 5},
      {from: 3, to: 3},
    ])

    const container = this.template.querySelector('div.myNetwork')
    
    this.network = new Network(container, {
      nodes: this.nodes,
      edges: this.edges,
    }, {})
  }
}
<template>
    <div 
        lwc:dom="manual" 
        class="myNetwork"
    ></div>
</template>

Second approach

Create a static resource name visNetwork which is the uploaded vis-network.min.js

Then load it like that in myNetwork.js

import { LightningElement } from 'lwc'
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import visNetworkUrl from '@salesforce/resourceUrl/visNetwork'
import { loadScript } from 'lightning/platformResourceLoader'

export default class MyNetwork extends LightningElement {
    nodes = null
    edgeds = null

    visLoaded = false;

    renderedCallback() {
        if (!this.visLoaded) {
            this.visLoaded = true;

            loadScript(this, visNetworkUrl).then(() => {
                this.initializeNetwork();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading vis network',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
        }
    }

    initializeNetwork () {
        this.nodes = new DataSet([
            {id: 1, label: 'Node 1'},
            {id: 2, label: 'Node 2'},
            {id: 3, label: 'Node 3'},
            {id: 4, label: 'Node 4'},
            {id: 5, label: 'Node 5'},
        ])

        this.edges = new DataSet([
            {from: 1, to: 3},
            {from: 1, to: 2},
            {from: 2, to: 4},
            {from: 2, to: 5},
            {from: 3, to: 3},
        ])

        const container = this.template.querySelector('div.myNetwork')
        
        this.network = new Network(container, {
            nodes: this.nodes,
            edges: this.edges,
        }, {})
    }
}
Bartheleway
  • 528
  • 5
  • 19
  • When I try to save `vis-network.min.js` as a file in an LWC bundle, I receive this error: `Failed to save Lightning Component Resource [lwc/visNetworkLib/visNetworkLib.js] of Lightning Component Bundle [visNetworkLib]. Error: Value too long for field: Source maximum length is:131072` It appears to exceed the maximum length for an LWC JS file. – nbrown Aug 27 '20 at 19:52
  • I added another approach to my answer which should avoid the limit, it might have error as I didn't get time to test it. It follows the doc : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/js_third_party_library – Bartheleway Aug 28 '20 at 15:33
0

I have figured it out, you have to load vis-data seperate from vis-network. you can find my working example here based on the NPSP Relationships and NPSP Affiliations. https://github.com/mrainboldt/visNetworkMapLWC

Melissa
  • 21
  • 3