Here is an approach that leverages lightning/uiRecordApi
to get all relevant data and does not rely on a lightning-record-edit/view-form.
@op: please ignore fieldNames in screenshot :)
XML
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Section with Fields</masterLabel>
<targets>
<target>
lightning__RecordPage
</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<property name="fieldNames" label="Field Names" type="String" required="true" default="Name,Industry,NumberOfEmployees" description="Commma seperated list of fully qualified API fieldnames that should be displayed in this section" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
HTML
<template>
<lightning-card title="Get Field Values" icon-name="standard:question_best">
<div class="slds-card__body_inner">
<h2 class="slds-text-heading_small">
Current Settings
</h2>
<p>
recordId: {recordId} / objectApiName: {objectApiName} /
configuredFields: {fieldNames}
</p>
<h2 class="slds-text-heading_small slds-var-m-top_medium">
Field Values
</h2>
<template for:each={results} for:item="field">
<p key={field.fieldName}>{field.fieldName}: {field.value}</p>
</template>
</div>
<template if:true={errorMessage}>
<pre>{errorMessage}</pre>
</template>
</lightning-card>
</template>
JS
import { LightningElement, api, wire } from "lwc";
import { getRecordUi } from "lightning/uiRecordApi";
export default class RecordpageSection extends LightningElement {
@api
fieldNames;
@api
recordId;
@api
objectApiName;
apiFieldnames = [];
errorMessage;
results = [];
connectedCallback() {
this.fieldNames.split(",").forEach(fieldName => {
this.apiFieldnames.push(this.objectApiName + "." + fieldName);
});
}
@wire(getRecordUi, {
recordIds: "$recordId",
layoutTypes: "Compact",
modes: "View",
optionalFields: "$apiFieldnames"
})
recordInformation({ error, data }) {
if (data) {
let fieldInfo = data.records[this.recordId].fields;
let matchingFields = [];
Object.keys(fieldInfo).forEach(fieldName => {
let qualifiedFieldname = this.objectApiName + "." + fieldName;
//originalIndex is used to sort results as configured
let originalIndex = this.apiFieldnames.indexOf(qualifiedFieldname);
if (originalIndex > -1) {
matchingFields[originalIndex] = {
fieldName: fieldName,
value: fieldInfo[fieldName].value
};
}
});
this.results = matchingFields;
} else if (error) {
this.errorMessage = JSON.stringify(error);
}
}
}