You need to sign in to do that
Don't have an account?
SF Learner Bee
create a new button to clear all fields except one using lightning component
Hi all,
I am new to development have started coding now and learning as per each requirement i am able to take.
I have a requirement where "Today on all 4 pages within the community we only have a submit button. The new ask is to introduce a "Clear" button that once selected it would clear out any of the fields populated on the page. THIS SHOULD NOT CLEAR THE CUSTOMER NUMBER FIELD "
There is a lightning component with 4 Pages and they all have a submit button. Now the business needs a Clear button to clear all the fields except for the Customer Number field.
Snippet of the code shown below on Aura Component
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" Controller = "EnterTrackingNumberHttpCallOut">
<aura:attribute name="response" type="Map"/>
<aura:attribute name="returnData" type="Object"/>
<aura:attribute name="ListOfAttributes" type="String[]"/>
<aura:attribute name = "trackingNumber" type = "integer"/>
<aura:attribute name = "CustomerNumber" type = "integer"/>
<aura:attribute name="showSpinner" type="Boolean" default="true"/>
<!--aura handler with waiting and donewaiting events-->
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--loading spinner start-->
<aura:if isTrue="{!v.showSpinner == true}">
<c:Utility_spinner />
</aura:if>
<!-- Loading spinner end-->
<aura:handler event="force:refreshView" action="{!c.isRefreshed}"/>
<div class="slds-box slds-align_absolute-center">
<!--Header Part-->
<div class="slds-media__body">
<p class="slds-page-header__title slds-truncate" title="Tracking Number Request">Tracking Number Request</p>
</div>
</div>
<br/>
<!--Header part close -->
<div style="height:50px; width:200px">
<lightning:input type="text" id="CustomerNumber" name = "CustomerNumber" label = "CustomerNumber" disabled="true" value = "{!v.CustomerNumber}"/>
</div>
<br></br>
<div style="height:50px; width:200px" >
<lightning:input type="text" id="trackingNumber" name = "trackingNumber" label ="Tracking Number(USPS, UPS, FedEx..)" required = "true" value = "{!v.trackingNumber}"/>
</div>
<div class="slds-form-element">
<lightning:button class="customButton" label = "Submit" onclick="{!c.getTrackNumber}" />
{New code to be implemented below I guess}
</div>
<br/>
<br/>
<h3 class="slds-section--title">RESULT : </h3><br />
<div style="width:400px;height:400px;">
{!v.response}
</div>
</aura:component>
The code abobe has the submit button created which is highlighted in bold. We have another 3 pages similar to this. If someone can show me on this page i can implement the same for the rest of the 3 pages.
Any help for this will be appreciated :)
New to Development still getting there :)
Thanks !!!
I am new to development have started coding now and learning as per each requirement i am able to take.
I have a requirement where "Today on all 4 pages within the community we only have a submit button. The new ask is to introduce a "Clear" button that once selected it would clear out any of the fields populated on the page. THIS SHOULD NOT CLEAR THE CUSTOMER NUMBER FIELD "
There is a lightning component with 4 Pages and they all have a submit button. Now the business needs a Clear button to clear all the fields except for the Customer Number field.
Snippet of the code shown below on Aura Component
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" Controller = "EnterTrackingNumberHttpCallOut">
<aura:attribute name="response" type="Map"/>
<aura:attribute name="returnData" type="Object"/>
<aura:attribute name="ListOfAttributes" type="String[]"/>
<aura:attribute name = "trackingNumber" type = "integer"/>
<aura:attribute name = "CustomerNumber" type = "integer"/>
<aura:attribute name="showSpinner" type="Boolean" default="true"/>
<!--aura handler with waiting and donewaiting events-->
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--loading spinner start-->
<aura:if isTrue="{!v.showSpinner == true}">
<c:Utility_spinner />
</aura:if>
<!-- Loading spinner end-->
<aura:handler event="force:refreshView" action="{!c.isRefreshed}"/>
<div class="slds-box slds-align_absolute-center">
<!--Header Part-->
<div class="slds-media__body">
<p class="slds-page-header__title slds-truncate" title="Tracking Number Request">Tracking Number Request</p>
</div>
</div>
<br/>
<!--Header part close -->
<div style="height:50px; width:200px">
<lightning:input type="text" id="CustomerNumber" name = "CustomerNumber" label = "CustomerNumber" disabled="true" value = "{!v.CustomerNumber}"/>
</div>
<br></br>
<div style="height:50px; width:200px" >
<lightning:input type="text" id="trackingNumber" name = "trackingNumber" label ="Tracking Number(USPS, UPS, FedEx..)" required = "true" value = "{!v.trackingNumber}"/>
</div>
<div class="slds-form-element">
<lightning:button class="customButton" label = "Submit" onclick="{!c.getTrackNumber}" />
{New code to be implemented below I guess}
</div>
<br/>
<br/>
<h3 class="slds-section--title">RESULT : </h3><br />
<div style="width:400px;height:400px;">
{!v.response}
</div>
</aura:component>
The code abobe has the submit button created which is highlighted in bold. We have another 3 pages similar to this. If someone can show me on this page i can implement the same for the rest of the 3 pages.
Any help for this will be appreciated :)
New to Development still getting there :)
Thanks !!!