0

I would like to preface this by stating that I only started Salesforce development about a month ago so forgive me if this an obvious questions.

Here is my problem:

I currently use an apex method to get field data from a fieldset in a JSON string and would like to display these fields and their picklist options in lightning comboboxes. I cannot assume the number of fields in the fieldset or the type of the fields or the values for the picklist.

I see that in the documentation (https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example) the options for the combobox are directly pulled from a variable in the javascript but I would like to make it such that they are static and can be contructed in javascript.

I have tried using 'for:each' and directly manipulating the JSON string of the fields in the html, but no luck. Instead I am opting to loop through the fields in the JSON and would like to construct the combobox while looping and add it to the DOM. Is it possible to create the combo box from the javascript and add it to the DOM? Also, what are the best practices when wanting to add elements to the DOM.

questions.js

@wire(getQuestions, {objectName: 'Questions', fieldSetName: 'DND'})
questions;

if (questions) {
    const obj = JSON.parse(questions);
    var field = obj[0]
    var label = field.fieldLabel;
    var fieldAPIName = field.fieldAPIName;
    var options = []
    field.pickListValues.forEach(optionValues => {
        options.push({label: optionValues.label, value: optionValues.value})
    });
    var element =   '<lightning-combobox ' +
                    'name="' + fieldAPIName + '" '
                    'label="' + label + '" ' +
                    'placeholder="Select answers" ' +
                    'options=' + options +
                    '></lightning-combobox>';
    
    document.getElementById('question-box').appendChild(element);
}

questions.html

<template>
    <lightning-card  title="Screening Questions">
        <template id="question-box" if:true={questions.data}>
        </template>
    </lightning-card>
</template>
1
  • 1
    Fundamentally LWC does not support dynamic element creation. However, you can pass properties from the parent component into (API) properties of child components. You'll need to use that template for:each approach to deal with this, generating an appropriate array of JavaScript objects from which to obtain the necessary parameters for each child component in turn. Each object will need to include a means to select which type of child component to render. This is a reasonable place to start.
    – Phil W
    Jun 7 at 21:31
0

For those who may be interested in my solutions, I created an array of objects that could be referenced from the HTML using the for:each directive.

question.js

export default class questions extends LightningElement {
    questions = [];

    @wire(getQuestions, {objectName: 'Questions', fieldSetName: 'DND'})
    getQuestions({data}){
        if (data) {
            const json = JSON.parse(data);
            console.log(json)
            json.forEach(obj => {
                var fieldLabel = '';
                var options = [];
                var value = '';
                var APIName = '';
                var fieldType = '';
                var picklist = false;
                var multipicklist = false;
    
                console.log(obj);
                APIName = obj.fieldAPIName;
                fieldLabel = obj.fieldLabel;
                fieldType = obj.fieldType;

                if (fieldType == 'PICKLIST'){ picklist = true;}
                else if (fieldType == 'MULTIPICKLIST'){ multipicklist = true; }
            
                obj.pickListValues.forEach(optionValue => {
                    var pickListOptions = {}
                    Object.assign(pickListOptions, {label: optionValue.label});
                    Object.assign(pickListOptions, {value: optionValue.value});
                    options = [...options, pickListOptions];
                });
                var questionObj = {};
                
                Object.assign(questionObj, {options: options});
                Object.assign(questionObj, {fieldLabel: fieldLabel});
                Object.assign(questionObj, {value: value});
                Object.assign(questionObj, {name: APIName});
                Object.assign(questionObj, {fieldType: fieldType});
                Object.assign(questionObj, {picklist: picklist});
                Object.assign(questionObj, {multipicklist: multipicklist});
                this.questions = [...this.questions, questionObj]
            });
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.