I am currently working on a lightning component which takes the input from a user and let them submit or reset it. Upon submission, the data is fed to an external system and get the results of the records from the external system if exists or else it would let them create a record with these inputs which would save on the external system. The reset button is something that I am struggling to make it work. The reset button would let them clear the form so that they can input the new details.
I have the code here:
Rewards Component
<aura:component controller="SearchStaplesRewardsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="FirstName" type="String" default=""/>
<aura:attribute name="LastName" type="String" default=""/>
<aura:attribute name="Phone" type="String" default=""/>
<aura:attribute name="Email" type="String" default=""/>
<aura:attribute name="Zip" type="String" default=""/>
<aura:attribute name="Company" type="String" default=""/>
<aura:attribute name="CustomerList" type="List" />
<aura:attribute name="showSearchResults" type="boolean" default="false"/>
<aura:attribute name="rewardWrapperList" type="object[]"/>
<aura:attribute name="IsNoReward" type="boolean"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="options" type="list" default=
"[{'label': 'Business', 'value': 'option1'}, {'label': 'Personal', 'value': 'option2'}, {'label': 'Teacher', 'value': 'option3'}]"/>
<aura:attribute name="Optionvalue" type="String"/>
<div class="slds-p-around_medium" style="background:white;">
<aura:if isTrue="{!v.isSearching}">
<lightning:spinner />
</aura:if>
<aura:if isTrue="{!v.showSearchResults}">
<div class="slds-align_absolute-center">
<h2 class="slds-card__header-title">
<span><b>Search Result</b></span>
</h2>
</div>
<aura:if isTrue="{!v.IsNoReward}">
<div><p><b>No Match Found.Please add below button to post to Reward system</b></p></div>
<td data-label="Actions">
<lightning:button variant="brand" label="Enroll Rewards" onclick="{!c.postReward}" />
</td>
</aura:if>
<aura:if isTrue="{!!v.IsNoReward}">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Name">First Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="LastName">Last Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="RewardNumb">Reward#</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.rewardWrapperList}" var="rewardWrapper" indexVar="index">
<tr class="slds-hint-parent">
<td data-label="Name">
<div class="slds-truncate" title="Name">{!rewardWrapper.FirstName}</div>
</td>
<td data-label="LastName">
<div class="slds-truncate" title="LastName">{!rewardWrapper.LastName}</div>
</td>
<td data-label="Email">
<div class="slds-truncate" title="Email">{!rewardWrapper.Email}</div>
</td>
<td data-label="RewardNumb">
<div class="slds-truncate" title="RewardNumb">{!rewardWrapper.rewardsNum}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:if>
<aura:set attribute="else">
<div class="slds-grid slds-wrap">
<div class="slds-size_1-of-2 slds-p-horizontal_small"><img class="rewards-logo" src="{!$Resource.RewardsTemplate}" onclick="{!c.confirmReloadPage}"/>
<div class="slds-grid slds-wrap">
<span class="slds-col">
<img class="rewards-logo1" src="{!$Resource.RewardsNotes}" onclick="{!c.confirmReloadPage}"/>
</span>
</div>
</div>
<div class="slds-size_1-of-2 slds-p-horizontal_small">
<div class="slds-align_absolute-center">
<h2 class="slds-card__header-title">
<span><b>Input Information</b></span>
</h2>
</div>
<lightning:input required="true" minlength="1" aura:id="fName"
name="FName" label="First Name" value="{!v.FirstName}"
messageWhenValueMissing="Please Enter First Name"/>
<lightning:input required="true" minlength="1" aura:id="lName"
name="LName" label="Last Name" value="{!v.LastName}"
messageWhenValueMissing="Please Enter Last Name"/>
<lightning:input required="true" minlength="1" aura:id="phone"
type="tel" label="Phone" name="Phone"
value="{!v.Phone}"
messageWhenValueMissing="Please Enter Phone Number"
/>
<lightning:input required="true" minlength="1" aura:id="email"
type="email" name="email" label="Email" value="{!v.Email}"
messageWhenValueMissing="Please Enter Email Address"/>
<lightning:input required="true" minlength="1" aura:id="zip"
name="Zip" label="Zip Code" value="{!v.Zip}"
messageWhenValueMissing="Please Enter Zip Code"/>
<lightning:input required="false" minlength="1" aura:id="company"
name="Company" label="Company" value="{!v.Company}"/>
<lightning:radioGroup name="radioGroup"
aura:id="myGp"
label="Select Type of Account"
options="{! v.options }"
value="{! v.Optionvalue }"
type="button"
class="customRadioCls"/>
</div>
</div>
<footer class="slds-card__footer">
<div class="slds-float_None">
<lightning:button class="" variant="brand" label="Reset" title="Reset" onclick="{!c.reset1}" />
<lightning:button class="" variant="brand" label="Submit" title="Submit" onclick="{!c.SearchCustomers}" />
</div>
</footer>
</aura:set>
</aura:if>
</div>
</aura:component>`
Controller
({
doInit : function(component, event, helper)
{
/* var toastEvent = $A.get("e.force:showToast");
var getNewECHTokenAction = component.get("c.getNewECHToken");
getNewECHTokenAction.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
console.log('New Token Set');
} else {
toastEvent.setParams({
title: "Error",
message: "Token Error",
type: "error"
});
toastEvent.fire();
}
});
$A.enqueueAction(getNewECHTokenAction);
*/
},
SearchCustomers : function(component, event, helper)
{
var getNewECHTokenAction = component.get("c.getNewECHToken");
getNewECHTokenAction.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
console.log('New Token Set');
helper.getRewardDetails(component, event, helper);
} else {
toastEvent.setParams({
title: "Error",
message: "Token Error",
type: "error"
});
toastEvent.fire();
}
});
$A.enqueueAction(getNewECHTokenAction);
},
postReward : function(component, event, helper)
{
console.log('I m proceeding to post');
helper.postRewardDetails(component, event, helper);
}
reset1 : function(component, event, helper)
{
component.set("v.reset1", "");
}
})
Helper
({ getRewardDetails : function(component, event, helper)
{
var action = component.get("c.getRewardDetails");
action.setParams({
FirstName : component.get("v.FirstName").trim() ,
lastName : component.get("v.LastName").trim(),
Email : component.get("v.Email").trim() ,
Company : component.get("v.Company").trim() ,
phone : component.get("v.Phone").trim(),
zipCode : component.get("v.Zip").trim()
});
action.setCallback(this, function(response) {
var state = response.getState();
console.log('resp'+ response.getReturnValue());
if (state === "SUCCESS") {
console.log('$$$$$$'+ response.getReturnValue().length);
if(response.getReturnValue().length>0)
{
component.set("v.showSearchResults",true);
component.set('v.rewardWrapperList',response.getReturnValue());
}
else
{
component.set('v.IsNoReward',true);
component.set("v.showSearchResults",true);
}
}
});
$A.enqueueAction(action);
},
postRewardDetails : function(component, event, helper)
{
console.log('Post Reward Details' + component.get("v.FirstName"));
console.log('PostRewardMethod'+ component.get("c.postRewardDetails"));
var action = component.get("c.postRewardDetails");
action.setParams({
FirstName : component.get("v.FirstName").trim() ,
lastName : component.get("v.LastName").trim(),
Email : component.get("v.Email").trim() ,
Company : component.get("v.Company").trim() ,
phone : component.get("v.Phone").trim(),
zipCode : component.get("v.Zip").trim()
});
console.log('Post Reward LastDetails' + component.get("v.LastName"));
action.setCallback(this, function(response) {
var state = response.getState();
console.log('Test'+ response);
console.log('resp'+ response.getReturnValue());
if (state === "SUCCESS") {
console.log('$$$$$$'+ response.getReturnValue());
console.log('$$$$$$'+ response.getReturnValue().length);
if(response.getReturnValue().length>0)
{
component.set("v.showSearchResults",true);
component.set('v.IsNoReward',false);
component.set('v.rewardWrapperList',response.getReturnValue());
}
}
});
$A.enqueueAction(action);
}
})
Could you please help me, what exactly am i doing it wrong?
reset1function in your JS Controller? That's what the error complains. You will need to post your JS Controller code here as well.,before thereset1function in the JS. Are you sure this is your code causing problems?,). 2. You are trying to set an attribute in the function which is not declared in your component.