## EDIT ## To show/hide the child component based on field value dynamically based on fields. Follow the below steps. **Update JS with below code** Define one attribute named `fieldsData` like fieldsData = []; handleOnLoad(event) { const fValue = event.detail.records[this.recordId].fields.Industry.value; this.fieldsData = []; for (let [key, data] of Object.entries(event.detail.records[this.recordId].fields)) { console.log(JSON.stringify(data)); this.fieldsData.push({fieldApiName: key, ...data}); } } In HTML use the below code to show/hide your child component. This code will show the child component only if there is a value in the field. <template if:true={fieldsData} for:each={fieldsData} for:item="field"> <c-child-lwc key={field.fieldApiName} if:true={field.value}> </c-child-lwc> </template> > Use `lightning-record-edit-form/lightning-record-view-form` so the fields don't render by default, and you have freedom to show/hide the fields. ---------- ## Before Edit ## You dont need to use the `lightning-output-field` with `lightning-record-form`, `record-form` will automatically do it for you. Also you don't need to get the record using `getRecord` API, this is also auto done by `record-form`. **JS** import { LightningElement, wire, api } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; export default class DesignerFields extends LightningElement { @api indFields = 'Industry;NumberOfEmployees'; @api objectApiName = 'Account'; @api recordId; @api record; fieldsFormatted = ['Id']; connectedCallback() { this.fieldsFormatted = (this.indFields || 'Id').split(';').map(field => field); console.log(JSON.stringify(this.fieldsFormatted)); } handleOnLoad(event) { const fValue = event.detail.records[this.recordId].fields.Industry.value; //Q1: fValue = "Education" the correct value. But "Industry" Field Name is still hard coded. //How do I get the value for the field in {fld} variable? //Q2: How do I get fValue to render back in the HTML instead of the lightning-output-field //I tried this.dispatchEvent(fValue); and it had an error } } **HTML** <template> <lightning-card title="Design Attribute Demo" icon-name="custom:custom19"> <template if:true={fieldsFormatted}> <lightning-record-form record-id={recordId} object-api-name={objectApiName} mode="view" fields={fieldsFormatted} onload={handleOnLoad}> </lightning-record-form> </template> </lightning-card> </template>