You need to sign in to do that
Don't have an account?
Jonathan Wolff 7
Make Account Name clickable in search component for accounts
Hello,
I made a searchbar component to show accounts which include the search word. Now I would like to make the account name in the component clickable how it is in the standart. To make it more understandable I show you the outputs I have in both searchbars. So in this example I want to make the coluumn name ("katholische Sozialstation..") clickable
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="GlobalSearchController">
<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String"/>
<aura:attribute name="accountList" type="List" default="Account[]"/>
<aura:attribute name="accountColumns" type="List"/>
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
Account
<lightning:datatable keyField="id"
data="{!v.accountList}"
columns="{!v.accountColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</aura:component>
JS:
({
init: function (component, event, helper){
component.set('v.accountColumns', [
{label: 'Name', fieldName: 'Name', type: 'text'},
{label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
{label: 'Website', fieldName: 'Website', type: 'url', typeAttributes: { target: '_self'}}
]);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
({
init: function (component, event, helper){
component.set('v.accountColumns', [
{label: 'Name', fieldName: 'Name', type: 'text'},
{label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
{label: 'Website', fieldName: 'Website', type: 'url', typeAttributes: { target: '_self'}}
]);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
Helper:
({
getSearchResultsFromApex : function(component, event, helper){
var action = component.get("c.getSearchResult");
action.setParams({ searchKey : component.get("v.searchKey") });
// Create a callback that is executed after
// the server-side action returns
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
// SOSL will always return the list in the order they were queried
component.set("v.accountList",result[0]);
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
APEX:
public class GlobalSearchController {
@AuraEnabled(cacheable=true)
public static List<List<sObject>> getSearchResult(String searchKey){
List<List<sObject>> searchResult = [FIND :searchKey
IN ALL FIELDS RETURNING
Account (Id, Name, AccountNumber, Website)
];
return searchResult;
}
}
I made a searchbar component to show accounts which include the search word. Now I would like to make the account name in the component clickable how it is in the standart. To make it more understandable I show you the outputs I have in both searchbars. So in this example I want to make the coluumn name ("katholische Sozialstation..") clickable
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="GlobalSearchController">
<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String"/>
<aura:attribute name="accountList" type="List" default="Account[]"/>
<aura:attribute name="accountColumns" type="List"/>
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
Account
<lightning:datatable keyField="id"
data="{!v.accountList}"
columns="{!v.accountColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</aura:component>
JS:
({
init: function (component, event, helper){
component.set('v.accountColumns', [
{label: 'Name', fieldName: 'Name', type: 'text'},
{label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
{label: 'Website', fieldName: 'Website', type: 'url', typeAttributes: { target: '_self'}}
]);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
({
init: function (component, event, helper){
component.set('v.accountColumns', [
{label: 'Name', fieldName: 'Name', type: 'text'},
{label: 'Account Number', fieldName: 'AccountNumber', type: 'text'},
{label: 'Website', fieldName: 'Website', type: 'url', typeAttributes: { target: '_self'}}
]);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
Helper:
({
getSearchResultsFromApex : function(component, event, helper){
var action = component.get("c.getSearchResult");
action.setParams({ searchKey : component.get("v.searchKey") });
// Create a callback that is executed after
// the server-side action returns
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var result = response.getReturnValue();
// SOSL will always return the list in the order they were queried
component.set("v.accountList",result[0]);
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
APEX:
public class GlobalSearchController {
@AuraEnabled(cacheable=true)
public static List<List<sObject>> getSearchResult(String searchKey){
List<List<sObject>> searchResult = [FIND :searchKey
IN ALL FIELDS RETURNING
Account (Id, Name, AccountNumber, Website)
];
return searchResult;
}
}
User "linkify" attribute with your Account Name.
For better understanding, refer - https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation
Try Below Code Changes Are In Bold Please Mark It As Best Answer If It Helps
Thank You!
Try Now Please Mark It As Best Answer If It Helps
Thank You!
we are getting closer :) Now the problem is that the name does not lead to the account but to the website I think. How can the link lead to the account record page?