You need to sign in to do that
Don't have an account?
SK SGS
Custom Search Component in Lightning
Hi All,
i created the one lighnting component to display the opportunity records in search componet.but it not working properly.unable to arrange the fileds in component using slds. i am new to LEX. Can any one help to todo this.the alignments of fields are Account Name Opportunity Name Stage in the same horizantal line with text boxes also display the search results/records in another drop down section in table format like
Select OppName AccName BilligngCountry CloseDate Stage like this way.i will add my code for your reference
Apex Controller
public with sharing class searchAccountController {
@AuraEnabled
public static List <Opportunity> fetchOpportunities(String searchKeyWord) {
String searchKey = searchKeyWord + '%';
List < Opportunity > returnList = new List < Opportunity > ();
List < Opportunity > lstOfOpp = [select id, Name, Account.Name,Account.BillingCountry, CloseDate,StageName from Opportunity
where Name LIKE: searchKey LIMIT 1000];
for (Opportunity opp: lstOfOpp) {
returnList.add(opp);
}
return returnList;
}
}
component .cmp
<!--<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global">
<aura:attribute name="objOpp" type="Opportunity" />
<aura:attribute name="objAcc" type="Account" />
<div class="slds-form slds-form_horizontal">
<div class="slds-brand-band slds-brand-band_medium">
<div class="slds-align_absolute-center slds-m-top_medium">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Text Input</label>
<div class="slds-form-element__control">
<input type="text" id="input-id-01" class="slds-input" />
</div>
</div>
</div>
</div>
</div>
</aura:component>-->
<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global" controller="searchAccountController">
<aura:attribute name="objOpp" type="Opportunity" />
<aura:attribute name="objAcc" type="Account" />
<aura:attribute name="searchResult" type="List" />
<aura:attribute name="searchKeyword" type="String"/>
<aura:attribute name="Message" type="boolean" default="false"/>
<div class="slds-m-around_medium">
<!-- SEARCH INPUT AND SEARCH BUTTON-->
<lightning:layout>
<div class="slds-align_absolute-center slds-m-top_medium">
<lightning:button variant="neutral" label="Search" onclick="{!c.Search}" />
</div>
<div class="slds-grid slds-wrap slds-grid_pull-padded slds-m-top_large">
<lightning:layoutItem size="3">
<lightning:input value="{!v.searchKeyword}" label="Account Name" padding="around-medium"/>
<lightning:input value="{!v.searchKeyword}" label="Opportunity Name" padding="around-medium"/>
<lightning:input value="{!v.searchKeyword}" label="Stage" padding="around-medium"/>
</lightning:layoutItem>
<!--<lightning:layoutItem size="2" padding="around-small">
<lightning:button onclick="{!c.Search}" variant="brand" label="Search" iconName="utility:search"/>
</lightning:layoutItem>-->
</div>
</lightning:layout>
<!-- 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 class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<!--<div class="slds-checkbox"> -->
<th class="slds-checkbox" scope="col">
<div class="slds-truncate" title="Select">Select</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Billing Country">Billing Country</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</aura:component>
controller.js
({
Search: function(component, event, helper) {
var searchField = component.find('searchField');
var isValueMissing = searchField.get('v.validity').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissing) {
searchField.showHelpMessageIfInvalid();
searchField.focus();
}else{
// else call helper function
helper.SearchHelper(component, event);
}
},
})
helper.js
({
SearchHelper: function(component, event) {
// show spinner message
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchOpportunities");
action.setParams({
'searchKeyWord': component.get("v.searchKeyword")
});
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);
},
})
thanks in advance
i created the one lighnting component to display the opportunity records in search componet.but it not working properly.unable to arrange the fileds in component using slds. i am new to LEX. Can any one help to todo this.the alignments of fields are Account Name Opportunity Name Stage in the same horizantal line with text boxes also display the search results/records in another drop down section in table format like
Select OppName AccName BilligngCountry CloseDate Stage like this way.i will add my code for your reference
Apex Controller
public with sharing class searchAccountController {
@AuraEnabled
public static List <Opportunity> fetchOpportunities(String searchKeyWord) {
String searchKey = searchKeyWord + '%';
List < Opportunity > returnList = new List < Opportunity > ();
List < Opportunity > lstOfOpp = [select id, Name, Account.Name,Account.BillingCountry, CloseDate,StageName from Opportunity
where Name LIKE: searchKey LIMIT 1000];
for (Opportunity opp: lstOfOpp) {
returnList.add(opp);
}
return returnList;
}
}
component .cmp
<!--<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global">
<aura:attribute name="objOpp" type="Opportunity" />
<aura:attribute name="objAcc" type="Account" />
<div class="slds-form slds-form_horizontal">
<div class="slds-brand-band slds-brand-band_medium">
<div class="slds-align_absolute-center slds-m-top_medium">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Text Input</label>
<div class="slds-form-element__control">
<input type="text" id="input-id-01" class="slds-input" />
</div>
</div>
</div>
</div>
</div>
</aura:component>-->
<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global" controller="searchAccountController">
<aura:attribute name="objOpp" type="Opportunity" />
<aura:attribute name="objAcc" type="Account" />
<aura:attribute name="searchResult" type="List" />
<aura:attribute name="searchKeyword" type="String"/>
<aura:attribute name="Message" type="boolean" default="false"/>
<div class="slds-m-around_medium">
<!-- SEARCH INPUT AND SEARCH BUTTON-->
<lightning:layout>
<div class="slds-align_absolute-center slds-m-top_medium">
<lightning:button variant="neutral" label="Search" onclick="{!c.Search}" />
</div>
<div class="slds-grid slds-wrap slds-grid_pull-padded slds-m-top_large">
<lightning:layoutItem size="3">
<lightning:input value="{!v.searchKeyword}" label="Account Name" padding="around-medium"/>
<lightning:input value="{!v.searchKeyword}" label="Opportunity Name" padding="around-medium"/>
<lightning:input value="{!v.searchKeyword}" label="Stage" padding="around-medium"/>
</lightning:layoutItem>
<!--<lightning:layoutItem size="2" padding="around-small">
<lightning:button onclick="{!c.Search}" variant="brand" label="Search" iconName="utility:search"/>
</lightning:layoutItem>-->
</div>
</lightning:layout>
<!-- 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 class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<!--<div class="slds-checkbox"> -->
<th class="slds-checkbox" scope="col">
<div class="slds-truncate" title="Select">Select</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Billing Country">Billing Country</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th class="slds-text-title_caps" scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</aura:component>
controller.js
({
Search: function(component, event, helper) {
var searchField = component.find('searchField');
var isValueMissing = searchField.get('v.validity').valueMissing;
// if value is missing show error message and focus on field
if(isValueMissing) {
searchField.showHelpMessageIfInvalid();
searchField.focus();
}else{
// else call helper function
helper.SearchHelper(component, event);
}
},
})
helper.js
({
SearchHelper: function(component, event) {
// show spinner message
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchOpportunities");
action.setParams({
'searchKeyWord': component.get("v.searchKeyword")
});
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);
},
})
thanks in advance