1

Hi guys ^^ I am new in programming and Salesforce.

I have little problem I wrote an apex class and now I want to make a custom tabele (that can't be a datatable) because in feature I will write a clickable row in this. Can you help me write a JS and html? I am new and I know the code can have a lot of mistakes please be lenient. If u have another idea about write wire say it :D just I want to make a clickable row thats why i do it like it.

APEX

public with sharing class StockMarketSharesWrapper {
    
    @AuraEnabled(cacheable=true)

    public static List<Wrapper> getAllCompanys(
        String Ticker,
        String Name
     ){
   
       

        // Define the list
        List<Wrapper> com = new List<Wrapper>(); 


        // Create account sObjects
        Wrapper w = new Wrapper();
        w.Ticker = 'U';
        w.Name = 'Unity Software Inc';
        Wrapper w1 = new Wrapper();
        w1.Ticker = 'UAL';
        w1.Name = 'United Airlines Holdings, Inc.' ;
        Wrapper w2 = new Wrapper();
        w2.Ticker ='DAOOU' ;
        w2.Name = 'Crypto 1 Acquisition Corp Unit';
        Wrapper w3 = new Wrapper();
        w3.Ticker = 'GLLIU';
        w3.Name ='Globalink Investment Inc. Unit' ;

        // Add accounts to the list
        com.add(w);
        com.add(w1);
        com.add(w2);
        com.add(w3);

        return com;
    }

    public class Wrapper{

@AuraEnabled
public String Name {get; set;}
@AuraEnabled
public String Ticker {get; set;}

} 

}

JS

import { LightningElement, wire, api, track } from "lwc";
import getAllCompanys from "@salesforce/apex/StockMarketSharesWrapper.getAllCompanys";
import { NavigationMixin } from "lightning/navigation";

export default class FilteredTable extends NavigationMixin(
    LightningElement
) {

   

    Name = "";
    Ticker = "";

    


    @wire(getAllCompanys, { Ticker: '$Ticker', Name: '$Name'})
    fetchCompanies(data, error){
        alert('is in ????');
        if (error){
            this.Ticker= JSON.stringify(error);
            this.Name= JSON.stringify(error);
            return;
        }
        if(data.data){
            this.Ticker =data.data.Ticker;
            this.Name =data.data.Name
        }
       
    }

HTML

I know html is wrong but i saw a table like that in net and what do my table look like that.

<template>
    

    <lightning-card variant="Narrow">
        <lightning-layout multiple-rows>
            <lightning-layout-item
                size="12"
                padding="around-small"
            >
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        
                    <!-- 
                        <tr class="slds-line-height_reset">
                            <th scope="col">Index</th>
                            
                            <th scope="col">Case Number</th>
                            <th scope="col">Account Name</th>
                            <th scope="col">Contact</th>
                            
                            <th scope="col">Status</th>
                            <th scope="col">Priority</th>
                            <th scope="col">Subject</th>
                        </tr>--> 


                        
                    </thead>
                    <tbody>
                        <tr
                            class="slds-hint-parent"
                            for:each={searchable}
                            for:item="item"
                            key={item.Id}
                        >
                            <td scope="col">{item.index}</td>
                            <th scope="row">
                                <a
                                    href="#"
                                    onclick={handleNavigate}
                                    data-id={item.caseData.Id}
                                >{item.caseData.CaseNumber}
                                </a>
                            </th>
                            <th scope="row">
                                <span if:true={item.caseData.Account}>
                                    <a
                                        href="#"
                                        onclick={handleNavigate}
                                        data-id={item.caseData.Account.Id}
                                    >
                                        {item.caseData.Account.Name}
                                    </a>
                                </span>
                            </th>
                            <th scope="row">
                                <span if:true={item.caseData.Contact}>
                                    <a
                                        href="#"
                                        onclick={handleNavigate}
                                        data-id={item.caseData.Contact.Id}
                                    >
                                        {item.caseData.Contact.Name}
                                    </a>
                                </span>
                            </th>
                            <th scope="row">{item.caseData.Subject}</th>
                            <th scope="row">{item.caseData.Status}</th>
                            <th scope="row">{item.caseData.Priority}</th>
                        </tr>
                    </tbody>
                </table>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

EDIT

I know i can do wire like @wire(getAllCompanys, {}) companys; but then I have no idea how to make onclick row table.

EDIT v2 I just checked wire is response but when I am trying to pull it out to from HTML to UI it is not working. HTML cant see {Ticker}, {Name}

1 Answer 1

3

Here you can use data_table_custom_types which Lighting data table provides. Just for opening records with onClick option no need of going full custom. We can extend Lighiting datatable and build an onclick functionality for records.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_table_custom_types

A working example is below. In this example I just queried some dummy records and showed how onClick of those relationship records you can open view page for those records.

enter image description here

Main Componennt:

<!-- Datatableexample -->
<template>
    <div style="height: 300px;">
        <c-document-data-table
                key-field="Id"
                data={data}
                class="slds-customTable"
                ondatatablecolumnclickhandler={handleDatatableColumnClick}
                columns={columns}>
        </c-document-data-table>
    </div>
</template>

import {LightningElement} from 'lwc';
import getCasesWithAccount from '@salesforce/apex/DatatableExampleController.getCasesWithAccount';
import { NavigationMixin } from 'lightning/navigation';

const columns = [
    {
        label: 'CaseNumber', type: 'datatableColumnClickHandler', typeAttributes: {
            recordId: {
                fieldName: 'Id'
            },
            cellValue: {
                fieldName: 'CaseNumber'
            },
            sObjectApiName: 'Case'
        }
    },
    {
        label: 'Case Account', type: 'datatableColumnClickHandler', typeAttributes: {
            recordId: {
                fieldName: 'AccountId'
            },
            cellValue: {
                fieldName: 'AccountName'
            },
            sObjectApiName: 'Account'
        }
    }
];

export default class Datatableexample extends NavigationMixin(LightningElement) {
    data = [];
    columns = columns;

    // eslint-disable-next-line @lwc/lwc/no-async-await
    async connectedCallback() {
        this.data = await getCasesWithAccount();
        let preparedAssets = [];
        this.data.forEach(eachCase => {
            let preparedAsset = {};
            preparedAsset.Id = eachCase.Id;
            preparedAsset.CaseNumber = eachCase.CaseNumber;
            preparedAsset.AccountName = eachCase.Account.Name;
            preparedAsset.AccountId = eachCase.AccountId;
            preparedAssets.push(preparedAsset);
        });
        this.data = preparedAssets;
    }

    handleDatatableColumnClick(event) {
        let parsedDetail = JSON.parse(JSON.stringify(event.detail));
        console.log(parsedDetail);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: parsedDetail.recordId,
                objectApiName: parsedDetail.objectApiName,
                actionName: 'view'
            },
        });
    }
}

----- documentDataTable-----

<template>
    <c-datatable-column-click-handler s-object-api-name={typeAttributes.sObjectApiName}  record-id={typeAttributes.recordId} cell-value={typeAttributes.cellValue}></c-datatable-column-click-handler>
</template>

import LightningDatatable from 'lightning/datatable';
import datatableColumnClickHandler from './datatableColumnClickHandler.html';
export default class CustomLightningDatatable extends LightningDatatable {
    static customTypes  = {
        datatableColumnClickHandler: {
            template: datatableColumnClickHandler,
            typeAttributes: ['recordId', 'cellValue', 'sObjectApiName']
        }
    }
}

------datatableColumnClickHandler ----

<template>
    <a class="slds-p-around_x-small" href="javascript:void(0);" onclick={handleClick}>
        {cellValue}
    </a>
</template>

import { LightningElement, api } from 'lwc';

export default class DatatableColumnClickHandler extends LightningElement {
    @api cellValue;
    @api recordId;
    @api sObjectApiName;

    handleClick() {
        const event = new CustomEvent('datatablecolumnclickhandler', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                recordId: this.recordId,
                objectApiName: this.sObjectApiName,
            },
        });
        this.dispatchEvent(event);
    }
}

Apex class:

public without sharing class DatatableExampleController {

    @AuraEnabled
    public static List<Case> getCasesWithAccount(){
        return [SELECT Id, AccountId, Account.Name, CaseNumber FROM Case WHERE Id= '5007F00000P3gfBQAR'];
    }
}
1
  • 1
    Note for OP: the event should be fired with bubbles: true to be able to capture it from datatable component. Commented Dec 19, 2021 at 10:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .