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值進行修改，允許修改以后可以極大程度上保證了字段的復用性和可擴展性。篇中有錯誤地方歡迎指出，有不懂歡迎留言。