0

I have a visualforce page in which I am calling the lightning component. Based on a field change, I want render the bottom section of the component. here, the status field is a picklist and I want to render a section when the value of that field is Rejected. How do I do that?

Component:

Top section :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global"  controller="Nigoemailcommunication">
 <aura:attribute name="recordId" type="Id" />
<aura:attribute name="docmanId" type="Id" />
<aura:attribute name="docList" type="Docman_Communication__c[]"/>

<lightning:notificationsLibrary aura:id="notificationsLibrary"/>
<lightning:workspaceAPI aura:id="workspace" />

<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:layoutItem>
        <lightning:icon iconName="standard:scan_card" alternativeText="docman"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">DocMan Edit</h1>
            <!--<h2 class="slds-text-heading"></h2>-->
        </div>
    </lightning:layoutItem>
</lightning:layout>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="container-fluid">    
    <div class="slds-m-left--xx-large"/>
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <tbody>          
            <lightning:recordEditForm aura:id="docmanform" recordId="{!v.docmanId}" objectApiName="DocMan__c"
                              onsubmit="{!c.handleOnSubmit}"
                              onsuccess="{!c.handleOnSuccess}"
                              >
                 <lightning:messages />
                    <tr>
                        <td><lightning:layoutitem ><lightning:outputField aura:id="Name" fieldName="Name"/></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:outputField  fieldName="Contact__c" ></lightning:outputField></td>

                    </tr>
                    <tr>
                        <td><lightning:layoutitem ><lightning:inputField aura:id="Ssn__c" fieldName="Ssn__c"/></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem ><lightning:inputField  fieldName="Type__c" /></lightning:layoutitem></td>
                    </tr>
                    <tr>
                        <td><lightning:layoutitem ><lightning:inputField fieldName="DocId__c" /></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem > <lightning:inputField  fieldName="Method__c"/></lightning:layoutitem></td>                                
                    </tr>
                    <tr>
                        <td><lightning:inputField fieldName="TraceId__c" /></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem ><lightning:inputField fieldName="Received_Date__c"/></lightning:layoutitem></td>                                                        
                    </tr>
                    <tr >
                        <td><lightning:layoutitem><lightning:inputField  fieldName="Status__c" aura:id="status" onchange="{!c.handlechange}" /></lightning:layoutitem></td>                                
                    </tr>

                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
                </lightning:recordEditForm>  
        </tbody>
    </table>
    <div class="slds-m-top--xx-large"/>

Based on the Status field on the above code, I want to render the bottom section, I would use but I do not know how can I access Status field's value.

Bottom section :

<!-- PAGE HEADER -->
            <lightning:layout class="slds-page-header slds-page-header--object-home">
                <lightning:layoutItem>
                    <lightning:icon iconName="standard:scan_card" alternativeText="primaryinfo"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="horizontal-small">
                    <div class="page-section page-header">
                        <h1 class="slds-text-heading--label">NIGO Email Communication</h1>
                        <h2 class="slds-text-heading--medium">Primary Information</h2>
                    </div>
                </lightning:layoutItem>
            </lightning:layout>

            <div class="slds-m-around--xx-large">
                <div class="slds-float_left slds-p-bottom_small">
                    <h1 class="slds-page-header__title">Add Row 
                        <lightning:buttonIcon iconName="utility:add"  size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddrowClick}"/>
                    </h1> 
                </div>
                <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" >                    
                                    <tr>
                                        <td> 
                                            {!index + 1}
                                        </td>
                                        <td>
                                            <lightning:inputField aura:id="select" fieldName="Select"/>
                                        </td>
                                        <td>
                                            <lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c" value="{!acc.PrimaryInformation__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Status__c" value="{!acc.Status__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Rejected_Type__c" value="{!acc.Rejected_Type__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField  fieldName="Rejected_Reason__c" value="{!acc.Rejected_Reason__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Dealine__c" value="{!acc.Dealine__c}"/>
                                        </td>
                                        <!--<c:LightningDependentPicklistCmp/>-->
                                        <td style="padding-top: 27px;padding-left: 48px;">
                                            <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>
                                    </tr>
                                </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>
            </div>

    </div>
    <lightning:navigation aura:id="navService"/>
</aura:component>
1

just put the bottom section in div, and then based on selected value of status field you can toggle the div section like below

<lightning:layoutitem><lightning:inputField  fieldName="Status__c" aura:id="status" onchange="{!c.statusChange}" /></lightning:layoutitem>
<div aura:id="bottomsection" class="slds-hide"> 
 //bottom section content
</div>

controller.js

statusChange : function(c,e,h){    
if(e.getSource().get("v.value")=== 'Rejected'){
    $A.util.removeClass(c.find("bottomsection"), 'slds-hide');
}else{
 $A.util.addClass(c.find("bottomsection"), 'slds-hide');
}
}
  • This worked for me, I am not sure why the onChange I added did not work, it was not even going to the handler. Anyway, as always thanks much. I am going to have to make my self more familiar about the methods of event, component and helper. – apple123 May 30 at 19:38
  • all attributes are case sensitive in lighting component, i guess you used capital 'C' in onChange you should use onchange – sdandamud1 May 30 at 23:50

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.