[Salesforce LWC] — Design and Develop Dynamic User Interface using FieldSet Class

[1] Business Scenario —

• We have been working in a complex Lightning transformation project leveraging LWC and there was an ask from customer to design and develop an automated or semi-automated customizable user interface populating the fields contained in a field set and get the details about the field set like set name and the value. In easy words, the field name of that particular UI and object along with label can be driven from the result object against an sObject.

[2] Solution Approach –

[ fieldSet.html ]

• Specified through template if and using for:each for:item read the collection named SearchParamsDemo which is invoked through JS layer and store the required label name defined through field set as configurable parameter and the same can be designed in UI through dynamic interface and changed by the end user at any point in time without any impact on existing code or any required deployment in terms of overall life cycle.

<!—demo1 search input fields >                                                       
<template if:true={isDefault}>         
    <template for:each={searchParamsDemo} for:item="sf">
          <div class="slds-col slds-size_1-of-10" key={sf.Id}>
               <div class="slds-p-around_medium lgc-bg" key={sf.Id}>
                  <lightning-input name ="input1"  
                   type="text" label={sf.label}>  </lightning-input>
               </div>
           </div> 
     </template> 
</template>

[ fieldSet.js ]

Import the getSearchFLS() from the class and use the same to populate the collection defined as searchParamsDemo[] and leveraged in relevant html layer to render the required input text with appropriate label. Demo 2, Drafted as a placeholder for calling multiple sets as required for the project. Static object name can be defined and retrieved through custom label as well in real implementation.

import getSearchFLS from '@salesforce/apex/Demo.getSearchFLS';

@api CONSTANT = {
        OBJ_DEMO1 : 'Demo1__c',
        OBJ_DEMO2 : 'Demo2__c',
        FIELDSET_DEMO1 : 'FIELDSET_DEMO1',
        FIELDSET_DEMO2 : 'FIELDSET_DEMO2'
}
@track searchParamsDemo =[];
@track isDefault= true;
try {
     let objectDemo1 = this.CONSTANT.OBJ_DEMO1;
     let fieldSetNameDemo1= this.CONSTANT.FIELDSET_DEMO1;
     // function getSearchFLS() used for Search option: Demo1
     getSearchFLS({objectTypeName: objectDemo1,
                   fieldSetName: fieldSetNameDemo1})
            .then((data) => {
                for(let i=0; I<data.length; i++)  {
                    this.searchParamsDemo = [...this.searchParamsDemo ,
                                   {Id: data[i][1], label: data[i][0], 
                                    type: data[i][2] } ];  
                    } 
            })
            // error handling
            .catch((error) => {
                console.log(error.message);
            }) ; 
        } catch (error) {
            console.log(error.message);            
      }

[ fieldSet.cls ]

At the controller layer you can define the logic to retrieve the fields associated with the fieldset using getField() and all the field’s label’s can be retrieved and return back to the Java Script (JS) layer calling method. Demo 2 considered as placeholder for this class as well which can be leveraged based on demand. Static object name can be defined and retrieved through custom label as well in real implementation.

//define static final var
static final String OBJ_DEMO1 = 'Demo1__c';
static final String OBJ_DEMO2 = 'Demo2__c';
   //getSearchFLS()
    @AuraEnabled(cacheable = true)
    public static List<List<String>> getSearchFLS(String objectTypeName, 
          String fieldSetName) {
     //define local vars
        string labelString;
        string apiNameString;
        string typeString;
       List<SObject> result = new List<SObject> ();
     // list to store fieldset details
        List<List<String>> result = new List<List<String>> ();
        try {
            for (Schema.FieldSetMember f : getCmSearchFLd(objectTypeName, 
                fieldSetName)) {
                labelString = f.Label;
                apiNameString = f.getFieldPath();
                result.add(new List<String> { labelString, apiNameString });
            }    
        }        
        catch(Exception e) {
            System.debug(e.getMessage());
        }  
       return result;      
    }
// getCmSearchFLd ()
public static List<Schema.FieldSetMember> getCmSearchFLd(String objectTypeName
                                                   , String fieldSetName) {
        List<Schema.FieldSetMember> fieldSetList;

        try {
            if (objectTypeName == OBJ_DEMO1) {
                fieldSetList = SObjectType.Demo1__c.FieldSets.
                                     Demo1_Search_Parameters.getFields();
            } else if (objectTypeName == OBJ_DEMO2) {
                fieldSetList = SObjectType.Demo2__c.FieldSets.
                                     Demo2_Search_Parameters.getFields();
            }
        }
        catch(Exception e) {
            System.debug(e.getMessage());
        }          
        return fieldSetList;      
    }