天天看點

wpf 修改label值_Salesforce LWC學習(十九) 針對 lightninginputfield的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/

在Salesforce LWC學習(五)  LDS & Wire Service 實作和背景資料互動 & meta xml配置 篇中,我們了解了 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綁定。

object-api-name='Account'
            onsubmit={saveEvent}
        >                        field-name="User_For_LookUp__c"
                        variant="label-stacked"
                    >                        field-name="Contact_For_Lookup__c"
                        variant="label-stacked"
                    >
           

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欄展示了傳回的内容。

wpf 修改label值_Salesforce LWC學習(十九) 針對 lightninginputfield的label值重寫

上面我們使用的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資訊即可,優化後代碼如下:

wpf 修改label值_Salesforce LWC學習(十九) 針對 lightninginputfield的label值重寫

 修改之後的展示效果:

wpf 修改label值_Salesforce LWC學習(十九) 針對 lightninginputfield的label值重寫

 總結:篇中主要描述如何對 lightning-input-field的label值進行修改,允許修改以後可以極大程度上保證了字段的複用性和可擴充性。篇中有錯誤地方歡迎指出,有不懂歡迎留言。