1

Column : CaseNumber / ContactID (lookup)

I want to make them both as clickable link in <lightning-datatable

Code :

  @wire(getAllCases, { lv0: '$listViewId' })
    wiredOpps(result) {
        const { data, error } = result;
        
        if(result.data) {
            console.log('vvvvvvv',data);
            let nameUrl;
            let preparedArr = [];
            result.data.forEach(record => {
                result.data.map((xx) =>{})
                let preparedRec = {};
                this.data = result.data.map((ssss) =>
                Object.assign({ CaseNumberURL: "/clients/s/case/" + ssss.Id }, ssss));
              
                //preparedRec.CaseNumberURL = record.CaseNumber;
                preparedRec.Status = record.Status;
                preparedRec.Subject = record.Subject;
                preparedRec.ContactIdURL = record.Contact.Name;
                preparedRec.Interaction_client__c = record.Interaction_client__c;
                preparedRec.Date_ouverture__c = record.Date_ouverture__c;
                preparedRec.Priority = record.Priority;
                preparedRec.Type = record.Type;
                preparedRec.Produit__c = record.Produit__c;
                preparedRec.Environnement__c = record.Environnement__c;
                preparedRec.SiteForPortal__c = record.SiteForPortal__c;
                preparedRec.Developpement__c = record.Developpement__c;
                preparedRec.CorrectionsReports__c = record.CorrectionsReports__c;
                preparedRec.Nom_du_groupement__c = record.Nom_du_groupement__c;
                preparedRec.Date_fermeture__c = record.Date_fermeture__c;
                preparedArr.push(preparedRec);
            });
            this.cases = preparedArr;
          
        }
        if(error) {
            this.error = error;
            this.cases = [];
        }

 @track columns = [
        {label: 'NUMERO DE LA REQUETE', fieldName: 'CaseNumberURL',type: 'url',typeAttributes: {label: { fieldName: 'CaseNumber' }, target: '_blank'},sortable: true},
        {label: 'NOM DU CONTACT',fieldName: 'ContactIdURL',type: 'lookup',typeAttributes: {label: { fieldName: 'ContactId' }, target: '_blank'},sortable: true},

The problem i'm facing is that the column CaseNumberURL is get filled but it doesnt show value in UI

enter image description here

enter image description here

2 Answers 2

1

It doesn't look like you are actually writing those values to your preparedRec. Add this:

preparedRec.CaseNumber = record.CaseNumber;
preparedRec.CaseNumberURL = record.CaseNumberURL;

I don't think you need the Object.assign call either. Try this:

preparedRec.CaseNumberURL = `/clients/s/case/${record.Id}`;

Also, get rid of this:

result.data.map((xx) =>{})
let preparedRec = {};
this.data = result.data.map((ssss) =>

So... to recap. Do this:

wiredCases(data,error) {
  if(data){
    let preparedArr = [];
    data.forEach(record => {
      let preparedRec = {};
      preparedRec.CaseNumber = record.CaseNumber;
      preparedRec.CaseNumberURL = `/clients/s/case/${record.Id}`;        
      //... more mapping
      preparedArr.push(preparedRec);
    });
    this.cases = preparedArr;
  }
}
5
  • Thanks , can you explain why i don't need objet assign?
    – user110654
    Sep 2, 2022 at 7:45
  • i think it's not a good approach because i have a button which export datatable to excel and in this case it will export the column CaseNumberURL .. this.cases.forEach(function (record) { Object.keys(record).forEach(function (key) { rowData.add(key); }); });
    – user110654
    Sep 2, 2022 at 8:02
  • CaseNumberURL needs to be in the array. If you need to exclude it, then do it in the export datatable function. Sep 2, 2022 at 8:08
  • yes but how....
    – user110654
    Sep 2, 2022 at 8:18
  • To use the datatable and have an href column, you need CaseNumber and CaseNumberURL at the same level in each row (you can't hide one as a child of the other). I guess if you need help exporting, you'll prob need to ask another question. Sep 2, 2022 at 8:27
1

You don't need Array.prototype.forEach and Array.prototype.map at the same time. Your code is all kinds of confused. Since you already have almost all the data you want, you can write a very short function to handle this:

@wire(getAllCases, { lv0: "$listViewId" })
wiredOpps(result) {
  const { data, error } = result;
  this.error = error;
  this.cases = undefined;
  if (data) {
    this.data = result.data.map((record) => ({
      ...record,
      CaseNumberURL: `/clients/s/case/${record.Id}`,
    }));
  }
}

Here, we use () => ({}) to form a new object, ...record is the spread operator, and automatically performs a shallow copy of all the fields, and the CaseNumberURL part adds the custom link you're looking for.

This is far more efficient then creating a separate array and accessing each property individually, plus all the extra Array.prototype.push calls.

4
  • Oh I only glanced at this answer but I see why you put it in. Very elegant. However, it may be more difficult for a learner to follow. Sep 2, 2022 at 8:09
  • But why you declared this.cases = undefined; ? also with your approach i can not fill other values as : CaseNumber , Status , Subject
    – user110654
    Sep 2, 2022 at 16:25
  • @Fabien (a) We don't show data unless there's data to show if(data)..., and (b) the {...value} syntax copies all properties automatically, so you do not need to copy each one at a time.
    – sfdcfox
    Sep 2, 2022 at 16:34
  • thanks but it doesnt work
    – user110654
    Sep 2, 2022 at 19:33

You must log in to answer this question.