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>