You need to sign in to do that
Don't have an account?

Navigating the search results in new window after hitting enter in Aura component
Hi All,
I have created a search component in which i want that when customer search something and after that all results should be open in new window after clicking enter key. can anyone help me with this?
My components is given below:-
SearchComponent:-
<aura:component controller="CustomSearchController" implements="forceCommunity:searchInterface,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<aura:attribute name="searchText" type="String" default=""/>
<aura:attribute type="list" name="recordList" />
<aura:attribute name="Label" type="String"/>
<aura:attribute name="required" type="Boolean" default="false"/>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" role="none">
<lightning:input required="{!v.required}" aura:id="userinput" label="{!v.Label}" name="searchText" onchange="{! c.handleClick }" value="{!v.searchText}" class="leftspace"/>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default slds-m-top_small" iconName="utility:search" size="x-small" alternativeText="icon" />
</span>
</div>
<aura:if isTrue="{!and(v.recordList.length == 0 , v.searchText)}">
No result found.
<aura:set attribute="else">
<c:customSearchResultsList recordList="{!v.recordList}"/>
</aura:set>
</aura:if>
</aura:component>
JSController:-
({
handleClick : function(component, event, helper) {
var searchText = component.get('v.searchText');
var action = component.get('c.searchRecords');
action.setParams({searchText: searchText});
action.setCallback(this, function(response) {
var state = response.getState();
console.log('state',state);
if (state === 'SUCCESS') {
var recordList = response.getReturnValue();
component.set('v.recordList',recordList);
console.log('recordList',recordList);
}
});
$A.enqueueAction(action);
}
})
CustomSearchresultList:-
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute type="list" name="recordList" />
<aura:if isTrue="{!v.recordList.length > 0}" >
<h1>Search Results</h1>
<lightning:accordion >
<aura:iteration items="{!v.recordList}" var="id">
<!--lightning:accordionSection name="{!id.objName}" label="{!id.objName}"-->
<div class="slds-scrollable" style="height:10rem;">
<aura:iteration items="{!id.soList}" var="sOb">
<c:customSearchResultItem recordId="{!sOb.Id}" obName="{!id.objName}" title="{!sOb.Title}" fieldName="{!id.fieldName}"/>
</aura:iteration>
</div>
<!--/lightning:accordionSection-->
</aura:iteration>
</lightning:accordion>
</aura:if>
</aura:component>
CustomSerchResultItem.cmp
<aura:component implements="force:hasRecordId" access="global">
<aura:attribute name="obName" type="String" />
<aura:attribute name="fieldName" type="String" />
<aura:attribute name="record" type="Object"/>
<aura:attribute name="simpleRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:attribute name="title" type="String"/>
<lightning:navigation aura:id="navService"/>
<!-- Display a header with details about the record -->
<!--aura:if isTrue="{!v.recordDataLoaded}"-->
<div class="slds-page-header" role="banner">
<tr>
<td>
<p class="slds-text-heading--label"><a onclick="{!c.redirectDetail}">
<lightning:formattedText linkify="true" value="{!v.title}" />
</a></p>
</td>
</tr>
</div>
<!--/aura:if--> </aura:component>
CustomSearchResultItem.Js
({
doInit : function(component, event, helper) {
var sobject = component.get('v.record');
var fieldName = component.get('v.fieldName');
var formatText = component.find('fielddata');
console.log('----sobject-----------');
console.log('sobject:',sobject);
formatText.set("v.value",sobject[fieldName]);
},
/*recordUpdated : function(component, event, helper) {
component.set('v.recordDataLoaded',true);
},*/
redirectDetail : function(component, event, helper) {
//Redirect to detail page on success
console.log(component.get("v.recordId"),component.get("v.obName"),component.find('navService'));
var navService = component.find('navService');
var pageReference = {
type: 'standard__recordPage',
attributes: {
"recordId": component.get("v.recordId"),
"objectApiName": component.get("v.obName"),
"actionName": "view"
}
}
navService.generateUrl(pageReference)
.then($A.getCallback(function(url) {
console.log('success: ' + url); //you can also set the url to an aura attribute if you wish
window.open(url,'_blank'); //this opens your page in a seperate tab here
}),
$A.getCallback(function(error) {
console.log('error: ' + error);
}));
//navService.navigate(pageReference);
}
})
How can i navigate all the coming results in new tab. Can anyone help me with this?
I have created a search component in which i want that when customer search something and after that all results should be open in new window after clicking enter key. can anyone help me with this?
My components is given below:-
SearchComponent:-
<aura:component controller="CustomSearchController" implements="forceCommunity:searchInterface,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<aura:attribute name="searchText" type="String" default=""/>
<aura:attribute type="list" name="recordList" />
<aura:attribute name="Label" type="String"/>
<aura:attribute name="required" type="Boolean" default="false"/>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" role="none">
<lightning:input required="{!v.required}" aura:id="userinput" label="{!v.Label}" name="searchText" onchange="{! c.handleClick }" value="{!v.searchText}" class="leftspace"/>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
<lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default slds-m-top_small" iconName="utility:search" size="x-small" alternativeText="icon" />
</span>
</div>
<aura:if isTrue="{!and(v.recordList.length == 0 , v.searchText)}">
No result found.
<aura:set attribute="else">
<c:customSearchResultsList recordList="{!v.recordList}"/>
</aura:set>
</aura:if>
</aura:component>
JSController:-
({
handleClick : function(component, event, helper) {
var searchText = component.get('v.searchText');
var action = component.get('c.searchRecords');
action.setParams({searchText: searchText});
action.setCallback(this, function(response) {
var state = response.getState();
console.log('state',state);
if (state === 'SUCCESS') {
var recordList = response.getReturnValue();
component.set('v.recordList',recordList);
console.log('recordList',recordList);
}
});
$A.enqueueAction(action);
}
})
CustomSearchresultList:-
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute type="list" name="recordList" />
<aura:if isTrue="{!v.recordList.length > 0}" >
<h1>Search Results</h1>
<lightning:accordion >
<aura:iteration items="{!v.recordList}" var="id">
<!--lightning:accordionSection name="{!id.objName}" label="{!id.objName}"-->
<div class="slds-scrollable" style="height:10rem;">
<aura:iteration items="{!id.soList}" var="sOb">
<c:customSearchResultItem recordId="{!sOb.Id}" obName="{!id.objName}" title="{!sOb.Title}" fieldName="{!id.fieldName}"/>
</aura:iteration>
</div>
<!--/lightning:accordionSection-->
</aura:iteration>
</lightning:accordion>
</aura:if>
</aura:component>
CustomSerchResultItem.cmp
<aura:component implements="force:hasRecordId" access="global">
<aura:attribute name="obName" type="String" />
<aura:attribute name="fieldName" type="String" />
<aura:attribute name="record" type="Object"/>
<aura:attribute name="simpleRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:attribute name="title" type="String"/>
<lightning:navigation aura:id="navService"/>
<!-- Display a header with details about the record -->
<!--aura:if isTrue="{!v.recordDataLoaded}"-->
<div class="slds-page-header" role="banner">
<tr>
<td>
<p class="slds-text-heading--label"><a onclick="{!c.redirectDetail}">
<lightning:formattedText linkify="true" value="{!v.title}" />
</a></p>
</td>
</tr>
</div>
<!--/aura:if--> </aura:component>
CustomSearchResultItem.Js
({
doInit : function(component, event, helper) {
var sobject = component.get('v.record');
var fieldName = component.get('v.fieldName');
var formatText = component.find('fielddata');
console.log('----sobject-----------');
console.log('sobject:',sobject);
formatText.set("v.value",sobject[fieldName]);
},
/*recordUpdated : function(component, event, helper) {
component.set('v.recordDataLoaded',true);
},*/
redirectDetail : function(component, event, helper) {
//Redirect to detail page on success
console.log(component.get("v.recordId"),component.get("v.obName"),component.find('navService'));
var navService = component.find('navService');
var pageReference = {
type: 'standard__recordPage',
attributes: {
"recordId": component.get("v.recordId"),
"objectApiName": component.get("v.obName"),
"actionName": "view"
}
}
navService.generateUrl(pageReference)
.then($A.getCallback(function(url) {
console.log('success: ' + url); //you can also set the url to an aura attribute if you wish
window.open(url,'_blank'); //this opens your page in a seperate tab here
}),
$A.getCallback(function(error) {
console.log('error: ' + error);
}));
//navService.navigate(pageReference);
}
})
How can i navigate all the coming results in new tab. Can anyone help me with this?
Can you please refer to the below to open lightning component in new window
https://salesforce.stackexchange.com/questions/272373/how-to-open-lightning-component-in-new-window
Hope this is helpful!!
Regards,
Ranjan