You need to sign in to do that
Don't have an account?
Jonathan Wolff 7
Hyperlink in Lightning datatable is not working, could you find the error I made?
Hello friends
, I made a search component with a datatable where I would like to link to the record. Could you look over my code and help me achive it so the url-result Bezeichnung__c leads to its record?
Thank you in advance for your help.
COMPONENT
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">
<!-- 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="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
<div class= "slds-box">
<div class="slds-grid slds-wrap" >
<div class="slds-size_12-of-12">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="8">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem size="2">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
<div class="haha">
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9" >
<lightning:datatable keyField="id"
data="{!v.mediathekList}"
columns="{!v.mediathekColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</div>
</div>
</aura:component>
JS:
({
init: function (component, event, helper){
component.set('v.mediathekColumns', [
{label: 'Bezeichnung', fieldName: 'Bezeichnung__c', type: 'url',
typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}},
{label: 'Typ', fieldName: 'Typ__c', type: 'text',
typeAttributes: {label: { fieldName: 'Typ__c' }, target: '_blank'}},
{label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text',
typeAttributes: {label: { fieldName: 'Zielgruppe__c' }, target: '_blank'}},
{label: 'Umfang', fieldName: 'Umfang__c', type: 'text',
typeAttributes: {label: { fieldName: 'Umfang__c' }, target: '_blank'}},
]);
var action = component.get("c.getSearchResult");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var records =response.getReturnValue();
records.forEach(function(record){
record.Bezeichnung__c = '/'+record.Id;
});
component.set("v.mediathekList", records);
}
});
$A.enqueueAction(action);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
APEX
public class MediathekSearchController {
@AuraEnabled(cacheable=true)
public static List<List<sObject>> getSearchResult(String searchKey){
List<List<sObject>> searchResult = [FIND :searchKey
IN ALL FIELDS RETURNING
Mediathek__c (Id, Name, Bezeichnung__c, Typ__c, Zielgruppe__c, Umfang__c, Bezeichnung_Link__c)
];
return searchResult;
}
}
, I made a search component with a datatable where I would like to link to the record. Could you look over my code and help me achive it so the url-result Bezeichnung__c leads to its record?
Thank you in advance for your help.
COMPONENT
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">
<!-- 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="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
<div class= "slds-box">
<div class="slds-grid slds-wrap" >
<div class="slds-size_12-of-12">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="8">
<lightning:input name="searchKey" placeholder="Enter search key" value="{!v.searchKey}"/>
</lightning:layoutItem>
<lightning:layoutItem size="2">
<lightning:button variant="brand" label="Search" title="Search" onclick="{!c.search}" class="customButton"/>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
<div class="haha">
<aura:if isTrue="{!v.showSearchResults}">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="9" >
<lightning:datatable keyField="id"
data="{!v.mediathekList}"
columns="{!v.mediathekColumns}"
hideCheckboxColumn="true"/>
</lightning:layoutItem>
</lightning:layout>
</aura:if>
</div>
</div>
</aura:component>
JS:
({
init: function (component, event, helper){
component.set('v.mediathekColumns', [
{label: 'Bezeichnung', fieldName: 'Bezeichnung__c', type: 'url',
typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}},
{label: 'Typ', fieldName: 'Typ__c', type: 'text',
typeAttributes: {label: { fieldName: 'Typ__c' }, target: '_blank'}},
{label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text',
typeAttributes: {label: { fieldName: 'Zielgruppe__c' }, target: '_blank'}},
{label: 'Umfang', fieldName: 'Umfang__c', type: 'text',
typeAttributes: {label: { fieldName: 'Umfang__c' }, target: '_blank'}},
]);
var action = component.get("c.getSearchResult");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var records =response.getReturnValue();
records.forEach(function(record){
record.Bezeichnung__c = '/'+record.Id;
});
component.set("v.mediathekList", records);
}
});
$A.enqueueAction(action);
},
search : function(component, event, helper) {
helper.getSearchResultsFromApex(component, event, helper);
component.set("v.showSearchResults",true);
}
})
APEX
public class MediathekSearchController {
@AuraEnabled(cacheable=true)
public static List<List<sObject>> getSearchResult(String searchKey){
List<List<sObject>> searchResult = [FIND :searchKey
IN ALL FIELDS RETURNING
Mediathek__c (Id, Name, Bezeichnung__c, Typ__c, Zielgruppe__c, Umfang__c, Bezeichnung_Link__c)
];
return searchResult;
}
}
This is the duplicate for the below question.
https://developer.salesforce.com/forums?id=9062I000000Bk8y
Thanks