5

I am trying to build a Org Chart using OrgChatJS (https://balkan.app/OrgChartJS/Docs/GettingStarted) in LWC . It will look like this

enter image description here

But in Salesforce , its coming a blank page. Anything i am missing. Below is my code

JS -

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import orgChart from '@salesforce/resourceUrl/orgchart';

export default class Dorgchart extends LightningElement {
    error;
    chart;
    initialized = false;

    renderedCallback() {
        if (this.initialized) return;
        this.initialized = true;

        Promise.all([
            loadScript(this, orgChart),
        ])
            .then(() => {
                console.log('script loaded')
                this.intialized3();
            })
            .catch((error) => {
                this.error = error;
            });
    }

    intialized3() {
        let canvas = this.template.querySelector(".orgchart");
        let context = canvas;
        this.chart = new OrgChart(context, {
            mouseScrool: OrgChart.action.none, nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]

        });
        console.log(this.chart)

    }
}

HTML -

<template>
    <div class='slds-box slds-theme_default custom-background'>
        <div class="orgchart" width="800" height="450" lwc:dom="manual"></div>
    </div>
</template>
9
  • 2
    1. add debugs to initializeD3 to make sure it's working 2. is your static resource a single JS file or an archive?
    – ytiq
    Jun 13, 2021 at 16:36
  • Static resource singls JS file. Code is reaching to initializeD3 .. Jun 13, 2021 at 16:37
  • Sorry, thought you were loading d3. Orgchart might not be supported in lwc. Jun 13, 2021 at 18:45
  • Does D3 has org chart plugin ? Jun 13, 2021 at 18:46
  • Does D3 has org chart plugin ? or any other example where LWC supports org chart Jun 13, 2021 at 18:53

1 Answer 1

0

Add this line to the orgchart.js at EOF:

window.OrgChart = OrgChart;

Try to add above line in orgchart js file at the end and then try to use it it is also suggested in salesforce doc for balkan https://balkan.app/OrgChartJS/Docs/Salesforce

1
  • At the time of writing, I don't believe this works anymore.
    – Robs
    Apr 4, 2023 at 20:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .