salesforce零基礎學習（一百一十二）專案中的零碎知識點小總結（四）

zero.zhang發表於2022-03-12
Salesforce

本篇參考：

https://trailblazer.salesforce.com/issues_view?id=a1p4V0000003znDQAQ

https://salesforce.stackexchange.com/questions/223766/lightning-new-case-action-override

https://www.lightningdesignsystem.com/utilities/alignment/

本篇主要總結專案中的兩個知識點，分別是關聯列表的new button重寫，如何獲取主表ID 以及一些常用的樣式資訊。

一. 子表在關聯列表新建時獲取父表ID

比如說我們都知道 Case可以關聯到 Account 或者 Contact，所以我們在 Account和Contact的關聯列表可以新建Case，關聯列表新建時，會自動關聯這個欄位。比如我們在 Account的關聯列表新建Case的時候，Account這個欄位會被預設設定初始值。

有的時候標準的UI並不能滿足我們的需求，所以我們需要進行一些自定製，即重寫一下 New的button。目前lex下只允許通過aura重寫，所以即使使用lwc的情況下同樣需要aura套一個殼子來實現，所以如何來在新建的情況下獲取主表ID呢？大神同事發過來一串程式碼搞定，這裡也做一下彙總和覆盤。

 newCaseComponent.cmp：這裡有一個要求，除了實現 lightning:actionOverride以外，一定要實現 lightning:isUrlAddressable

<aura:component implements="lightning:actionOverride,lightning:isUrlAddressable">
    <aura:handler name="init" value="this" action="{!c.initialHandler}"></aura:handler>
    <aura:attribute name="parentRecordId" type="String"></aura:attribute>
    <aura:attribute name="parentObjectType" type="String"></aura:attribute>

    <c:newCaseLwc parentId="{!v.parentRecordId}" parentObjectType="{!v.parentObjectType}"></c:newCaseLwc>
</aura:component>

newCaseComponentController.js：這裡獲取了 pageRef.state的 inContextOfRef， 儘管網路上這個引數使用特別多，但是很遺憾，沒有找到詳細描述的官方文件，只有一個 salesforce article對它有一點簡單的描述，我們可以通過這個獲取到對應的value，這個value以 1. 為開始，後面的內容通過base64解碼以後，便會有這個父記錄的一些主要的資訊，比如 當前的 type， recordId, objectApiName等資訊。通過解析這個引數，我們便可以獲取到父表資料的資訊

({
    initialHandler : function(component, event, helper) {
        var pageRef = component.get("v.pageReference");
        var base64Context = pageRef.state.inContextOfRef;

        if (base64Context && base64Context.startsWith("1\.")) {
            base64Context = base64Context.substring(2);
        }
        if(base64Context) {
            var parentObjectContext = JSON.parse(window.atob(base64Context));
            // console.log(JSON.stringify(parentObjectContext));
            // {"type":"standard__recordPage","attributes":{"recordId":"0013g00000AFmcsAAD","actionName":"view","objectApiName":"Account"},"state":{}}
            if(parentObjectContext &&  parentObjectContext.attributes) {
                component.set('v.parentRecordId',parentObjectContext.attributes.recordId);
                component.set('v.parentObjectType',parentObjectContext.attributes.objectApiName);
            }
        }
        
    }
})

newCaseLwc.html： 只是簡單展示這兩個變數值

<template>
    parent id: {parentId}<br/>
    parent object type : {parentObjectType}
</template>

newCaseLwc.js

import { LightningElement, track,api, wire } from 'lwc';

export default class newCaseLwc extends LightningElement {
    @api parentId;
    @api parentObjectType;
}

當我們配置完 Case的New按鈕以後，當在 Account關聯列表點選 Case的new button以後，頭部的URL資訊為：

https://zhangyueqi-5-dev-ed.lightning.force.com/lightning/o/Case/new?inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7InJlY29yZElkIjoiMDAxM2cwMDAwMEFGbWNzQUFEIiwiYWN0aW9uTmFtZSI6InZpZXciLCJvYmplY3RBcGlOYW1lIjoiQWNjb3VudCJ9LCJzdGF0ZSI6e319&count=1

我們看一下UI效果，可以成功的獲取到這兩個變數的值。

這裡有兩個需要注意的點：

  • aura component一定要實現 url:isAddressable，否則無法獲取到 state；
  • 針對inContextOfRef的瞭解以及獲取，獲取以前非空判斷，防止前端報錯。

二. lwc常用的一點小樣式

 寫這個起源於專案中做的一些重寫標準button時發生的事情，很多都經常使用，但是寫的時候都是複製貼上一些既有的程式碼，所以整理一下，夯實一下。這裡針對幾個點進行講解，詳細的內容還是要不斷的看 lightning design system。這裡也只是挑幾個常用的點進行整理。我們先以一個例子進行展開，對上述的newCaseLwc進行內容填充一下。

newCaseLwc.js：針對不同詳情頁點選相關列表設定一下不同的初始值。

import { LightningElement, track,api, wire } from 'lwc';

export default class newCaseLwc extends LightningElement {
    @api parentId;
    @api parentObjectType;
    accountId;
    contactId;

    connectedCallback() {
        if(this.parentObjectType === 'Account') {
            this.accountId = this.parentId;
        } else if(this.parentObjectType === 'Contact') {
            this.contactId = this.parentId;
        }
    }
}

newCaseLwc.html：展示一個case的新建的表單，只展示了幾個欄位。

<template>

    <lightning-record-edit-form
        object-api-name="Case"
        >
        <div class="slds-modal__container" style="position: relative;height: 500px;width: 100%;padding: unset;">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">New Case</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">

                <lightning-layout multiple-rows="true">
                    <lightning-messages> </lightning-messages>
                    <lightning-layout-item padding="horizontal-small" size="12">
                        <div class="slds-section__title slds-theme--shade">
                          <p>Information</p>
                        </div>
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="AccountId" value={accountId}></lightning-input-field> 
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="ContactId" value={contactId}></lightning-input-field> 
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="Subject"></lightning-input-field> 
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="Origin"></lightning-input-field> 
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="Reason"></lightning-input-field> 
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small" flexibility="auto" size="6">
                       <lightning-input-field field-name="Priority"></lightning-input-field> 
                    </lightning-layout-item>
                </lightning-layout>
            </div>
            <div class="slds-modal__footer">                
                <!-- <div class="slds-grid slds-grid_align-center"> -->
                <div class="slds-clearfix slds-float_right">
                    <lightning-button  class="slds-m-left_x-small" label="Cancel"></lightning-button>
                    <lightning-button type="submit" class="slds-m-left_x-small"  label="Save & New"></lightning-button>
                    <lightning-button type="submit"  class="slds-m-left_x-small" variant="brand" label="Save"></lightning-button>
                </div>
            </div>
        </div>
    </lightning-record-edit-form>
</template>

先放一個顯示效果。

這裡說一下幾個點。

1. button對齊的設定：我們在專案中常用的button對齊方式有居中對齊或者居右對齊(當然偶爾也有左對齊)，那麼如何來設定？

針對居中對齊和左對齊，我們可以使用兩種方式。

  • 使用 slds-grid以及slds-grid_align-center組合來實現居中對齊，當然，如果只使用 slds-grid實現的是左對齊；
  • 使用 slds-align_absolute-center / slds-float_left / slds-float_right來實現居中/左/右對齊。這兩種也趨向於這種方式。使用 slds-float_left/right如果不起作用，可以搭配slds-clearfix一起使用。

2. 元件中的margin/padding設定：我們看到圖中的button都是有一點距離的，使用的是slds-m-left_x-small來實現。這裡可以參考文件：https://www.lightningdesignsystem.com/utilities/margin/，通過文件，我們可以看到，如果我們將m 改成了 p，即設定的是元件中的padding，除了small以及left之外，我們還可以設定很多種大小和位置，還可以設定 around / horizontal資訊等等。

3. 仿layout中的section：我們知道 record-form預設是不會帶過來section資訊，這也是廣大開發詬病的一點。實際客戶可能並不買賬，所以可能會使用 record-edit-form來開發，那樣我們就可以使用slds-section__title 樣式來模擬section區域。

當然，demo中的內容都是在lightning design system中可以很好的查到的，沒事也可以多刷一刷 lds中的 Utilities內容。

總結：篇中主要整理了一下 related 區域按鈕重寫如何獲取父表ID的方式以及一些常用樣式的整理。篇中有錯誤歡迎指出，有不懂歡迎留言。

相關文章