0

I have a requirement where I want to utilize the tree-grid LWC component. The sample example provided in the Component reference guide by the Salesforce for the same is not working. I'm getting the below exception:

Error Message: "Could not load mocks/sampleData (imported by root/basic/basic.js): request failed" Component URL: https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid

Does anyone have any idea about this error or what data needs to be mapped in JS file in order to resolve this issue?

2

3 Answers 3

0

This is something salesforce.com needs to fix. As far as I'm aware, this script isn't published anywhere, and has been missing since the beginning of the new docs. There's nothing you can do to fix the problem other than to submit a case to salesforce.com to fix it.

0

You will find problems with LWC components documentation in different places like examples, attributes description, default attributes, required attributes etc. I guess Salesforce has to streamline LWC documentation.

However, you can refer to AURA component documentation in most of the cases. For example, for your requirement, I created below example for tree-grid from AURA documentation and it works perfectly fine:

HTML:

<template>
    <div>
        <lightning-tree-grid columns={gridColumns}
                             data={gridData}
                             expanded-rows={gridExpandedRows}
                             key-field="name">
        </lightning-tree-grid>
    </div>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';

export default class Poc extends LightningElement {

    connectedCallback() {
        this.gridColumns = [
            {
                type: 'text',
                fieldName: 'accountName',
                label: 'Account Name',
                initialWidth: 300
            },
            {
                type: 'number',
                fieldName: 'employees',
                label: 'Employees'
            },
            {
                type: 'phone',
                fieldName: 'phone',
                label: 'Phone Number'
            },
            {
                type: 'url',
                fieldName: 'accountOwner',
                label: 'Account Owner',
                typeAttributes: {
                    label: { fieldName: 'accountOwnerName' }
                }
            },
            {
                type: 'text',
                fieldName: 'billingCity',
                label: 'Billing City'
            }
        ];

        this.gridData = [
            {
                "name": "123555",
                "accountName": "Rewis Inc",
                "employees": 3100,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/jane-doe",
                "accountOwnerName": "Jane Doe",
                "billingCity": "Phoeniz, AZ"
            },

            {
                "name": "123556",
                "accountName": "Acme Corporation",
                "employees": 10000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "San Francisco, CA",
                "_children": [
                    {
                        "name": "123556-A",
                        "accountName": "Acme Corporation (Bay Area)",
                        "employees": 3000,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY",
                        "_children": [
                            {
                                "name": "123556-A-A",
                                "accountName": "Acme Corporation (Oakland)",
                                "employees": 745,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-A-B",
                                "accountName": "Acme Corporation (San Francisco)",
                                "employees": 578,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "Los Angeles, CA"
                            }
                        ]
                    },

                    {
                        "name": "123556-B",
                        "accountName": "Acme Corporation (East)",
                        "employees": 430,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "San Francisco, CA",
                        "_children": [
                            {
                                "name": "123556-B-A",
                                "accountName": "Acme Corporation (NY)",
                                "employees": 1210,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-B-B",
                                "accountName": "Acme Corporation (VA)",
                                "employees": 410,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY",
                                "_children": [
                                    {
                                        "name": "123556-B-B-A",
                                        "accountName": "Allied Technologies",
                                        "employees": 390,
                                        "phone": "837-555-1212",
                                        "accountOwner": "http://example.com/jane-doe",
                                        "accountOwnerName": "Jane Doe",
                                        "billingCity": "Los Angeles, CA",
                                        "_children": [
                                            {
                                                "name": "123556-B-B-A-A",
                                                "accountName": "Allied Technologies (UV)",
                                                "employees": 270,
                                                "phone": "837-555-1212",
                                                "accountOwner": "http://example.com/john-doe",
                                                "accountOwnerName": "John Doe",
                                                "billingCity": "San Francisco, CA"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },

            {
                "name": "123557",
                "accountName": "Rhode Enterprises",
                "employees": 6000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123557-A",
                        "accountName": "Rhode Enterprises (UCA)",
                        "employees": 2540,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY"
                    }
                ]
            },

            {
                "name": "123558",
                "accountName": "Tech Labs",
                "employees": 1856,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123558-A",
                        "accountName": "Opportunity Resources Inc",
                        "employees": 1934,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "Los Angeles, CA"
                    }
                ]
            }
        ];

        this.gridExpandedRows = ["123556", "123556-A", "123556-B", "123556-B-B", "123557"];

    }

}
0

I just copied the column and grid data from the Lightning treegrid component and it worked for me.

JS file

import { LightningElement } from 'lwc';

export default class TreeGridBasic extends LightningElement {

// definition of columns for the tree grid
gridColumns = [
    {
        type: 'text',
        fieldName: 'accountName',
        label: 'Account Name',
        initialWidth: 300
    },
    {
        type: 'number',
        fieldName: 'employees',
        label: 'Employees'
    },
    {
        type: 'phone',
        fieldName: 'phone',
        label: 'Phone Number'
    },
    {
        type: 'url',
        fieldName: 'accountOwner',
        label: 'Account Owner',
        typeAttributes: {
            label: { fieldName: 'accountOwnerName' }
        }
    },
    {
        type: 'text',
        fieldName: 'billingCity',
        label: 'Billing City'
    }
];

// data provided to the tree grid
gridData = [
    {
        "name": "123555",
        "accountName": "Rewis Inc",
        "employees": 3100,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/jane-doe",
        "accountOwnerName": "Jane Doe",
        "billingCity": "Phoeniz, AZ"
    },

    {
        "name": "123556",
        "accountName": "Acme Corporation",
        "employees": 10000,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/john-doe",
        "accountOwnerName": "John Doe",
        "billingCity": "San Francisco, CA",
        "_children": [
            {
                "name": "123556-A",
                "accountName": "Acme Corporation (Bay Area)",
                "employees": 3000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123556-A-A",
                        "accountName": "Acme Corporation (Oakland)",
                        "employees": 745,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY"
                    },
                    {
                        "name": "123556-A-B",
                        "accountName": "Acme Corporation (San Francisco)",
                        "employees": 578,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/jane-doe",
                        "accountOwnerName": "Jane Doe",
                        "billingCity": "Los Angeles, CA"
                    }
                ]
            },

            {
                "name": "123556-B",
                "accountName": "Acme Corporation (East)",
                "employees": 430,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "San Francisco, CA",
                "_children": [
                    {
                        "name": "123556-B-A",
                        "accountName": "Acme Corporation (NY)",
                        "employees": 1210,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/jane-doe",
                        "accountOwnerName": "Jane Doe",
                        "billingCity": "New York, NY"
                    },
                    {
                        "name": "123556-B-B",
                        "accountName": "Acme Corporation (VA)",
                        "employees": 410,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY",
                        "_children": [
                            {
                                "name": "123556-B-B-A",
                                "accountName": "Allied Technologies",
                                "employees": 390,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "Los Angeles, CA",
                                "_children": [
                                    {
                                        "name": "123556-B-B-A-A",
                                        "accountName": "Allied Technologies (UV)",
                                        "employees": 270,
                                        "phone": "837-555-1212",
                                        "accountOwner": "http://example.com/john-doe",
                                        "accountOwnerName": "John Doe",
                                        "billingCity": "San Francisco, CA"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },

    {
        "name": "123557",
        "accountName": "Rhode Enterprises",
        "employees": 6000,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/john-doe",
        "accountOwnerName": "John Doe",
        "billingCity": "New York, NY",
        "_children": [
            {
                "name": "123557-A",
                "accountName": "Rhode Enterprises (UCA)",
                "employees": 2540,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY"
            }
        ]
    },

    {
        "name": "123558",
        "accountName": "Tech Labs",
        "employees": 1856,
        "phone": "837-555-1212",
        "accountOwner": "http://example.com/john-doe",
        "accountOwnerName": "John Doe",
        "billingCity": "New York, NY",
        "_children": [
            {
                "name": "123558-A",
                "accountName": "Opportunity Resources Inc",
                "employees": 1934,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "Los Angeles, CA"
            }
        ]
    }
];

}

You must log in to answer this question.

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