[SalesForce] Display records based on multiple conditions

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?

Best Answer

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}"/>