You need to sign in to do that
Don't have an account?
Luciano Roberto
Thanks
How to pass an <Aura: id> to each record
Folks,
I'm setting up a toast alert in salesforce, where a list of alerts will be shown.
Each alert will have to have its own aura: id so that I can modify its behavior, such as alert type and the close button.
Below is my code as it is currently configured, it has the fixed aura id <div aura: id = "alert" role = "status">, needs to be dynamic.
I was thinking of getting the name of each alert object record to pass to the aura id, but I do not know how to do it.
Can anybody help me
Controller.js ------------------------------------------------------------------- ({ doInit : function(component, event, helper) { var action = component.get( "c.getMsgs" ); action.setCallback(this, function(response) { var state = response.getState(); if(state == 'SUCCESS') { var alertMsgList = response.getReturnValue(); var lista = [ ]; if(alertMsgList.length > 0) { component.set("v.showToast", true); var tipoAlerta = component.find( "alerta" ); $A.util.addClass( tipoAlerta, "slds-notify" ); $A.util.addClass( tipoAlerta, "slds-notify_toast" ); } for(var i = 0; i < alertMsgList.length; i ++) { var alerta = alertMsgList[ i ].Alerta1__c; var tipo = alertMsgList[ i ].Tipo_de_Alerta__c; var titulo = alertMsgList[ i ].Name; lista.push(alerta); } component.set("v.html",lista); } else { console.log("Failed with state: " + state); } }); $A.enqueueAction(action); }, close: function(cmp, event, helper) { $A.util.addClass(cmp.find('alerta'), "slds-hide"); }, })
Alert.cmp ------------------------------------------------------------------------------------------ <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController"> <aura:attribute name="html" type="List" /> <aura:attribute name="showToast" type="boolean" default="false"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:if isTrue="{!v.showToast}"> <aura:iteration items="{!v.html}" var="lista"> <div class="demo-only" style="height: 4rem;"> <div class="slds-notify_container slds-is-relative"> <div aura:id="alerta" role="status"> <div class="slds-notify__content"> <h2 class="slds-text-heading_small "> <aura:unescapedHtml value="{!lista}" /> </h2> <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close" iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small" class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" onclick="{!c.close}"/> </div> </div> </div> </div> </aura:iteration> </aura:if> </aura:component>
Thanks
I was able to solve the following, I did not need to put the ID in the DIV, instead I put the class directly bringing the alert type formatting in it
My code looks like this, if someone needs to:
Component.cmp
Controller.js
All Answers
Greetings to you!
You can not dynamically set aura:id for any component, it should always point to the hardcoded string value.
It is an idea to allow dynamic aura:id attribute for Lightning Components: https://success.salesforce.com/ideaView?id=0873A000000E8fBQAS
According to Salesforce doc (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_ids.htm):
aura:id doesn't support expressions. You can only assign literal string values to aura:id.
However, you can use (but it is an anti-pattern in lightning):
And in your controller, you'll have to use document.getElementById instead of component.find()
Also, please refer to the below link which might help you further with the above requirement.
https://bugcoder.it/?p=174
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
Thanks Khan for your help, but I still can not get it to work.
I'm starting as a programmer I'm still crawling.
I will inform the code below with the comments to see if you can help me.
Basically, what I need is that for each alert found and passed to it, its alert (Alert1__c), its id (Name), CSS settings (Warning, Error, Success, etc) and a button to close it .
I do not know if my code is a bit confusing, but if you can help me, I'll be very grateful.
Thanks so much
I was able to solve the following, I did not need to put the ID in the DIV, instead I put the class directly bringing the alert type formatting in it
My code looks like this, if someone needs to:
Component.cmp
Controller.js