TransWikia.com

Changing the text of the Selected Lightning Card through checkbox

Salesforce Asked on November 11, 2021

https://i.stack.imgur.com/y3tg6.png

Please click the above link to view the image . The part circled in RED needs to be changed after clicking in the checkbox ‘Mark For Deletion’. Right now my issue is this that values circled in RED are getting changed for those card also which is not selected.i.e.for all the cards. I want to change the value for the selected card only through checkbox. Below is my code. Just missing some small point i guess. I am using boolean flag attribute to show and hide on checkbox select.

    Component :-
    
         <aura:iteration items="{!v.IntIndex}" var="item">
    
            <lightning:layoutItem flexibility="auto" padding="around-small">
    
                <div class="custom-box">
                    <lightning:card footer="Card Footer" title="Hello">
                        <aura:set attribute="actions">
             <lightning:input type="checkbox"  onclick="{!c.onCheck}" value="{!item.Id}" label="Mark for Deletion" aura:id="deleteContact" />
                       </aura:set>
                     <div class="slds-p-horizontal_small" id="{!item.Id}">
                          <aura:if isTrue="{!v.flag}">
                              The Record Name is {!item.Name}
                         </aura:if>
                         <aura:if isTrue="{!!v.flag}">
                            The Selected Record Name is {!item.Name}
    
                         </aura:if>
                     </div>
                 </lightning:card>
    
                
                </div>
            </lightning:layoutItem>
             </aura:iteration>
JS Controller :-
    onCheck : function(component, event, helper) {
        var contactsToDelete = component.find("deleteContact");
                   for(var i=0;i<contactsToDelete.length;i++) {
                // If contact has delete checkbox checked, change the body text to something else
        if(contactsToDelete[i].get("v.checked")){            
                        component.set("v.flag",false);
                   }

}

2 Answers

As per the suggestion of @sfdcfox ,one flag__c per card was used, not just one global value. Here flag__c picklist was created having two values 'Deleted' and 'UnDeleted'. For selected Checkbox card, the value 'Deleted' will display.

    Change:
              <aura:iteration items="{!v.IntIndex}" var="item">
    
            <lightning:layoutItem flexibility="auto" padding="around-small">
    
                <div class="custom-box">

                        <lightning:card footer="Card Footer" title="Hello">
                            <aura:set attribute="actions">
                 <lightning:input type="checkbox"  onclick="{!c.onCheck}" value="{!item.Name}" label="Mark for Deletion" aura:id="deleteContact" />
                           </aura:set>
                         <div class="slds-p-horizontal_small" id="{!item.Id}">
                              
                               The Selected Record is&nbsp;{!item.flag__c}
                         </div>
                     </lightning:card>
                    </div>
            </lightning:layoutItem>
              </aura:iteration>
                    
    And in your controller:
    
        onCheck: function (component, event, helper) {
            var items = component.get("v.IntIndex");
            var contactsToDelete = component.find('deleteContact');
            for (var i = 0; i < contactsToDelete.length; i++) {
            if(contactsToDelete[i].get("v.checked")){
                   itemslst[i].flag__c='Deleted';            
                }         
                          component.set("v.IntIndex", itemslst);
        }

Answered by SFDC LWC on November 11, 2021

You need one flag per card, not just one global value.

Change:

<aura:if isTrue="{!v.flag}">

...

<aura:if isTrue="{!!v.flag}">

To:

<aura:if isTrue="{!item.flag}">

...

<aura:if isTrue="{!!item.flag}">

And in your controller:

onCheck: function (component, event, helper) {
    var items = component.get("v.IntIndex");
    var contactsToDelete = component.find('deleteContact');
    for (var i = 0; i < contactsToDelete.length; i++) {
        // If contact has delete checkbox checked, change the body text to something else
        items[i].flag = !contactsToDelete[i].get('v.checked');
    }
    component.set("v.IntIndex", items);
}

Answered by sfdcfox on November 11, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP