You need to sign in to do that
Don't have an account?
KARIM 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
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
All Answers