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这个字段会被默认设置初始值。

salesforce零基础学习(一百一十二)项目中的零碎知识点小总结(四)_第1张图片

有的时候标准的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效果,可以成功的获取到这两个变量的值。

salesforce零基础学习(一百一十二)项目中的零碎知识点小总结(四)_第2张图片

这里有两个需要注意的点:

  • 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 Caseh2>
            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>Informationp>
                        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-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>

先放一个显示效果。

salesforce零基础学习(一百一十二)项目中的零碎知识点小总结(四)_第3张图片

这里说一下几个点。

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的方式以及一些常用样式的整理。篇中有错误欢迎指出,有不懂欢迎留言。

你可能感兴趣的:(salesforce零基础学习(一百一十二)项目中的零碎知识点小总结(四))