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 if there is a simpler way to customize the label on the accordion.

5
  • what do you mean the label is incorrect? – User6670 Feb 18 '20 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 Feb 18 '20 at 21:01
  • oh okay LWC didn't saw the tag – User6670 Feb 18 '20 at 21:10
  • Your code snippet shows the Aura lightning accordion, you are indeed working in LWC, correct? – Clay Chipps Feb 18 '20 at 22:24
  • Yes indeed, that was a wrong copy paste. I have updated. Thanks for the info – MnZ Feb 19 '20 at 4:21
1

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 Feb 19 '20 at 4:24

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.