[SalesForce] Parse comma separated String to List in LWC

I'm building an LWC to be used in Record Page and Community, a custom related records list component, that shows formula fields properly formatted (rich-text formatted), so it uses targetConfigs properties.

enter image description here

Fields to retrieve as you see is a comma-separated value, which needs to be parsed into a List in order to iterate over it and get their actual label to be used in the columns header of the data-table.

I'm not well versed in LWC, actually, I had no experience with it, but I'm making some progress.

This is my html file, I removed the references to the js properties just for better readibility

HTML

<template>
    <lightning-card icon-name={iconName} title={objectLabel}>
        <lightning-datatable
                key-field="Id"
                data={data}
                columns={columns}
                hide-checkbox-column="true"></lightning-datatable>
    </lightning-card>
</template>

JS Controller

import { LightningElement, api, wire, track} from 'lwc';
import getIconName from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getIconName';
import getObjectLabel from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getObjectLabel';
import getFieldSet from '@salesforce/apex/ICRM_DynamicRelatedRecordsList_Ctrlr.getFieldSet';

export default class IcrmDrrl extends LightningElement {
    @api recordId;
    @api objectName = '';
    @api relatedField = '';
    @api fieldList = '';
    @api recordsToDisplay = 0;
    @track iconName = '';
    @track objectLabel = '';
    @track data = [];
    @track columns = [];

    @wire(getIconName, { objectName: '$objectName' })
     wiredIcon({ error, data}) {
         if(data) {
            this.iconName = data;
         } else if (error) {
            this.error = error;
            this.iconName = undefined;
         }
     }

    @wire(getObjectLabel, { sobjectApiName: '$objectName' })
    wiredLabel({ error, data}) {
        if(data) {
            this.objectLabel = data;
        } else if (error) {
            this.error = error;
            this.objectLabel = undefined;
        }
    }
    
    @wire(getFieldSet, {
        sObjectName: '$objectName',
        listOfFields: **---NEED TO PARSE fieldList STRING AND PASS IT HERE---,**
        recordId: '$recordId',
        relationshipField: '$relatedField',
        recordsToDisplay: '$recordsToDisplay'
    }) wiredResults({error, data}) {
        if (data) {
            this.data = data.listData;
            this.columns = data.columns;
        } else if (error) {
            this.error = error;
            this.data = undefined;
            this.columns = undefined;
        }
    }

    constructor() {
        super();
        console.log('Object Name: ' + this.fieldList);
    }

}

Apex code

    @AuraEnabled (Cacheable= true)
public static ColumnAndDataWrapper getFieldSet(String sObjectName, List<String> listOfFields, Id recordId, String relationshipField, Integer recordsToDisplay) {
    ColumnAndDataWrapper cdw = new ColumnAndDataWrapper();
    List<Columns> columns = new List<Columns>();
    String fieldsToFetch = '';

    Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe();
    Schema.SObjectType ctype = gd.get(sObjectName);
    Map<String, Schema.SObjectField> fmap = ctype.getDescribe().fields.getMap();

    // Generating a list of columns
    for (String f : listOfFields) {
        if (f == 'Name') {
            // Uncomment and replace to allow go to record by clicking name
            // columns.add(new Columns(fmap.get(f).getDescribe().getLabel(), 'linkName', 'url'));
            columns.add(new Columns(fmap.get(f).getDescribe().getLabel(), 'Name', 'text'));
        } else {
            columns.add(new Columns(fmap.get(f).getDescribe().getLabel(), f, String.valueOf(fmap.get(f).getDescribe().getType()).toLowerCase()));
        }
        if (fieldsToFetch != '') {
            fieldsToFetch += ',';
        }
        fieldsToFetch += f;
    }

    // Get the records of requested object
    List<SObject> listData;
    if (recordsToDisplay == null) {
        listData = Database.query('SELECT Id, ' + fieldsToFetch + ' FROM ' + sObjectName + ' WHERE ' + relationshipField + ' = :recordId ');
    } else if (recordsToDisplay != null && recordsToDisplay > 0) {
        listData = Database.query('SELECT Id, ' + fieldsToFetch + ' FROM ' + sObjectName + ' WHERE ' + relationshipField + ' = :recordId LIMIT ' + recordsToDisplay);
    }
    cdw.columns = columns;
    cdw.listData = listData;
    return cdw;
}

public class Columns {
    @AuraEnabled public String label;
    @AuraEnabled public String fieldName;
    @AuraEnabled public String type;
    public Columns(String label, String fieldName, String type) {
        this.label = label;
        this.fieldName = fieldName;
        this.type = type;
    }
}

public class ColumnAndDataWrapper {
    @AuraEnabled public List<Columns> columns;
    @AuraEnabled public List<SObject> listData;
}

I'm providing all this in case there are some areas that I need to fix too.

enter image description here

Best Answer

You just need to split the list, which you'd want to do with an @api setter. Change:

@api fieldList;

To:

fieldListArray;
@api set fieldList(value) {
  this.fieldListArray = (value||'').split(',');
}
get fieldList() {
  return (this.fieldListArray||[]).join(',');
}

From there, wire it to your method parameters:

listOfFields: '$fieldListArray';
Related Topic