管理员如何配置自定义lightning-record-form LWC中的可用及可编辑字段

字段可配置权限问题 #

• 你选用lightning-record-form作为基础组件完全符合需求，该组件原生遵循Salesforce平台的权限体系，无需额外编码就能实现字段可见/编辑范围的控制。
• 管理员配置路径：进入Salesforce设置 → 对象管理器 → 找到「用户」对象 → 「字段与关系」，针对需要调整的字段设置字段级安全(FLS)，给不同简档/权限集分配对应字段的可见、编辑权限即可。lightning-record-form会自动读取当前登录用户的权限，无权限的字段不会展示，只读权限的字段无法编辑，完全匹配你的业务要求。
• 如果你需要实现脱离标准权限的自定义字段展示配置，可以给LWC增加设计时属性：在组件的js-meta.xml配置文件中新增一个字符串类型的公共属性，管理员将组件部署到页面时，直接在组件属性面板输入要展示的字段API名称列表，代码中把传入的字符串拆分成数组赋值给fields变量即可，无需修改代码就能调整表单字段。

移动端适配与样式覆盖问题 #

• lightning-record-form已经内置了响应式适配逻辑，默认就支持桌面端和移动端正常展示，你可以直接通过Salesforce移动端App或者浏览器开发者工具的移动端模拟功能测试效果。
• 可以覆盖原有样式，但受LWC的Shadow DOM限制，不能直接在组件CSS文件中修改组件内部样式，最稳妥的修改方式是调整SLDS提供的全局CSS变量，示例如下：

/* 组件的css文件 */
:host {
  /* 调整表单标签字体大小 */
  --lwc-formLabelFontSize: 0.875rem;
  /* 调整字段之间的间距 */
  --lwc-inputVerticalSpacing: 1rem;
}

如果没有强定制需求，不建议修改默认样式，避免后续Salesforce组件版本更新后出现兼容问题。

userProfileForm.js #

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import Id from '@salesforce/user/Id';
import USER_OBJECT from '@salesforce/schema/User';
import FIRSTNAME_FIELD from '@salesforce/schema/User.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/User.LastName'
import ALIAS_FIELD from '@salesforce/schema/User.Alias';
import EMAIL_FIELD from '@salesforce/schema/User.Email';
import USERNAME_FIELD from '@salesforce/schema/User.Username';
import NICKNAME_FIELD from '@salesforce/schema/User.CommunityNickname';
import TITLE_FIELD from '@salesforce/schema/User.Title';
import COMPANY_FIELD from '@salesforce/schema/User.CompanyName';
import DEPARTMENT_FIELD from '@salesforce/schema/User.Department';
import ADDRESS_FIELD from '@salesforce/schema/User.Address';
import PHONE_FIELD from '@salesforce/schema/User.Phone';
import MOBILE_FIELD from '@salesforce/schema/User.MobilePhone';
import TIMEZONE_FIELD from '@salesforce/schema/User.TimeZoneSidKey';
import LOCALE_FIELD from '@salesforce/schema/User.LocaleSidKey';
import LANGUAGE_FIELD from '@salesforce/schema/User.LanguageLocaleKey';

export default class UserProfileForm extends LightningElement {
    modeName = 'view'; // Sets mode to view in lightning-record-form
    objectApiName = USER_OBJECT;
    userId = Id; // Gets current user id from salesforce

    // Exposes fields to be made available in the form template
    fields = [
        FIRSTNAME_FIELD,
        LASTNAME_FIELD, 
        ALIAS_FIELD, 
        EMAIL_FIELD, 
        USERNAME_FIELD, 
        NICKNAME_FIELD, 
        TITLE_FIELD, 
        COMPANY_FIELD, 
        DEPARTMENT_FIELD, 
        ADDRESS_FIELD, 
        PHONE_FIELD, 
        MOBILE_FIELD,
        TIMEZONE_FIELD, 
        LOCALE_FIELD, 
        LANGUAGE_FIELD
    ];

    handleSubmit(event) {
        event.preventDefault(); // Stops form from submitting
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-form').submit(fields);
    }
    
    handleSuccess() {
        const toastEvent = new ShowToastEvent({
            title: "Updated Successfully",
            message: "User information has successfully been updated",
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }

    handleError() {
        const toastEvent = new ShowToastEvent({
            title: "Update Unsuccessful",
            message: "Something went wrong, please try again",
            variant: "error"
        })
        this.dispatchEvent(toastEvent);
    }
}

userProfileForm.html #

<template>
    <lightning-card title="User Information" icon-name="action:user">
        <lightning-record-form
            object-api-name={objectApiName}
            record-id={userId}
            fields={fields}
            mode={modeName}
            onsubmit={handleSubmit}
            onsuccess={handleSuccess}
            onerror={handleError}>
        </lightning-record-form>
    </lightning-card>
</template>

内容的提问来源于stack exchange，提问作者jackb