You need to sign in to do that
Don't have an account?
Clara Gaunt
Set tile label to navigate to record id for each record returned in an aura component
Hi
I have created an aura component which returns the records in a grid of tiles. However, I would like to set the title of the tile as a url to the returned record. I cant quite get this to work. My current code is below:
Apex Class:
public with sharing class getknowledgearticles {
@AuraEnabled
public static List<Knowledge__kav> getknowledge() {
return [SELECT Id, ArticleTotalViewCount, ArticleCreatedDate, Group__c, Full_Description__c, IsLatestVersion, PublishStatus, Summary, Title FROM Knowledge__kav WHERE PublishStatus='Online'AND Group__c includes ('General Information')];
}
}
CMP:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" controller ="getknowledgearticles" access="global" >
<aura:attribute name="mydataLst" type="Object"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:layout multipleRows="true">
<aura:iteration items="{!v.mydataLst}" var="records" >
<lightning:layoutItem padding="around-small" size="6">
<div id="Tilu" class="slds-box">
<lightning:tile label="{!records.Title}">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar_circle slds-avatar_large">
<img alt="" src="/resource/1652857196000/info?" title="General Information" />
</span></div>
<dl class="slds-dl_horizontal">
<dt class="slds-dl_horizontal__label">
<p class="slds-wrap">{!records.Group__c}</p>
</dt>
<dd class="slds-dl_horizontal__detail slds-tile__meta">
<p class="slds-wrap">{!records.Summary}</p>
</dd>
</dl>
</lightning:tile>
</div>
</lightning:layoutItem>
</aura:iteration>
</lightning:layout>
</aura:component>
JS CONTROLLER:
({
init: function (cmp, event, helper) {
cmp.set('v.records', [
{label: 'Title', fieldName: 'linkTitle', type: 'url',
typeAttributes: {label: { fieldName: 'Title' }, target: '_blank'}} ]);
var action=cmp.get('c.getknowledge');
action.setCallback(this,$A.getCallback(function(response){
var state=response.getState();
if(state==="SUCCESS"){
var oResponse=response.getReturnValue();
oResponse.forEach(function(record){
record.linkTitle = '/'+record.Id;
});
cmp.set("v.mydataLst",oResponse);
}else if(state==="ERROR"){
var errors=response.getError();console.error(errors);
}
}
));
$A.enqueueAction(action);
},
})
I have created an aura component which returns the records in a grid of tiles. However, I would like to set the title of the tile as a url to the returned record. I cant quite get this to work. My current code is below:
Apex Class:
public with sharing class getknowledgearticles {
@AuraEnabled
public static List<Knowledge__kav> getknowledge() {
return [SELECT Id, ArticleTotalViewCount, ArticleCreatedDate, Group__c, Full_Description__c, IsLatestVersion, PublishStatus, Summary, Title FROM Knowledge__kav WHERE PublishStatus='Online'AND Group__c includes ('General Information')];
}
}
CMP:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" controller ="getknowledgearticles" access="global" >
<aura:attribute name="mydataLst" type="Object"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:layout multipleRows="true">
<aura:iteration items="{!v.mydataLst}" var="records" >
<lightning:layoutItem padding="around-small" size="6">
<div id="Tilu" class="slds-box">
<lightning:tile label="{!records.Title}">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar_circle slds-avatar_large">
<img alt="" src="/resource/1652857196000/info?" title="General Information" />
</span></div>
<dl class="slds-dl_horizontal">
<dt class="slds-dl_horizontal__label">
<p class="slds-wrap">{!records.Group__c}</p>
</dt>
<dd class="slds-dl_horizontal__detail slds-tile__meta">
<p class="slds-wrap">{!records.Summary}</p>
</dd>
</dl>
</lightning:tile>
</div>
</lightning:layoutItem>
</aura:iteration>
</lightning:layout>
</aura:component>
JS CONTROLLER:
({
init: function (cmp, event, helper) {
cmp.set('v.records', [
{label: 'Title', fieldName: 'linkTitle', type: 'url',
typeAttributes: {label: { fieldName: 'Title' }, target: '_blank'}} ]);
var action=cmp.get('c.getknowledge');
action.setCallback(this,$A.getCallback(function(response){
var state=response.getState();
if(state==="SUCCESS"){
var oResponse=response.getReturnValue();
oResponse.forEach(function(record){
record.linkTitle = '/'+record.Id;
});
cmp.set("v.mydataLst",oResponse);
}else if(state==="ERROR"){
var errors=response.getError();console.error(errors);
}
}
));
$A.enqueueAction(action);
},
})
you can use href attribute of lightning:tile
<lightning:tile label="{!records.Title}" href = 'www.google.com'>
if you want to have dynamic URL then use records.linkTitle.
<lightning:tile label="{!records.Title}" href = '{!records.linkTitle}'>
below piece of code is not required in js
cmp.set('v.records', [
{label: 'Title', fieldName: 'linkTitle', type: 'url',
typeAttributes: {label: { fieldName: 'Title' }, target: '_blank'}} ]);
Please mark this as best asnwer if it helps!
Regards,
Darshit Pathak