Set tile label to navigate to record id for each record returned in an aura component

Question

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);
    },
})

Any help appreciated

Answer 1

I think you're looking for the href attribute on the lightning:tile

https://developer.salesforce.com/docs/component-library/bundle/lightning:tile/example#lightningcomponentdemo:exampleTileWithIcon

<lightning:tile label="Salesforce UX" href="/path/to/somewhere">
    ...
</lightning:tile>

or, specifically for your solution, something like this:

<lightning:tile label="{!records.Title}" href="{!records.linkTitle}">

Answer 2

I found the solution, by adding the below into my tile

<p class="slds-wrap"><a href="{!'/lightning/r/Knowledge__kav/'+ records.Id +'/view'}" >See full article</a></p>