You need to sign in to do that
Don't have an account?
Aruna
Creating Sear functionality using lighting components but getting error
VF page
<apex:page standardController="Contact">
<apex:includeLightning />
<div id="Con" />
<script>
$Lightning.use("c:ConSearchApp", function() {
$Lightning.createComponent(
"c:Comp_SearchContact",
{},
"Con",
function(cmp) {
console.log("Component is created!");
console.log(cmp);
});
});
</script>
</apex:page>
Application
<aura:application extends="ltng:outApp" >
<c:Comp_SearchContact />
</aura:application>
Apex class
public with sharing class searchAccountController {
@AuraEnabled
public static List < account > fetchAccount(String CustomerMasterAccountName,
String CustomerNumber,
String Name,
String Address,
String City,
String State,
String ZipCode) {
//String searchKey = searchKeyWord + '%';
List < Account > returnList = new List < Account > ();
/*List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account
where Name LIKE: searchKey];*/
for (Account acc: [select id, Name, AccountNumber,Type, Industry, Phone, Fax,BillingState,BillingCity from account
where Name=:CustomerMasterAccountName or
AccountNumber=:CustomerNumber or
BillingState=:State or
BillingCity=:City]) {
returnList.add(acc);
}
return returnList;
}
}
Component
<aura:component controller="searchAccountController">
<!-- CREATE ATTRIBUTE/VARIABLE-->
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="CustomerMasterAccountName" type="String" description="use for store user search input"/>
<aura:attribute name="CustomerNumber" type="String" description="use for store user search input"/>
<aura:attribute name="Name" type="String" description="use for store user search input"/>
<aura:attribute name="Address" type="String" description="use for store user search input"/>
<aura:attribute name="City" type="String" description="use for store user search input"/>
<aura:attribute name="State" type="String" description="use for store user search input"/>
<aura:attribute name="ZipCode" type="String" description="use for store user search input"/>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
<!-- SHOW LOADING SPINNER-->
<lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
<div class="slds-m-around_medium">
<!-- SEARCH INPUT AND SEARCH BUTTON-->
<lightning:layout>
<lightning:layoutItem size="3" padding="around-small">
<lightning:input value="{!v.CustomerMasterAccountName}"
required="true"
placeholder="search CustomerMasterAccountName.."
aura:id="CustomerMasterAccountName"
label="Customer Master Account Name"/>
<lightning:input value="{!v.CustomerNumber}"
required="true"
placeholder="search CustomerNumber.."
aura:id="CustomerNumber"
label="Customer Number"/>
<lightning:input value="{!v.Name}"
required="true"
placeholder="search Name.."
aura:id="Name"
label="Name"/>
<lightning:input value="{!v.Address}"
required="true"
placeholder="search Address.."
aura:id="Address"
label="Address"/>
<lightning:input value="{!v.City}"
required="true"
placeholder="search City.."
aura:id="City"
label="City"/>
<lightning:input value="{!v.State}"
required="true"
placeholder="search State.."
aura:id="State"
label="State"/>
<lightning:input value="{!v.ZipCode}"
required="true"
placeholder="search ZipCode.."
aura:id="ZipCode"
label="ZipCode"/>
</lightning:layoutItem>
<lightning:layoutItem size="2" padding="around-small">
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
</lightning:layoutItem>
</lightning:layout>
<!-- TOTAL RECORDS BADGES-->
<div class="slds-m-around_x-small">
<lightning:badge label="{!v.TotalNumberOfRecord}" />
</div>
<!-- ERROR MESSAGE IF NOT RECORDS FOUND-->
<aura:if isTrue="{!v.Message}">
<div class="slds-notify_container slds-is-relative">
<div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">No Records Found...</h2>
</div>
</div>
</div>
</aura:if>
<!-- TABLE CONTENT-->
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="S.no">S.no</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Type">Type</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Industry">Industry</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Fax">Fax</div>
</th>
</tr>
</thead>
<tbody>
<!--### display all records of searchResult attribute by aura:iteration ###-->
<aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
<tr>
<td>
<div class="slds-truncate">{!count + 1}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Name}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Type}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Industry}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Phone}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Fax}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
Conteroller
({
Search: function(component, event, helper) {
var CustomerMasterAccountName = component.find('CustomerMasterAccountName');
var CustomerNumber = component.find('CustomerNumber');
var Name = component.find('Name');
var Address = component.find('Address');
var City = component.find('City');
var State = component.find('State');
var ZipCode = component.find('ZipCode');
var isValueMissingCMAN = searchField.get('v.CustomerMasterAccountName').valueMissing;
var isValueMissingCMN = searchField.get('v.CustomerNumber').valueMissing;
var isValueMissingName = searchField.get('v.Name').valueMissing;
var isValueMissingAddress = searchField.get('v.Address').valueMissing;
var isValueMissingCity = searchField.get('v.City').valueMissing;
var isValueMissingState = searchField.get('v.State').valueMissing;
var isValueMissingZipCode = searchField.get('v.ZipCode').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissingCMAN) {
CustomerMasterAccountName.showHelpMessageIfInvalid();
CustomerMasterAccountName.focus();
}
else if(isValueMissingCMN){
CustomerNumber.showHelpMessageIfInvalid();
CustomerNumber.focus();
}
else if(isValueMissingName){
Name.showHelpMessageIfInvalid();
Name.focus();
}
else if(isValueMissingAddress){
Address.showHelpMessageIfInvalid();
Address.focus();
}
else if(isValueMissingCity){
City.showHelpMessageIfInvalid();
City.focus();
}
else if(isValueMissingState){
State.showHelpMessageIfInvalid();
State.focus();
}
else if(isValueMissingZipCode){
ZipCode.showHelpMessageIfInvalid();
ZipCode.focus();
}
else{
// else call helper function
helper.SearchHelper(component, event);
}
},
})
Helper class
({
SearchHelper: function(component, event) {
// show spinner message
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchAccount");
action.setParams({
'CustomerMasterAccountName': component.get("v.CustomerMasterAccountName"),
'CustomerNumber': component.get("v.CustomerNumber"),
'Name': component.get("v.Name"),
'Address': component.get("v.Address"),
'City': component.get("v.City"),
'State': component.get("v.State"),
'ZipCode': component.get("v.ZipCode")
});
action.setCallback(this, function(response) {
// hide spinner when response coming from server
component.find("Id_spinner").set("v.class" , 'slds-hide');
var state = response.getState();
if (state === "SUCCESS") {
var storeResponse = response.getReturnValue();
// if storeResponse size is 0 ,display no record found message on screen.
if (storeResponse.length == 0) {
component.set("v.Message", true);
} else {
component.set("v.Message", false);
}
// set numberOfRecord attribute value with length of return value from server
component.set("v.TotalNumberOfRecord", storeResponse.length);
// set searchResult list with return value from server.
component.set("v.searchResult", storeResponse);
}else if (state === "INCOMPLETE") {
alert('Response is Incompleted');
}else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " +
errors[0].message);
}
} else {
alert("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})
Getting following Error : Can any one help what mistake In above code.
This page has an error. You might just need to refresh it. Action failed: c:Comp_SearchContact$controller$Search [searchField is not defined] Failing descriptor: {c:Comp_SearchContact$controller$Search}
<apex:page standardController="Contact">
<apex:includeLightning />
<div id="Con" />
<script>
$Lightning.use("c:ConSearchApp", function() {
$Lightning.createComponent(
"c:Comp_SearchContact",
{},
"Con",
function(cmp) {
console.log("Component is created!");
console.log(cmp);
});
});
</script>
</apex:page>
Application
<aura:application extends="ltng:outApp" >
<c:Comp_SearchContact />
</aura:application>
Apex class
public with sharing class searchAccountController {
@AuraEnabled
public static List < account > fetchAccount(String CustomerMasterAccountName,
String CustomerNumber,
String Name,
String Address,
String City,
String State,
String ZipCode) {
//String searchKey = searchKeyWord + '%';
List < Account > returnList = new List < Account > ();
/*List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account
where Name LIKE: searchKey];*/
for (Account acc: [select id, Name, AccountNumber,Type, Industry, Phone, Fax,BillingState,BillingCity from account
where Name=:CustomerMasterAccountName or
AccountNumber=:CustomerNumber or
BillingState=:State or
BillingCity=:City]) {
returnList.add(acc);
}
return returnList;
}
}
Component
<aura:component controller="searchAccountController">
<!-- CREATE ATTRIBUTE/VARIABLE-->
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="CustomerMasterAccountName" type="String" description="use for store user search input"/>
<aura:attribute name="CustomerNumber" type="String" description="use for store user search input"/>
<aura:attribute name="Name" type="String" description="use for store user search input"/>
<aura:attribute name="Address" type="String" description="use for store user search input"/>
<aura:attribute name="City" type="String" description="use for store user search input"/>
<aura:attribute name="State" type="String" description="use for store user search input"/>
<aura:attribute name="ZipCode" type="String" description="use for store user search input"/>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
<!-- SHOW LOADING SPINNER-->
<lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
<div class="slds-m-around_medium">
<!-- SEARCH INPUT AND SEARCH BUTTON-->
<lightning:layout>
<lightning:layoutItem size="3" padding="around-small">
<lightning:input value="{!v.CustomerMasterAccountName}"
required="true"
placeholder="search CustomerMasterAccountName.."
aura:id="CustomerMasterAccountName"
label="Customer Master Account Name"/>
<lightning:input value="{!v.CustomerNumber}"
required="true"
placeholder="search CustomerNumber.."
aura:id="CustomerNumber"
label="Customer Number"/>
<lightning:input value="{!v.Name}"
required="true"
placeholder="search Name.."
aura:id="Name"
label="Name"/>
<lightning:input value="{!v.Address}"
required="true"
placeholder="search Address.."
aura:id="Address"
label="Address"/>
<lightning:input value="{!v.City}"
required="true"
placeholder="search City.."
aura:id="City"
label="City"/>
<lightning:input value="{!v.State}"
required="true"
placeholder="search State.."
aura:id="State"
label="State"/>
<lightning:input value="{!v.ZipCode}"
required="true"
placeholder="search ZipCode.."
aura:id="ZipCode"
label="ZipCode"/>
</lightning:layoutItem>
<lightning:layoutItem size="2" padding="around-small">
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
</lightning:layoutItem>
</lightning:layout>
<!-- TOTAL RECORDS BADGES-->
<div class="slds-m-around_x-small">
<lightning:badge label="{!v.TotalNumberOfRecord}" />
</div>
<!-- ERROR MESSAGE IF NOT RECORDS FOUND-->
<aura:if isTrue="{!v.Message}">
<div class="slds-notify_container slds-is-relative">
<div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">No Records Found...</h2>
</div>
</div>
</div>
</aura:if>
<!-- TABLE CONTENT-->
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="S.no">S.no</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Type">Type</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Industry">Industry</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Fax">Fax</div>
</th>
</tr>
</thead>
<tbody>
<!--### display all records of searchResult attribute by aura:iteration ###-->
<aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
<tr>
<td>
<div class="slds-truncate">{!count + 1}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Name}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Type}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Industry}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Phone}</div>
</td>
<td>
<div class="slds-truncate">{!acc.Fax}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
Conteroller
({
Search: function(component, event, helper) {
var CustomerMasterAccountName = component.find('CustomerMasterAccountName');
var CustomerNumber = component.find('CustomerNumber');
var Name = component.find('Name');
var Address = component.find('Address');
var City = component.find('City');
var State = component.find('State');
var ZipCode = component.find('ZipCode');
var isValueMissingCMAN = searchField.get('v.CustomerMasterAccountName').valueMissing;
var isValueMissingCMN = searchField.get('v.CustomerNumber').valueMissing;
var isValueMissingName = searchField.get('v.Name').valueMissing;
var isValueMissingAddress = searchField.get('v.Address').valueMissing;
var isValueMissingCity = searchField.get('v.City').valueMissing;
var isValueMissingState = searchField.get('v.State').valueMissing;
var isValueMissingZipCode = searchField.get('v.ZipCode').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissingCMAN) {
CustomerMasterAccountName.showHelpMessageIfInvalid();
CustomerMasterAccountName.focus();
}
else if(isValueMissingCMN){
CustomerNumber.showHelpMessageIfInvalid();
CustomerNumber.focus();
}
else if(isValueMissingName){
Name.showHelpMessageIfInvalid();
Name.focus();
}
else if(isValueMissingAddress){
Address.showHelpMessageIfInvalid();
Address.focus();
}
else if(isValueMissingCity){
City.showHelpMessageIfInvalid();
City.focus();
}
else if(isValueMissingState){
State.showHelpMessageIfInvalid();
State.focus();
}
else if(isValueMissingZipCode){
ZipCode.showHelpMessageIfInvalid();
ZipCode.focus();
}
else{
// else call helper function
helper.SearchHelper(component, event);
}
},
})
Helper class
({
SearchHelper: function(component, event) {
// show spinner message
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchAccount");
action.setParams({
'CustomerMasterAccountName': component.get("v.CustomerMasterAccountName"),
'CustomerNumber': component.get("v.CustomerNumber"),
'Name': component.get("v.Name"),
'Address': component.get("v.Address"),
'City': component.get("v.City"),
'State': component.get("v.State"),
'ZipCode': component.get("v.ZipCode")
});
action.setCallback(this, function(response) {
// hide spinner when response coming from server
component.find("Id_spinner").set("v.class" , 'slds-hide');
var state = response.getState();
if (state === "SUCCESS") {
var storeResponse = response.getReturnValue();
// if storeResponse size is 0 ,display no record found message on screen.
if (storeResponse.length == 0) {
component.set("v.Message", true);
} else {
component.set("v.Message", false);
}
// set numberOfRecord attribute value with length of return value from server
component.set("v.TotalNumberOfRecord", storeResponse.length);
// set searchResult list with return value from server.
component.set("v.searchResult", storeResponse);
}else if (state === "INCOMPLETE") {
alert('Response is Incompleted');
}else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
alert("Error message: " +
errors[0].message);
}
} else {
alert("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})
Getting following Error : Can any one help what mistake In above code.
This page has an error. You might just need to refresh it. Action failed: c:Comp_SearchContact$controller$Search [searchField is not defined] Failing descriptor: {c:Comp_SearchContact$controller$Search}
Let me know if it helps