You need to sign in to do that
Don't have an account?
Without giving inputvalue if we click on search Button . Inputtext field moving UP. when showing the alert. How can i adjsust, Please see screen shot.
<aura:component controller="searchAccountController">
<ltng:require styles="{! $Resource.SLDS24+ '/assets/styles/salesforce-lightning-design-system.css'}"/>
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" description="use for input" type="string" ></aura:attribute>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<div class="slds-m-around--large">
<form class="slds-form--inline">
<div class="slds-form-element">
<label class="slds-form-element__label" for="Search">Account Search</label>
<div class="slds-form-element__control" >
<ui:inputtext aura:id="searchId" value="{!v.searchKeyword}" placeholder="Type Account Name" required="true" class="slds-input"></ui:inputtext>
</div>
</div>
<div class="slds-form-element">
<button type="Button" onclick="{!c.Search}" class="slds-button slds-button--brand">Search</button>
</div>
</form>
<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=" Name"> ID</div>
</th>
<th scope="col">
<div class="slds-truncate" title=" Name"> 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>
<aura:if isTrue="{!v.Message}">
<div class="slds-text-color--error"> No Result Found...</div>
</aura:if>
<aura:iteration items="{!v.searchResult}" var="acc">
<tr>
<td>
<div class="slds-truncate">{!acc.Id}</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>
give space between style class name and .THIS keywork
try below code then it's looks like
also uncomment
// $A.util.removeClass(searchKeyId,'errorClassRemove');
in your js controller code
let me infrom if it helps you
thanks
http://sfdcmonkey.com
All Answers
this is the Default Error Handling so we can not controller this position
but if you don't want to use this you can also make border red of the Search field when field is blank
in the style.css part use below css and in your helper class
({
Search : function(component, event, helper) {
var searchKeyId=component.find("searchId");
var searchKey=component.get('v.searchKeyword');
// alert('==searchKeyword'+searchKey);
if(searchKey == '' || searchKey == null){
// alert('enter');
// searchKeyId.set("v.errors",[{message: "Enter search Keyword" }]);
$A.util.addClass(searchKeyId, 'errorClassAdd');
$A.util.removeClass(searchKeyId, 'errorClassRemove');
}
else{
// searchKeyId.set("v.errors",null);
$A.util.addClass(searchKeyId, 'errorClassRemove');
$A.util.removeClass(searchKeyId, 'errorClassAdd');
helper.searchHelper(component,event);
}
},
})
output-:
thanks
let me inform if it helps you and mark it best answer if my answer helps you so it make proper solution for others
http://sfdcmonkey.com
LGT Component :-
<aura:component controller="searchAccountController">
<ltng:require styles="{! $Resource.SLDS24+ '/assets/styles/salesforce-lightning-design-system.css'}"/>
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" description="use for input" type="string" ></aura:attribute>
<aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
<div class="slds-m-around--large">
<form class="slds-form--inline">
<div class="slds-form-element">
<label class="slds-form-element__label" for="Search">Account Search</label>
<div class="slds-form-element__control" >
<ui:inputtext aura:id="searchId" value="{!v.searchKeyword}" placeholder="Type Account Name" class="slds-input"></ui:inputtext>
</div>
</div>
<div class="slds-form-element">
<button type="Button" onclick="{!c.SearchJS}" class="slds-button slds-button--brand">Search</button>
</div>
</form>
<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=" Name"> ID</div>
</th>
<th scope="col">
<div class="slds-truncate" title=" Name"> 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>
<aura:if isTrue="{!v.Message}">
<div class="slds-text-color--error"> No Result Found...</div>
</aura:if>
<aura:iteration items="{!v.searchResult}" var="acc">
<tr>
<td>
<div class="slds-truncate">{!acc.Id}</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>
JS:-
({
SearchJS : function(component, event, helper) {
var searchKeyId=component.find("searchId");
var searchKey=component.get('v.searchKeyword');
alert('==searchKeyword'+searchKey);
if(searchKey == '' || searchKey == null)
{
alert('--enter');
// searchKeyId.set("v.errors",[{message: "Enter search Keyword" }]);
$A.util.addClass(searchKeyId,'errorClassAdd');
//$A.util.removeClass(searchKeyId,'errorClassRemove');
}
else{
$A.util.addClass(searchKeyId, 'errorClassRemove');
$A.util.removeClass(searchKeyId, 'errorClassAdd');
helper.searchHelper(component,event);
}
},
})
Css :-
.THIS.errorClassAdd {
border:4px solid red;
background-color:yellow;
}
.THIS.errorClassRemove {
border:1px solid #d8dde6;;
}
Helper :-
({
searchHelper: function(component, event) {
var action = component.get("c.searchmethod");
alert('====key'+component.get("v.searchKeyword"));
action.setParams({
'searchKeyword': component.get("v.searchKeyword")
});
action.setCallback(this, function(response) {
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.numberOfRecord", storeResponse.length);
// set searchResult list with return value from server.
component.set("v.searchResult", storeResponse);
alert('==='+component.set("v.searchResult", storeResponse));
}
});
$A.enqueueAction(action);
},
})
Apex:-
public class searchAccountController {
@AuraEnabled
public static list<account> searchmethod(string searchKeyword)
{
system.debug('--enter --'+searchKeyword);
String searchKey=searchKeyword + '%';
system.debug('--enter =--'+searchKey);
list<account> returnList =new list<account>();
list<account> AccList=[select id,name,type,industry,phone,fax from account where name like: searchKey];
for(account acc:AccList)
{
returnList.add(acc);
}
return returnList;
}
public class wrapperaccount {
@AuraEnabled
public account acc{get;set;}
@AuraEnabled
public boolean isselected{get;set;}
}
}
give space between style class name and .THIS keywork
try below code then it's looks like
also uncomment
// $A.util.removeClass(searchKeyId,'errorClassRemove');
in your js controller code
let me infrom if it helps you
thanks
http://sfdcmonkey.com