3

I have a list of records that I iterate over.

<aura:iteration items="{!v.items}" var=item">
    <aura:if isTrue="{!item.field__c == v.completed}">

        <c:item item="{!item}"/>

    </aura:if>
 </aura:iteration>

I have multiple conditions to display the data in different ways

Personal Items

  1. Display current == true, personal == true of the ownerId == currentUserId (current personal items).

  2. Display current == false, personal == true of the of the ownerId == currentUserId (completed personal items).

Shared records among the org

  1. Display current == true, personal == false (current company items).

  2. Display current == false, personal == false (completed company items).

I'm using a mix of conditional database calls, conditional css, and aura:if's. It's turning into a big mess making it all work together.

Are conditional database calls, conditional css, and aura:if's the only ways to control which records are shown?

If I embed multiple aura:if's it causes rendering errors with my lightning events.

Is there a best practice from Salesforce how to achieve what I'm trying to do?

1 Answer 1

4

Salesforce actually recommend using CSS if possible:

Use CSS to toggle markup visibility. You could use the tag to do the same thing but we recommend using CSS as it’s the more standard approach.

Reference here.

To use CSS, you can put something like this in your CSS file:

.THIS .hide {
  display:none!important;
}

And add the hide class where necessary.

<aura:iteration items="{!v.items}" var=item">
    <c:item item="{!item}" itemClass="{!item.field__c == v.completed ? hide : ''}"/>
</aura:iteration>

In the item component, you can then map itemClass to whatever class you need.

ie:

<aura:attribute name="itemClass" type="String"/>
<ui:outputText value="{!v.item}" class="{!v.itemClass}"/>
10
  • I'll give this a try and let you know
    – Tyler Zika
    Commented Jul 20, 2016 at 19:49
  • 1
    You should be able to put more complicated logic in the class attribute if necessary Commented Jul 20, 2016 at 19:54
  • 1
    Oh and here is a nice reference to the kinds of things you can have in the class expression - quite a lot of good ones actually: developer.salesforce.com/docs/atlas.en-us.lightning.meta/… Commented Jul 20, 2016 at 20:00
  • 1
    Normally you can define 2-3 classes on the component - they are generally different for each component. For example, ui:button has class and labelClass. If this is your own custom component, you can make an attribute - perhaps itemClass and pass that to the inner component. Commented Jul 20, 2016 at 21:56
  • 1
    Yes, that's what I was thinking. Then map that to your inner class. Commented Jul 20, 2016 at 22:34

You must log in to answer this question.

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