Show Hyperlink against the Record in Datatable in LWC

 Requirements: Show the case records in the data table. when click on case number it will redirect to the detail page


Apex Class: showCaseRecordsinDatatable


public with sharing class showCaseRecordsinDatatable {

       @AuraEnabled

    public static list<case> fetchCases(){

        try {

            return [Select Id, subject,CaseNumber, Description, AccountID, Account.Name,ContactID, contact.Name,Status, priority from case];

          

        } catch (Exception e) {

            throw new AuraHandledException(e.getMessage());

        }

    }

}

--------Create LWC-------



<template>

    <lightning-card  variant="Narrow"  title="Case List" icon-name="standard:case">

        <div class="slds-m-around_small">

            <lightning-datatable

                key-field="id"

                data={result}

                show-row-number-column

                hide-checkbox-column

                columns={columnsList}

                onrowaction={handleRowAction}>

            </lightning-datatable>

        </div>

    </lightning-card>

</template>


------JS File-------


import { LightningElement,api } from 'lwc';

import fetchCases from '@salesforce/apex/showCaseRecordsinDatatable.fetchCases';

// adding the type attributes and cell attributes for hyperlink and priority icon

const columns = [

    {label:'CaseNumber', fieldName:'caseUrl', type:'url',

    typeAttributes: {

        label:{

            fieldName : 'CaseNumber'

        },

        target :'_blank'

    }

    },

    {label:'Subject', fieldName:'Subject'},

    {label:'Status', fieldName:'Status'},

    {

        label:'Priority', fieldName:'Priority',

        cellAttributes: {

            iconName:{

                fieldName :'priorityIcon'

            },

            iconPosition :'left',

            iconAlternativeText: 'Priority Icon' 


        }


    },

    {label:'Contact', fieldName:'ContactUrl', wrapText :true, type:'url',

    typeAttributes :{

        label :{

            fieldName :'ContactName'

        },

        target :'_blank'

    }

    

    },

    {label:'Account', fieldName:'AccountName', wrapText :true}


    

];

export default class CaseDatatable extends LightningElement {

    @api result;

    @api error;

    columnsList = columns;

    connectedCallback(){

        this.getAllCaseDetails();


    }


    getAllCaseDetails(){

        fetchCases()

        .then(data =>{

            //iterate each record if case assoicated with contact and account

            // collect base url

            let baseUrl = 'https://'+location.host+'/';

            data.forEach(caseRec => {

                caseRec.caseUrl = baseUrl+caseRec.Id;


                if(caseRec.ContactId){

                    caseRec.ContactName = caseRec.Contact.Name;

                    caseRec.ContactUrl = baseUrl+caseRec.ContactId;

                }

                if(caseRec.AccountId){

                    caseRec.AccountName = caseRec.Account.Name;

                }

                // set Prioiry Icon based on Priority 

                if(caseRec.Priority === 'High'){

                    caseRec.priorityIcon = 'utility:log_a_call';

                } else if (caseRec.Priority === 'Medium'){

                    caseRec.priorityIcon = 'utility:note';

                } else if(caseRec.Priority === 'Low'){

                    caseRec.priorityIcon = 'utility:open';

                }

                

            });

            this.result = data;

            this.error= undefined;

        }) 

        .catch(error =>{

            this.error= error;

            window.console.log('error',error);


        });

    }


handleRowAction(){}

}


--------------Meta file-----------


<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>56.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Case Details</masterLabel>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightningCommunity__Page</target>

        <target>lightningCommunity__Default</target>

    </targets>

</LightningComponentBundle>


output




Comments

Post a Comment

Popular posts from this blog

Salesforce Spring 16 Release Exam (Maintenance Exam Q&A) for Developer 201 Admin

Spring 16 Salesforce Admin 201 Maintenance Exam 1. Which areas are calculated for the Health Check score? Choose 2 answers A. Number of users B. Session Settings  C. Profiles and Permissions assigned D. Password Policy E. Login attempts 2. What key user access data is included in login forensics? A. Who logged in from a new browser more than once in a day. B. Who logged in more than the number set in the profile. C. Who logged in during business hours. D. Who logged in more than the average number of times. 3. What is true regarding the new Data Loader? A. It has a new column flagging duplicate files. B. It supports Web Server OAuth Authentication for Windows or Mac. C. It has downloadable add-ons published through the AppExchange. D. It works with all legacy security protocol. 4. What does the Customize Application permission setting allow? A. To create article types. B. To edit contract settings. C. To modify custom picklist values. D. To create a...
Read more

Show Hyper Link On Add Error in Salesforce Trigger

Requirement: Check Duplicate record in system and show the add error in form of hyperlink corresponding duplicate record ID Solution : Write a trigger and show add error objExistingRecord >>> OldRecord Id objNewRecord >> New Record  objNewRecord.addError('Same Combination of Record already Inserted in System: <a href=\'/'+ objExistingRecord.id +'\'>'+objExistingRecord.Name+'</a>', false);                                                                           Thanks                                                Sumit Shukla
Read more

Show the Success Message before Redirecting the Detail page on Visualforce Page

Requirement: To show the Success message before Redirecting the Detail page. On Click on Save button show the successful message after that redirect to detail page.  Solution: Create the Controller Class public class ClassName { // Create a boolean property     public boolean isChanged{get;set;}             public void SaveData(){         //Write Save/update Logic //insert/update list or object /set the boolean value as a true after list update/insert isChanged=true;         ClassName              } // This method will call after saving the record. and redirect to specify id     public pagereference redirectToRequiredPage(){         PageReference pageRef=new PageReference('/' +Recordid);         return pageRef;     } } Create the visualforce page <apex:page Contr...
Read more