专栏首页salesforce零基础学习Salesforce LWC学习(十九) 针对 lightning-input-field的label值重写

Salesforce LWC学习(十九) 针对 lightning-input-field的label值重写

本篇参考:

https://salesforcediaries.com/2020/02/24/how-to-override-lightning-input-field-label-in-lightning-web-component/

https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/documentation

https://www.lightningdesignsystem.com/components/input/

https://www.cnblogs.com/zero-zyq/p/11380449.html 篇中,我们了解了 LDS的使用,其中让我们用起来很爽的莫过于使用lightning-input-field。

lightning-input-field因为他独特的魅力深受开发人员喜爱,看到了他,莫名的让人会想起 lightning:inputField以及apex:inputField,字段类型声明什么无所谓,只需要使用此标签绑定字段便可以渲染成需要的标准页面的效果。使用时需要将其放在 lightning-record-edit-form中,当然,使用 lightning-record-edit-form搭配 lightning-input-field时需要考虑几点:

1. 当前 user对 lighting-record-edit-form绑定的表应该有 create或者edit权限;

2. 当前的 user应该对 lightning-input-field绑定的字段有 visible的权限。

3. lightning-record-edit-form不是支持所有的表,只有在其允许使用的表中才可以使用此标签以及此字段,比如 Event/Task就不支持这个组件,对Event / Task就没法使用 lightning-event-edit-form以及 lightning-input-field;

4. lightning-input-field不是支持所有的字段类型,尽管大部分都支持,但是有一小部分还是不支持的,比如 master-detail类型。

说完限制,再说一下使用场景。lightning-record-edit-form 通常可以用在两种情况:

1. 自定义编辑页面

2. 检索列表功能中的form查询页面

所以针对具体的需求进行适当的使用亦或废弃找其他的解决方案基于这些限制以及这些功能,我们根据不同的case去进行不同的封装。

比如表单中只是针对 text/currency等等类型,我们可以使用 lightning-input,针对 picklist我们可以使用 lightning-combobox,这种基础类型换其他方案问题不大。

但是如果表单中存在针对 lookup这种弹出组件时,我们却很为难,因为除了 lightning-input-field以外,其他的没有直接的办法去展示以及实现此种功能。自定义的组件虽可以完成大部分其需要的功能,却无法和标准的相匹配,所以此种情况很容易借壳搞定类似需求。

如何借壳? 需要满足哪些条件?

1. 在lightning-record-edit-form支持的表中创建 lookup字段,关联到需要选择的表,比如自定义表中创建一个字段,关联到user;

2. 保证当前的这个表对可以访问此组件的 所有的 profile都有 创建或者编辑数据的权限,如果没有创建或者编辑的权限, lightning-record-edit-form绑定此表没有编辑的能力和效果;

3. 保证可以访问此组件的所有的 profile对创建的这个字段的 FLS都要editable。

我们在Account表中创建两个字段,分别为User_For_LookUp__c关联到User表以及Contact_For_Lookup__c用来关联到Contact表。

eventCreate.html:用于关联需要创建Event的几个字段,因为Event不能使用 lightning-record-edit-form,所以将 暂时绑定 到Account,OwnerId使用 User_For_LookUp__c借壳绑定,WhoId使用Contact_For_Lookup__c绑定。

<template>
    <lightning-card>
        <lightning-record-edit-form 
            object-api-name='Account' 
            onsubmit={saveEvent}
        >
            <lightning-layout multiple-rows="true">
                <lightning-layout-item size="6" padding="around-small" flexibility='auto'>
                    <lightning-input type="text" label="Subject" name="subject" value={eventWrapper.subject} onchange={handleInputChange}></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="6" padding="around-small" flexibility='auto'>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small" flexibility='auto' size='6'>
                    <lightning-input label="Start Date" type="datetime" name="startDateTime" value={eventWrapper.startDateTime} date-style="long" required onchange={handleInputChange}></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small" flexibility='auto' size='6'>
                    <lightning-input label="End Date" type="datetime" name="endDateTime" value={eventWrapper.endDateTime} date-style="long" required onchange={handleInputChange}></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="6" padding="around-small" flexibility='auto'>
                    <lightning-input-field
                        field-name="User_For_LookUp__c"
                        variant="label-stacked"
                    ></lightning-input-field>
                </lightning-layout-item>
                <lightning-layout-item size="6" padding="around-small" flexibility='auto'>
                    <lightning-input-field
                        field-name="Contact_For_Lookup__c"
                        variant="label-stacked"
                    ></lightning-input-field>
                </lightning-layout-item>
            </lightning-layout>
            <lightning-layout>
                <lightning-layout-item>
                    <lightning-button-group>
                        <lightning-button type="submit" label="Submit"></lightning-button>
                        <lightning-button label="cancel"></lightning-button>
                    </lightning-button-group>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-record-edit-form>
    </lightning-card>
</template>

eventCreate.js:当 saveEvent方法时,先组织默认提交,通过event.detail.fields可以获取到 record-edit-form中的所有的 lightning-input-field的绑定值内容,在给自定义的wrapper字段赋值传递到后台即可。

import { LightningElement,track } from 'lwc';

export default class EventCreate extends LightningElement {

    @track eventWrapper = {
        subject : '',
        whoId : '',
        ownerId : '',
        startDateTime : '',
        endDateTime : ''
    };

    handleInputChange(event) {
        let eventSourceName = event.target.name;
        if(eventSourceName === 'subject') {
            this.eventWrapper.subject = event.target.value;
        } else if(eventSourceName === 'startDateTime') {
            this.eventWrapper.startDateTime = event.target.value;
        } else if(eventSourceName === 'endDateTime') {
            this.eventWrapper.endDateTime = event.target.value;
        }
    }

    saveEvent(event) {
        event.preventDefault();
        const allFields = event.detail.fields;
        this.eventWrapper.whoId = allFields.User_For_LookUp__c;
        this.eventWrapper.ownerId = allFields.Contact_For_Lookup__c;
        console.log(JSON.stringify(this.eventWrapper));
    }

}

效果展示:当我们录入完基本信息点击 submit按钮以后,console栏展示了返回的内容。

上面我们使用的variant是label-stacked,可以看到User_For_LookUp__c字段展示的 label是 User For LookUp,但是我们想要展示他的值是 Owner Id,然而lightning-input-field中没有任何属性可以更改其label值,应该如何操作呢?这个时候可以看前辈们提供的方法了,原操作可以查看片头链接。

秘密就在variant中,lwc针对此组件存在一个variant为label-hidden,即不展示 label信息,我们只需要隐藏这个字段的label值,然后通过lightning design system中的提供方式重新布局展示想要的label信息即可,优化后代码如下:

修改之后的展示效果:

总结:篇中主要描述如何对 lightning-input-field的label值进行修改,允许修改以后可以极大程度上保证了字段的复用性和可扩展性。篇中有错误地方欢迎指出,有不懂欢迎留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作。之前的内容中也有提到wire注解,今天就详细的介绍一下对数...

    用户1169343
  • Aura Component Skills & Tools

    本篇参考: https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_vf_funda...

    用户1169343
  • Salesforce LWC学习(十) 前端处理之 list 处理

    本篇参看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Ob...

    用户1169343
  • Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作。之前的内容中也有提到wire注解,今天就详细的介绍一下对数...

    用户1169343
  • 用户流失,该怎么分析?

    有同学问:用户流失该怎么分析?用户流失率的数据可以算,可算出来以后呢?只看数据似乎完全看不出什么流失原因,只知道用户已经X个月没有来了,也不知道看到这个能干啥。...

    接地气的陈老师
  • 通过IP地址获取当前地理位置的接口(包含纬经度)

    直接访问:https://api.liguangchun.cn/api/v7/ip/ 就可以查询到了

    李光春
  • 用户流失,该怎么分析?

    有同学问:用户流失该怎么分析?用户流失率的数据可以算,可算出来以后呢?只看数据似乎完全看不出什么流失原因,只知道用户已经X个月没有来了,也不知道看到这个能干啥。...

    叫我龙总
  • 用户流失,该怎么分析?

    有同学问:用户流失该怎么分析?用户流失率的数据可以算,可算出来以后呢?只看数据似乎完全看不出什么流失原因,只知道用户已经X个月没有来了,也不知道看到这个能干啥。...

    数据森麟
  • 使用 Moq 测试.NET Core 应用 -- Mock 方法

    第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html

    solenovex
  • C#中datagirdview表头变换

    dataGridView1.CurrentRow.Selected = false;

    Dabelv

扫码关注云+社区

领取腾讯云代金券