0

I have a group of lightning:button icons on my aura component inside a data table. I want to apply a custom css on some of them based on the array of indexes i have.

Below is my lightning:button code.

<lightning:button aura:id="Favorite1"
title="{!v.document.id}" iconName="utility:favorite" type="submit" variant="base" onclick="{!c.addfavorite}" />

And the array of indexes in an aura attribute 'component.get("v.IndexofFavDocuments")'.

How can i iterate over these indexes, fetch the aura:ids of those specific buttons and apply a custom css 'blueicn'.

Please help me out on this. I can go by this approach only.

0

2 Answers 2

1

First of all, an aura:id can't be dynamically set. Forget about aura:id to find something in an iterator. And I didn't get why you have a title {!v.document.id} in your button. Would you not rather refer to the item that you iterate on here (which makes it wrong to refer to the value provider "v")?

In any case - let's assume you have a Lightning table styled according to the Lightning design system; you have some rows and in each row buttons; in some of these rows you want to apply the CSS class blueicn to a button, depending on an attribute "Colour" of the document item referred to by that particular row.

Your button could have this class attribute:

class="{!document.Colour=='BLUE'?'blueicn':''}"

Helpful?!

2
  • Thank you Felix for your response. Actually i have an array of indexes in an attribute 'v.IndexofFavDocuments'. Basically I want to iterate over this array by lightning:button name attribute, and if it matches then fetch that aura:id and apply this class. Below is my lightning:button on each row. <lightning:button aura:id="Favorite1" title="{!v.document.id}" iconName="utility:favorite" type="submit" variant="base" onclick="{!c.addfavorite}" name="{!v.index}" /> Please help. Dec 26, 2021 at 16:22
  • Based on which event would you "fetch that aura:id and apply this class"? Why not apply the class during component rendering? As you insist on using the aura:id, let me ask: Are you aware that you'd get an array of buttons with the aura:id "Favorite1", if you retrieve-by-aura-id in your component? As many buttons as you have rows! (It would be better, if you improve your original question above instead of providing details in comments.) Dec 26, 2021 at 16:41
2

The reason why you're stuck is because what you're trying to do is not possible. There is no expression function that allows to you see if a value is contained in a list of values. I stated as much in my previous answer to your previous question.

What you need to do is place the desired class inside the data, like this:

<lightning:button title="{!document.id}" 
  class="{!document.style}"
  data-id="{!document.id}"
  iconName="utility:favorite" 
  onclick="{!c.addfavorite}" />

Which you then set for each document:

const indexes = component.get("v.IndexofFavDocuments")
const documents = [...component.get("v.documents")];
documents.forEach(document => {
  document.style = indexes.indexOf(document.id) > -1? 'class1':'class2'
});
component.set("v.documents", documents);
1

You must log in to answer this question.

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