Embedding two record-view-form components

Key Features:
✅ Displays Parent Object and Child Object layouts one below the other.
✅ Uses lightning-record-view-form to fetch and display fields dynamically.
✅ Styled for a clear visual separation.
✅ Reusability—Can be used with different objects dynamically.

<script>
import { LightningElement, api, wire } from 'lwc';
import { getRecordUi } from 'lightning/uiRecordApi';

export default class RecordLayouts extends LightningElement {
    @api parentRecordId;
    @api parentObjectApiName;
    @api childRecordId;
    @api childObjectApiName;

    parentSections = [];
    childSections = [];

    // Fetch Parent Object Layout
    @wire(getRecordUi, { recordIds: '$parentRecordId', layoutTypes: 'Full', modes: 'View' })
    wiredParentRecord({ data, error }) {
        if (data) {
            const recordId = Object.keys(data.layouts[this.parentObjectApiName])[0]; // Get the dynamic record ID
            const layoutData = data.layouts?.[this.parentObjectApiName]?.[recordId]?.Full?.View?.sections; // Access the sections array
            
            this.parentSections = this.extractSectionsWithFields(layoutData);
        } else if (error) {
            console.error('Error fetching Parent record UI:', error);
        }
    }

    // Fetch Child Object Layout
    @wire(getRecordUi, { recordIds: '$childRecordId', layoutTypes: 'Full', modes: 'View' })
    wiredChildRecord({ data, error }) {
        if (data) {
            const recordId = Object.keys(data.layouts[this.childObjectApiName])[0]; // Get the dynamic record ID
            const layoutData = data.layouts?.[this.childObjectApiName]?.[recordId]?.Full?.View?.sections; // Access the sections array
            
            this.childSections = this.extractSectionsWithFields(layoutData);
        } else if (error) {
            console.error('Error fetching Child record UI:', error);
        }
    }

    // Extract Sections with Fields
    extractSectionsWithFields(sections) {
        let extractedSections = [];
        if (sections && Array.isArray(sections)) {
            sections.forEach(section => {
                let fields = [];
                section.layoutRows?.forEach(row => {
                    row.layoutItems?.forEach(item => {
                        item.layoutComponents?.forEach(component => {
                            if (component.apiName) {
                                fields.push({
                                    label: component.label,
                                    fieldName: component.apiName
                                });
                            }
                        });
                    });
                });

                extractedSections.push({
                    sectionName: section.label || "Section",
                    fields: fields
                });
            });
        } else {
            console.warn("No valid sections found in layout data.");
        }
        return extractedSections;
    }
}
</script>



<template>
    <div class="layout-container">
        <!-- Parent Object Layout -->
        <div class="record-layout">
            <lightning-card title="Parent Record">
                <template if:true={parentSections}>
                    <template for:each={parentSections} for:item="section">
                        <div key={section.sectionName} class="section-container">
                            <h3>{section.sectionName}</h3>
                            <lightning-record-view-form record-id={parentRecordId} object-api-name={parentObjectApiName}>
                                <div class="fields-container">
                                    <template if:true={section.fields}>
                                        <template for:each={section.fields} for:item="field">
                                            <div key={field.fieldName} class="field-item">
                                                <lightning-output-field field-name={field.fieldName}>
                                                </lightning-output-field>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                            </lightning-record-view-form>
                        </div>
                    </template>
                </template>
            </lightning-card>
        </div>

        <!-- Child Object Layout -->
        <div class="record-layout">
            <lightning-card title="Child Record">
                <template if:true={childSections}>
                    <template for:each={childSections} for:item="section">
                        <div key={section.sectionName} class="section-container">
                            <h3>{section.sectionName}</h3>
                            <lightning-record-view-form record-id={childRecordId} object-api-name={childObjectApiName}>
                                <div class="fields-container">
                                    <template if:true={section.fields}>
                                        <template for:each={section.fields} for:item="field">
                                            <div key={field.fieldName} class="field-item">
                                                <lightning-output-field field-name={field.fieldName}>
                                                </lightning-output-field>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                            </lightning-record-view-form>
                        </div>
                    </template>
                </template>
            </lightning-card>
        </div>
    </div>
</template>





<style>
    .layout-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .record-layout {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
        background: #fff;
    }

    .section-container {
        margin-bottom: 20px;
    }

    .fields-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 15px;
    }

    .field-item {
        display: flex;
        align-items: center;
    }
</style>



<template>
    <div class="layout-container">
        <!-- Parent Object Layout -->
        <div class="record-layout">
            <lightning-card title="Parent Record">
                <template if:true={parentFields}>
                    <template for:each={parentFields} for:item="field">
                        <lightning-output-field key={field.fieldName} field-name={field.fieldName}>
                        </lightning-output-field>
                    </template>
                </template>
            </lightning-card>
        </div>

        <!-- Child Object Layout -->
        <div class="record-layout">
            <lightning-card title="Child Record">
                <template if:true={childFields}>
                    <template for:each={childFields} for:item="field">
                        <lightning-output-field key={field.fieldName} field-name={field.fieldName}>
                        </lightning-output-field>
                    </template>
                </template>
            </lightning-card>
        </div>
    </div>
</template>