function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jonathan Wolff 7Jonathan 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

User-added image
User-added image

<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;
     
    }
}
Danish HodaDanish Hoda
Hi there,
User "linkify" attribute with your Account Name.
For better understanding, refer - https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation
CharuDuttCharuDutt
Hii Johnathan
Try Below Code Changes Are In Bold
JS
({
    init: function (component, event, helper){
        component.set('v.accountColumns', [
            {label: 'Account Name', fieldName: 'linkName', type: 'url',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {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();
result.forEach(function(result){
result.linkName = '/'+result.Id;
});
               
                // 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);
    }
})

Please Mark It As Best Answer If It Helps
Thank You!

 
Jonathan Wolff 7Jonathan Wolff 7
Hi CharuDutt, I tried your code sample but the problem is that now I do not get results when I Insert BRSG in the searchbar. Could you look over it and tell me where the error could come from?
Jonathan Wolff 7Jonathan Wolff 7
To specify it more, the account names do not display anymore
CharuDuttCharuDutt
Hii Johnathan 
Try Now
Js 
({
    init: function (component, event, helper){
       component.set('v.accountColumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'url', 
            typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
             {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();
  result.forEach(function(result){
                    result.Name = '/'+result.Id;
      				
                });
               
                // 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);
    }
})
Please Mark It As Best Answer If It Helps
Thank You!

 
Jonathan Wolff 7Jonathan Wolff 7
Hi CharuDutt,

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?