+ Start a Discussion
KARIM EL ALAOUIKARIM EL ALAOUI 

ligthing component display avatar image depenting to custom object field value

Hi all,
I am struggling to figure out how to display an avatar image  depenting to custom object field value, we have reclamation custom object with lookup relation with contact and I need to display all relamations related to a contact in lightning component under contact and for each reclamation I need to display a static ressource avatar image depending to the value stored on type__c, see bellow all config:

********************
Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" controller="ReclamationListController" access="global" >
    <!-- Handler to call function when page is loaded initially -->
    <aura:handler name="init" action="{!c.getReclamationsList}" value="{!this}" />
    <!-- List of contacts stored in attribute -->
    
    <aura:attribute name="reclamationList" type="List" />
    <aura:attribute name="type" default="true" type="Boolean"  />
    
    <!-- Lightning card to show contacts -->
        <lightning:card title="Reclamations">
    
    <!-- **************************** -->
    <!-- Body of lightning card starts here -->
    <div class="slds-p-around_small">
        <div class="slds-grid slds-wrap">
            <aura:iteration items="{!v.reclamationList}" var="reclamation">
                
                <span class="slds-avatar">
                <aura:if isTrue="{!reclamation.Type__c} = Retard">                                                                                                      
                  <img alt="Logo" src="{!$Resource.plus}" title="User avatar" />
                      <aura:set attribute="else">
                           <img alt="Logo" src="{!$Resource.Minus}" title="User avatar" />
                        </aura:set>

                    </aura:if>                    
               </span>       
                
                <div class="slds-col slds-size_1-of-3 slds-p-around_small slds-box slds-theme_shade slds-theme_alert-texture">
                    <a href="javascript:void(0);">                   
                       
</a>            
                   
                    <lightning:card title="{!reclamation.Name}" footer="{!reclamation.Type__c}" 
                                    iconName="standard:contact" >
                        <aura:set attribute="actions">
                            <lightning:button name="{!reclamation.Id}" label=" Details" variant="brand"
                                              onclick="{!c.doRedirect}"/>
                        </aura:set>
                        <p class="slds-p-horizontal_small">
                            {!reclamation.Description__c} <br/> {!reclamation.Date__c}
                        </p>
                                          
                    </lightning:card>
                    
                </div>                                       
                
            </aura:iteration>
        </div>
    </div>       
        <!-- Lightning card actions -->
        <aura:set attribute="actions">
            <!-- New button added -->
            <lightning:button label="New" onclick="{!c.newReclamation}" />
        </aura:set>
    </lightning:card>
</aura:component>
/**********************

controller

({
    // Function called on initial page loading to get contact list from server
        getReclamationsList : function(component, event, helper) {
        // Helper function - fetchRecalamations called for interaction with server
                helper.fetchReclamations(component, event, helper);
                     
        },


    // Function used to create a new Reclamation
    newReclamation: function(component, event, helper) {
        // Global event force:createRecord is used
        var createReclamation = $A.get("e.force:createRecord");
        // Parameters like apiName and defaultValues are set
        createReclamation.setParams({
            "entityApiName": "Reclamation__c",
            "defaultFieldValues": {
                "Contact__c": component.get("v.recordId")
            }
        });
        // Event fired and new contact dialog open
        createReclamation.fire();
    }
})


////**************************

Helper

({
    // Function to fetch data from server called in initial loading of page
        fetchReclamations : function(component, event, helper) {
        // Assign server method to action variable
        var action = component.get("c.getReclamationList");
        // Getting the contact id from page
        var contactId = component.get("v.recordId");
 
        // Setting parameters for server method
        // 
        // 
           
        action.setParams({
            contactIds: contactId

        });

        // Callback function to get the response
        action.setCallback(this, function(response) {
            // Getting the response state
            var state = response.getState();
            // Check if response state is success
            if(state === 'SUCCESS') {
                // Getting the list of contacts from response and storing in js variable
                var reclamationList = response.getReturnValue();
                // Set the list attribute in component with the value returned by function
                component.set("v.reclamationList",reclamationList);
            }
            else {
                // Show an alert if the state is incomplete or error
                alert('Error in getting data');
            }
        });
        // Adding the action variable to the global action queue
        $A.enqueueAction(action);
        }    
})

Thanks for your help
 
Best Answer chosen by KARIM EL ALAOUI
Nayana KNayana K
<aura:if isTrue="{!reclamation.Type__c ==  'Retard'}">

All Answers

Nayana KNayana K
<aura:if isTrue="{!reclamation.Type__c ==  'Retard'}">
This was selected as the best answer
KARIM EL ALAOUIKARIM EL ALAOUI
Thank you Nayara for your helpresult, You are a PRO
Nayana KNayana K
Thank you so much Karim for these words :)