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
Clara GauntClara 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);
    },
})
Darshit Pathak 10Darshit Pathak 10

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