0

I'm attempting to customize a label in lightning-accordion. Next to the label I'm trying to place a count that populates from wrapper.

 <lightning-accordionSection key={account.id} name={account.name}  label={account.name -recordCount}> CONTENT </lightning:accordionSection>

But the label is incorrect. What is a better way to show?

One solution would be to concat the name and record count as a string and pass it from Apex to UI. But I was hoping for a simpler way to customize the label on the accordion.

5
  • what do you mean the label is incorrect?
    – User6670
    Commented Feb 18, 2020 at 20:58
  • I can only add label={account.name} OR label={account.recordCount} or or I can put label= "\some string". If I deploy using the above syntax, I get an error and says LWC accordion section has incorrect syntax
    – MnZ
    Commented Feb 18, 2020 at 21:01
  • oh okay LWC didn't saw the tag
    – User6670
    Commented Feb 18, 2020 at 21:10
  • Your code snippet shows the Aura lightning accordion, you are indeed working in LWC, correct? Commented Feb 18, 2020 at 22:24
  • Yes indeed, that was a wrong copy paste. I have updated. Thanks for the info
    – MnZ
    Commented Feb 19, 2020 at 4:21

1 Answer 1

2

You can make use of getter property in Lightning web component evaluate the label value. It would be something like:-

get labelValue(){
return this.account.name +' - '+ this.recordCount;
}

and use this getter in html file as:-

<lightning-accordion-section name="B" label={labelValue}>
</lightning-accordion-section>

When you are dealing with more than one accordion section, you can create an array of javascript object where object properties can hold the computed label value and run an iteration using for:each directive to show accordion section.

    get features() {
        return [
            {
                label: this.account1.name +' - '+ this.recordCount1,
                name: 'section 1',
            },
            {
                label: this.account2.name +' - '+ this.recordCount2,
                name: 'section 2',
            },
            {
                label: this.account3.name +' - '+ this.recordCount3,
                name: 'section 3',
            },
        ];
    }
1
  • Thanks for the solution. Mine is on a wrapper. So I run a loop in order to get all the values.
    – MnZ
    Commented Feb 19, 2020 at 4:24

You must log in to answer this question.

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