Is it possible to load FieldSet in Lightning Web Components?

Question

I'm trying to load a FieldSet in component's JS file below is the code:

import {LightningElement, api, track} from 'lwc';
import CREATECONTACTSET from '@salesforce/schema/Contact/FieldSet.CREATE_CONTACT_MODAL';

I have also tried

import {LightningElement, api, track} from 'lwc';
import CREATECONTACTSET from '@salesforce/schema/Contact.FieldSet.CREATE_CONTACT_MODAL';

I have looked around for a bit but I haven't come across anything relevant, I'm beginning to think this is not possible.

Answer 1

As mentioned in the previous responses, fieldset isn't supported in LWC yet.However, it can be accessed using an Apex Class. Below is one example of the apex class which can be used.

    public without sharing class MyFieldSetApexClass {

    public MyFieldSetApexClass() {
    }

    public static List<Schema.FieldSetMember> getFields() {
        return SObjectType.Account.FieldSets.examplefieldset.getFields();
    }

    @AuraEnabled(cacheable=true)
    public static Account getAccountList(id accid) {
        String query = 'SELECT ';
        for(Schema.FieldSetMember f : MyFieldSetApexClass.getFields()) {
            query += f.getFieldPath() + ', ';
        }
        query += 'Id FROM Account WHERE ID=\''+accid+'\'';
        System.debug(query);
        return Database.query(query);
    }
}

and the below is the example of the js file which utilises the MyFieldSetApexClass class

import { LightningElement, wire, track, api } from 'lwc';
import accFieldSet from '@salesforce/apex/MyFieldSetApexClass.getAccountList';

export default class MyFielSetComponent extends LightningElement {
    @track accs;
    @track error;
    @api recordId;

    @wire(accFieldSet, { accid: '$recordId' })
    wiredContacts({ error, data }) {
        if (data) {
            this.accs = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accs = undefined;
        }
    }
}

Below is the example HTML code.

<template>
    <lightning-card title="AccountFieldSet" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={accs}>
                <div class="slds-box slds-box_x-small">
                    <p>Name: {accs.Name}</p>
                    <p>Industry: {accs.Industry}</p>
                    <p>Description: {accs.Description}</p>
                </div>
            </template>
            <template if:true={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

This is just an example to support the previous responses. Hope this helps. :)

Answer 2

Going through the documentation, it doesn't seem you can import a FieldSet the way you are attempting to. And if its not documented, its very unlikely that it will ever work.

Import references to Salesforce objects and fields from @salesforce/schema

And the only available syntax in the documentation are as below, where you can only refer an object or a field.

// Syntax
import objectName from '@salesforce/schema/objectReference';
import fieldName from '@salesforce/schema/object.fieldReference';

Your option here would be to utilize an Apex and return the required field set details as response.

Answer 3

Thank you for your share on this topic. It really help me figure out a way to include a fieldset-like solution for Lighting Web Components. I wanted to add to your answer to show how you could use an inner class to act like a field set. Here is my code:

APEX Controller:

public with sharing class fieldSetLWCClass {

private static List<Schema.FieldSetMember> getFields(String APIName, String fieldSetName) {
    /*
        Gets the fields to display from the field set. 
        INPUT 
            APIName         : (Account, customobject__c)
            FieldSetName    : Name of associated field set

        OUTPUT
            Fields within the Fieldsetname
    */
    // All sObject names
    Map<String, Schema.SObjectType> GlobalDescribeMap = Schema.getGlobalDescribe(); 
    // Object that we are iterested in
    Schema.SObjectType SObjectTypeObj = GlobalDescribeMap.get(APIName);
    // Description for object that we are interested in
    Schema.DescribeSObjectResult DescribeSObjectResultObj = SObjectTypeObj.getDescribe();
    // FieldSetNames associated with this object 
    Map<String,Schema.FieldSet> fieldSetObj = DescribeSObjectResultObj.FieldSets.getMap();
    // Populate fieldset class with the fields from fieldsetname that we are intersted in
    Schema.FieldSet aFieldSet = fieldSetObj.get(fieldSetName);

    return aFieldSet.getFields();        
}

private static List<String> getFieldSetNames(String objectApiName) {
    /*
        Returns fieldsetnames that we are interested in using.  Method makes a call to a custom metadata type that allows sytem administrators to define which fieldsets they are interested in displaying.

        INPUT
            objectApiName: Object with FieldSet
        OUTPUT
            Fieldsetname associated with the object
    */
    list_APIName__mdt list_APIName = [SELECT Id FROM list_APIName__mdt WHERE Label = :objectApiName]; 
    List<List_Field_Set_Name__mdt> fieldSets = [SELECT Id, DeveloperName, List_APIName__c FROM List_Field_Set_Name__mdt WHERE List_APIName__c = :list_APIName.Id];

    List<String> Results = new List<String>();

    for (List_Field_Set_Name__mdt fieldSet : fieldSets) {
        Results.add(fieldSet.DeveloperName);
    }
    return Results;
}

@AuraEnabled(cacheable=true)
public static List<FieldDefinition> getFieldList(id recordId, String objectApiName) {
/*
    Queries object based on the fields listed in their fieldsetname.  Using LWC record Id and ObjectApiName, we can determine what object we are looking at and populate data accordingly.

    INPUT
        recordId        : ID passed from current record
        objectAPIName   : ObectAPIName of record
    OUTPUT
        Field Name and Field value
*/
    // query string to build
    String query = 'SELECT ';

    // List of field set names associated with object
    List<String> fieldSetNames = getFieldSetNames(objectApiName);
    // Fields in each field set name
    List<String> FieldDescriptions = new List<String>(); 

    // Get the field set name
    for (String fieldSetName : fieldSetNames) {
        // If we have fields, add them to the list
        for(Schema.FieldSetMember f : getFields(objectApiName, fieldSetName)) {
            query += f.getFieldPath() + ', ';
            FieldDescriptions.Add(f.getFieldPath());
        } 

    }

    // Query for the fields that we have in our list
    query += 'Id FROM '+ objectApiName +' WHERE ID=\''+recordId+'\'';

    // Instantiate object 
    SObject Obj = recordId.getSObjectType().newSObject(recordId);

    Obj = database.query(query);

    // Add values to a generic object tha can be used to display on any page
    List<FieldDefinition> Field = new List<FieldDefinition>();
    for (String F : FieldDescriptions) {
        if ((Obj.get(F) != null) || (Obj.get(F) != '')){
            FieldDefinition fieldDef = new FieldDefinition();
            fieldDef.APIfieldName = F;
            fieldDef.fieldValue   = String.valueOf(Obj.get(F));
            if ((fieldDef.FieldValue != null) && (fieldDef.fieldValue != ''))
                Field.Add(fieldDef);
        }
    }
    return Field;
}

public class FieldDefinition {
    @AuraEnabled
    public String APIfieldName {get;set;}
    @AuraEnabled
    public String FieldValue {get;set;}
}

}

Lightning Web Component Markup:

<template>
<lightning-card title="My Account Record" icon-name="standard:account">
    <template if:true={FieldDefinitions.data}>
        <div class="slds-m-around_medium">
            <template for:each={FieldDefinitions.data} for:item="FieldDefinition">
                <p key={FieldDefinition.APIfieldName}>{FieldDefinition.APIfieldName}: {FieldDefinition.FieldValue}</p>
            </template>
        </div>
    </template>
</lightning-card>