0

so, I am able to hide/unhide fields based on the pick list selection but the problem is it only works for first row in multiple dynamic rows.

Here's the screen-shot,

enter image description here

dynamic row picklist selections.

The requirement is , when user selects Dependent from the "select" drop down, only Dependent information field should render and if user selects "Primary" then Name field should render.

Here, the logic I have from the controller works fine for the first row but it does not work for the subsequent dynamic rows.

Here's my controller with select being the controlling field and calling the SelectChange from controller.

<div class="container-fluid">
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <tbody>
        <aura:iteration items="{!v.docList}" var="acc" indexVar="index">
            <lightning:recordEditForm aura:id="docmancommunicationform" objectApiName="Docman_Communication__c">
                <div class="slds-grid slds-gutters">
                    <div class="slds_col slds-size_1-of-7" style="text-align: center;">
                        <div class="slds-p-top_large"></div>
                        <span>{!index + 1}</span>

                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7">
                        <span><lightning:inputField aura:id="select" fieldName="Select__c" value="{!acc.Select__c}"
                                                    onchange="{!c.selectChange}"/></span>

                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7" aura:id="primarynamediv">
                        <span><lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c"
                                                    value="{!acc.PrimaryInformation__c}"/></span>

                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7" aura:id="dependentnamediv">
                        <span><lightning:inputfield aura:id="dependentname" fieldName="Dependent__c"
                                                    value="{!acc.Dependent__c}"/></span>
                    </div>

                    <!-- <td>
                    <lightning:inputfield aura:id="dependentname" fieldName ="Dependent_Name__c" value="{!acc.Dependent_Name__c}"/>
                    </td>-->
                    <!--<td>
                        <lightning:inputField fieldName="Status__c" aura:id="communicationstatus" value="{!acc.Status__c}"></lightning:inputField>
                    </td>-->
                    <div class="slds_col slds-size_1-of-7">
                        <span><lightning:inputField fieldName="Rejected_Type__c"
                                                    value="{!acc.Rejected_Type__c}"/></span>
                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7">
                        <span><lightning:inputField fieldName="Rejected_Reason__c"
                                                    value="{!acc.Rejected_Reason__c}"/></span>
                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7">
                        <span> <lightning:inputField fieldName="Deadline__c" value="{!acc.Deadline__c}"/></span>
                    </div>
                    <div class="slds-p-right_small"></div>
                    <div class="slds_col slds-size_1-of-7">
                        <div class="slds-p-top_large"></div>
                        <a onclick="{!c.removeRow}" data-record="{!index}">
                            <span> <lightning:icon iconName="utility:delete" size="small"
                                                   alternativeText="Delete"/></span>
                            <span class="slds-assistive-text">Delete</span>
                        </a>
                    </div>
                    <div class="slds-p-around_xx-small"></div>
                </div>
                <!-- <td >
                     <a onclick="{!c.removeRow}" data-record="{!index}">
                         <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                         <span class="slds-assistive-text">Delete</span>
                     </a>
                 </td>-->
                <div class="slds-p-bottom_small"/>
            </lightning:recordEditForm>
        </aura:iteration>
        </tbody>
    </table>

    <div class="slds-m-top--xx-large"/>
    <button class="slds-button slds-button_brand" onclick="{!c.Save}">Save</button>

</div>

This is the helper method,

selectChange : function(component, event, helper){
        console.log('37 --- :'+event.getSource().get("v.value"));
        if(event.getSource().get("v.value")=== 'Primary'){
            $A.util.removeClass(component.find("primarynamediv"), 'slds-hide');
            $A.util.addClass(component.find("dependentnamediv"), 'slds-hide');
        }else{
            $A.util.addClass(component.find("primarynamediv"), 'slds-hide');
            $A.util.removeClass(component.find("dependentnamediv"), 'slds-hide');
        }
    },

How do I hide/un-hide specific row's fields when the Select option changes?

2
  • there is no screen shot, please add
    – sdandamud1
    Commented Jun 6, 2019 at 13:25
  • @sdandamud1 I added the screenshots, sorry missed in the first one. can you guide me how I go about hiding a particular field based on the index and only for that row? Commented Jun 6, 2019 at 13:36

1 Answer 1

1

you don't need to write logic for hide/show in your controller. by using expression functions lex expressions for render/un-render,you can do it cmp it self , try below code.

cmp

<div class="container-fluid">        
                <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                    <tbody>     
                        <aura:iteration items="{!v.docList}" var="acc" indexVar="index">
                            <lightning:recordEditForm aura:id="docmancommunicationform" objectApiName="Docman_Communication__c" >    
                                <div class="slds-grid slds-gutters">
                                        <div class="slds_col slds-size_1-of-7" style="text-align: center;">
                                            <div class="slds-p-top_large"></div>
                                            <span>{!index + 1}</span>

                                        </div>
                                        <div class="slds-p-right_small"></div>
                                        <div class="slds_col slds-size_1-of-7">
                                           <span><lightning:inputField aura:id="select" fieldName="Select__c" value="{!acc.Select__c}" onchange="{!c.selectChange}"/></span>

                                        </div>
                                        <div class="slds-p-right_small"></div>
                                        <div class="{!(acc.Select__c == 'Primary') ?'slds_col slds-size_1-of-7' : 'slds_col slds-size_1-of-7 slds-hide'}" aura:id="primarynamediv" >
                                            <span><lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c" value="{!acc.PrimaryInformation__c}"/></span>

                                        </div>
                                        <div class="slds-p-right_small"></div>
                                        <div class="{!(acc.Select__c == 'Dependent') ?'slds_col slds-size_1-of-7' : 'slds_col slds-size_1-of-7 slds-hide'}" aura:id="dependentnamediv" >
                                            <span><lightning:inputfield aura:id="dependentname" fieldName="Dependent__c" value="{!acc.Dependent__c}"/></span>
                                       </div>
                                    <div class="slds-p-right_small"></div>
                                        <div class="slds_col slds-size_1-of-7">
                                            <div class="slds-p-top_large"></div>
                                            <a onclick="{!c.removeRow}" data-record="{!index}">
                                            <span> <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/></span>
                                            <span class="slds-assistive-text">Delete</span>
                                            </a>
                                        </div>
                                    <div class="slds-p-around_xx-small"></div>
                                </div>
                                   <!-- <td >
                                        <a onclick="{!c.removeRow}" data-record="{!index}">
                                            <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                                            <span class="slds-assistive-text">Delete</span>
                                        </a>
                                    </td>-->
                                <div class="slds-p-bottom_small"/>
                            </lightning:recordEditForm>
                        </aura:iteration>
                    </tbody>
                </table>

                <div class="slds-m-top--xx-large"/>
                <button class="slds-button slds-button_brand" onclick="{!c.Save}">Save</button>

            </div>
6
  • This is great, I have been searching for 2 days and did not get any lead towards it. I appreciate your help. will you be kind enough to point me towards some resources I can start learning from other than developer.salesforce.com? I have done a few trailhead modules over this too.. Commented Jun 6, 2019 at 13:53
  • just one thing, as that worked just fine, in Lex expressions, can I include if condition to check for multiple values? Commented Jun 6, 2019 at 13:57
  • yes, you can add multiple conditions, by using AND/OR operators. like {!and(acc.Select__c == 'Primary',acc.Select__c == 'Dependent') ? '':''}
    – sdandamud1
    Commented Jun 6, 2019 at 13:59
  • yes, I added If condition and was able to achieve it. also, I will ask other question on it if it;s too big, but using lightning record edit form, how do I get the related parent record ID? I have to prepopulate a field and I am able to get the Record Id but by using record Id how do I get the parent record id? Commented Jun 6, 2019 at 14:01
  • can you please come with new question? it's very hard to give a solution in comments
    – sdandamud1
    Commented Jun 6, 2019 at 14:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .