1

I have an application that utilises mix of nested tabsets and trees - see this playground: https://webcomponents.dev/edit/vXwtMddn7CcREzy4KXK4

I'd like lightning-tree to behave more like lightning-tabset - aka each of the "tab" get it's own instance. Right now my app passes selectedGroup which in turn fires some wire services which only work once and cause all sort of annoying side effects.

Before I go in an fork lightning-tree off github - perhaps there's a simpler way to get separate instances of component? Perhaps wrap whole tabset into separate component?

3
  • +1 for the playground example, but why does it need to be lightning-tree that needs to be changed? Have you looked at the vertical variant of lightning-tabset? Jul 22 '21 at 14:02
  • Good idea and I might approach it from that aspect - we wanna display items in collapsible groups - Queues, Roles, Public Groups. So it probably easiest to add that support to open source lightning-tabset...
    – dzh
    Jul 22 '21 at 21:20
  • @KrisGoncalves found a way around this. Turns out pretty simple.
    – dzh
    Aug 5 '21 at 22:45
0

Found a way to do this, full demo here

TLDR - iterate instances that I wanna render and dynamically update their visibility. Keep cache of already rendered components and use css to hide ones we don't need.

Component:

            <lightning-tree items={groupsTree} onselect={selectGroupByEvent}>
            </lightning-tree>
            <template for:each={groupsTree} for:item="j">
                <template if:true={j.isRendered}>
                    <div class={j.isDisplayed} key={j.name}>
                        <c-child selected-group={j}>
                        </c-child>
                    </div>
                </template>
            </template>

Code:

    groupsTree = [
        {
            label: 'Group 1',
            description: 'le group uno',
            name: '1',
            expanded: true
        },
        {
            label: 'Group 2',
            description: 'le group dos',
            name: '2',
            expanded: true
        }
    ]
    rendersCache = new Set()
    selectGroupByEvent(event) {
        this.selectGroup(event.detail.name)
    }
    selectGroup(selectedGroup) {
        this.groupsTree = this.groupsTree.map(i => {
            i.isRendered = this.rendersCache.has(i.name) || i.name === selectedGroup
            if (i.isRendered) {
                this.rendersCache.add(i.name)
            }
            i.isDisplayed = i.name === selectedGroup ? 'slds-show' : 'slds-hide'
            return i
        })
    }
    connectedCallback(){
        this.selectGroup(this.groupsTree[0].name)
    }

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.