2

I have a lightning iteration component that shows several information on accounts in a row. One of the columns allows the user to choose a lookup( I use a custom lookup component) value to edit the account. I have another row that has a checkbox. What I am trying to accomplish is if the user clicks the checkbox, the column with the lookup value gets greyed out and is not allowed for editing. I tried to do this with a boolean attribute that gets turned to false if the checkbox is checked and then use an aura if to display the custom lookup component in the column but this ends up disabling the entire column. I need the row to have that column be disabled in THAT specific row is the checkbox in that row is checked. Below is code.

<aura:iteration var="account" items="{!v.Accounts}" indexVar="idx">
    <tr class="slds-hint-parent">
        <th role="gridcell">
            <div class="slds-truncate" title="Acc"><a href="{!'/'+ account.Id }" target="_blank" tabindex="-1">{!account.Name}</a></div>
        </th>
        <td role="gridcell">
            <lightning:layoutItem size="4">
                <aura:if isTrue = "{!v.show}">
                    <c:customLookupComp objectAPIName="Master_Customer__c"
                        iconName="standard:account"
                        selectedRecord="{!v.selectedLookUpRecord}"
                        label="Search"
                        fieldAPIName="Id"
                        resultField1="Master_Customer__c"
                        resultField2=""
                        showlabel="false"
                        />
                    <force:inputField  value="{!v.selectedLookUpRecords}"/>
                </aura:if>
            </lightning:layoutItem>
        </td>
        <td role="gridcell">
            <div class="slds-truncate" title="Parent acc"><a href="{!'/'+ account.parentid }" target="_blank" tabindex="-1">{!account.Parent.Name}</a></div>
        </td>
        <td role="gridcell">
            <label class="slds-checkbox--button__label" data-record="{!idx}"  onclick="{!c.masterCustomerCheckbox}">
                <ui:inputCheckbox aura:id="button1" />
            </label>
        </td>
    </tr>
</aura:iteration>

CONTROLLER

onLookupSelected : function(component, event) {
    console.log('in lookupselected');
    var selectedAccountGetFromEvent = event.getParam("selectedRecord");
    console.log('in lookupselected2');
    var recordsList = component.get("v.selectedLookUpRecords");
    recordsList.push(selectedAccountGetFromEvent);
    //component.set("v.selectedLookUpRecords" , selectedAccountGetFromEvent); 
    console.log('in lookupselected3');
    var record = component.get("v.selectedLookUpRecords");


},
masterCustomerCheckbox : function(component, event, helper) {
    console.log('in myfunc');
    //var show = component.get("v.show");
    //console.log('before show' + show);
    //component.set("v.show", false);
    //console.log('show ' + show);
    var selectedItem = event.currentTarget; // Get the target object
    var index = selectedItem.dataset.record; // Get its value i.e. the index This is because in the iterration i used index on it
    var selectedacc = component.get("v.Accounts")[index]; // Use it retrieve the stored record
    console.log('Acc Id ' + selectedacc.Id);

    var masterCustomersToCreate = component.get("v.masterCustomerToCreate");
    masterCustomersToCreate.push(selectedacc);

    console.log('this is the master customer to create' + masterCustomersToCreate);

    var action = component.get('c.createMasterCustomers');

    action.setParams({
        'accList': masterCustomersToCreate
    })

    action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
            //alert('Record Created');
        }
    });
    $A.enqueueAction(action);



},
1

So, it looks like you're trying to hide the custom lookup component in the row that's selected. (I had some trouble following your description, so let me know if that isn't correct!)

Right now, you're using the same attribute (v.show) to display/hide -all- of the custom lookup components. You need a way to identify the component in the selected row.

You're already using the idx value to identify each row's checkbox. Instead of using a boolean attribute to control the visibility of the lookup, use an integer to store the idx of the selected row.

Then, you can use one of two options:

(1) Change the logic in the aura:if statement to show nothing if the row is selected, and move the customLookupComp into an else block:

Assuming your integer attribute is named "selectedRowNum," the value in your aura:if statement would change to "{!v.selectedRowNum == idx}".

<aura:if isTrue = "{!selectedRowNum == idx}">
<!-- show nothing if the row is selected -->

    <aura:set attribute="else">
    <!-- otherwise, show the component -->

        <c:customLookupComp objectAPIName = "Master_Customer__c"
                                 iconName = "standard:account"
                           selectedRecord = "{!v.selectedLookUpRecord}"
                                    label = "Search"
                             fieldAPIName = "Id"
                             resultField1 = "Master_Customer__c"
                             resultField2 = ""
                                showlabel = "false"
        />
        <force:inputField  value="{!v.selectedLookUpRecords}"/>
    </aura:set>
</aura:if>

Populate the selectedRowNum value in your masterCustomerCheckbox function, and you should be all set.

(2) Use CSS instead of aura:if to show/hide the component:

<div class="{!IF(NOT(selectedRowNum == idx), 'slds-show', 'slds-hide')}">
    <c:customLookupComp objectAPIName = "Master_Customer__c"
                             iconName = "standard:account"
                       selectedRecord = "{!v.selectedLookUpRecord}"
                                label = "Search"
                         fieldAPIName = "Id"
                         resultField1 = "Master_Customer__c"
                         resultField2 = ""
                            showlabel = "false"
    />
    <force:inputField  value="{!v.selectedLookUpRecords}"/>

</div>
7
  • Hi, I am trying to hide the custom lookup component in the row if the checkbox is checked. Oct 10 '18 at 11:19
  • 1
    Ah -- got'cha. I'll update my answer. Be sure and mark it as the answer if you find it helpful! Oct 10 '18 at 13:38
  • Very helpful!! Marked as answer! Oct 10 '18 at 17:52
  • Hi, this isnt working. Im printing my debug log to see what the attribute contains and what the index is and they are the same. however the component still lingers and doesnt dissapear. I am using option 1 you provided Oct 10 '18 at 19:15
  • Hi, I believe the condition is met however the component does not refresh, i think the condition is being met, then when I click the box it changes the attribute but the aura if condition does not get reevaluated Oct 10 '18 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.