Salesforce LWC学习(四十) dynamic interaction 浅入浅出

2022 年 10 月 28 日
筆記
lightning学习, LWC, salesforce&apex, salesforce学习

本篇参考：

Configure a Component for Dynamic Interactions in the Lightning App Builder – Salesforce Lightning Component Library

GitHub – trailheadapps/dreamhouse-lwc: Sample application for Lightning Web Components on Salesforce Platform. Part of the sample gallery. Real estate use case. Get inspired and learn best practices.

Salesforce LWC学习(三十) lwc superbadge项目实现

背景描述： 我们今天看的demo是salesforce的dream house的UI，这个demo在 salesforce developer gallary中可以查询到，上述的git hub是它的源代码。主要功能是一个卖房的应用，可以通过条件查询需要的房源，点击房源可以查看到房源详情以及中介详情等信息，和我们之前做的superbadge整体功能很相似，使用到的技术以及排版等基本相同，即一个 lightning app builder中有几个 lwc component，通过message channel进行组件间通讯。大概UI如下图所示

本来这个是一个没啥好说的demo，但是眼神好的我看到了右侧的详情页面是可以编辑的。因为详情页的组件使用的 lightning-record-form，只要有权限，就会展示编辑页面。问题就来了。

1. 如果右侧的信息更改了，中间的内容是否可以动态改变呢？

2. 如果中间内容不能级联改变的话，需要什么样的交互方式可以通知他进行动态改变呢？

针对以上的两个问题，第一个是当前的代码肯定没法动态改变，所以我们需要改变我们的代码。第二个问题，我们可以使用message channel，但除了 message channel以外，我们还有没有其他的方式进行跨组件交互呢？这里引出了我们今天的主角： Dynamic Interaction.

一. Dynamic Interaction

我们应该在今年年初的新闻中，就可能看到过salesforce针对 lightning app builder要推出一个low code工具用来实现不同组件之间的交互。使用Dynamic Interaction，Lightning页面上某个组件中发生的事件，例如用户单击列表视图中的某个item，可以更新页面上的其他组件。Dynamic Interactions允许管理员使用基于用户交互的组件创建应用程序，所有这些组件都在Lightning App Builder UI中进行通信和转换。官方的demo中，举得是列表点击，详情页展示的demo，类似于了 message channel的功能。那Dynamic Interaction 有什么需要考虑的？

当目标组件的属性显示在事件属性编辑器中时，将忽略目标组件中的信息组件。
如果为包含动态交互的页面切换页面模板，则可用模板列表仅显示支持动态交互的模板。
当触发以Aura Component为目标的交互时，Aura Component会重新渲染。
在富文本编辑器中输入表达式时，autocomplete不起作用。
组件的事件元数据在Lightning页面上使用或作为托管包的一部分发布后，不允许进行某些破坏性更改，例如删除事件、重命名属性或更改属性类型。

有什么限制呢？

Dynamic interaction 目前只支持在 app page
只有LWC自定义组件可以是事件源，但页面上出现的任何组件（Aura或LWC）都可以是目标组件。
基于自定义页面模板的页面不支持Dynamic Interaction(目前只能使用官方的那几个标准的 app template)。
只有String和Rich Text类型的属性可以使用表达式来定义它们的值。
Event是交互中表达式支持的唯一上下文。
只能对String、Integer和Boolean类型的属性使用表达式。
不能将目标属性值设置为数组或列表，例如多选选择列表。
可以使用metadata API将String属性的目标属性值设置为空，但不能在Lightning App Builder UI中设置。
Dynamic Interaction在Salesforce移动应用程序或传统平板电脑移动体验中的Mobile Only应用程序中不起作用。
当依赖属性根据所做的选择或在另一个属性中输入的值自动填充时，除非通过单击或tab 去 focus在依赖属性字段，否则不会保存自动填充的值。

所以使用之前需要注意了解这些限制，否则配置完成以后很容易产生困惑为什么不生效。

二. Dynamic Interaction的使用方法

我们以下面的demo进行讲解，下图是 Dream House的组件组成部分。我们所需要用到以及改动的是propertyTileList以及 proprtySummary

我们先修改一下 propertySummary的代码。

propertySummary.html: lightning-record-form 增加了 onsuccess逻辑

<lightning-record-form
      object-api-name="Property__c"
      record-id={propertyId}
      fields={propertyFields}
      columns="2"
      onsuccess={handleSuccessAction}
>
</lightning-record-form>

propertySummary.js: 增加这个方法，创建一个自定义的事件。

handleSuccessAction(event) {
        let updatePropertyId = JSON.stringify(new Date());
        const itemUpdated = new CustomEvent('itemUpdated', {
            detail: {updateTimeStamp: updatePropertyId}
        });
        this.dispatchEvent(itemUpdated);
}

propertySummary.js-meta.xml：在 targetConfig 为 lightning_AppPage下，增加以下粗体的 event属性以及schema属性。其中 property内容设置我们要传递的参数

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="//soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Property Summary</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
            <event name="itemUpdated" label="Item Updated" description="This event fires when an item is Updated.">
                <schema>
                    {
                        "type": "object",
                        "properties": {
                            "updateTimeStamp": {
                                "type": "string",
                                "title": "Update timestamp",
                                "description": "changed time stamp value"
                            }
                       }
                    }
                </schema>
            </event>
            
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Property__c</object>
            </objects>
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

propertyTileList.js:

import { LightningElement, wire,track,api } from 'lwc';
import {
    publish,
    subscribe,
    unsubscribe,
    MessageContext
} from 'lightning/messageService';
import FILTERSCHANGEMC from '@salesforce/messageChannel/FiltersChange__c';
import PROPERTYSELECTEDMC from '@salesforce/messageChannel/PropertySelected__c';
import getPagedPropertyList from '@salesforce/apex/PropertyController.getPagedPropertyList';
import { refreshApex } from '@salesforce/apex';

const PAGE_SIZE = 9;

export default class PropertyTileList extends LightningElement {
    pageNumber = 1;
    pageSize = PAGE_SIZE;

    searchKey = '';
    maxPrice = 9999999;
    minBedrooms = 0;
    minBathrooms = 0;

    @track clickedPropertyId;

    @track previousTimeStamp;

    @api set updateTimeStamp(value) {
        if(this.previousTimeStamp != value) {
            refreshApex(this.properties);
            this.previousTimeStamp = value;
        }
    }

    get updateTimeStamp() {
        return this.previousTimeStamp;
    }


    @wire(MessageContext)
    messageContext;

    properties;

    @wire(getPagedPropertyList, {
        searchKey: '$searchKey',
        maxPrice: '$maxPrice',
        minBedrooms: '$minBedrooms',
        minBathrooms: '$minBathrooms',
        pageSize: '$pageSize',
        pageNumber: '$pageNumber'
    })
    wiredProperties(result) {
        this.properties = result;
    }

    

    connectedCallback() {
        this.subscription = subscribe(
            this.messageContext,
            FILTERSCHANGEMC,
            (message) => {
                this.handleFilterChange(message);
            }
        );
    }



    disconnectedCallback() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }

    handleFilterChange(filters) {
        this.searchKey = filters.searchKey;
        this.maxPrice = filters.maxPrice;
        this.minBedrooms = filters.minBedrooms;
        this.minBathrooms = filters.minBathrooms;
    }

    handlePreviousPage() {
        this.pageNumber = this.pageNumber - 1;
    }

    handleNextPage() {
        this.pageNumber = this.pageNumber + 1;
    }

    handlePropertySelected(event) {
        const message = { propertyId: event.detail };
        this.clickedPropertyId = message;
        this.updateTimeStamp = message;
        publish(this.messageContext, PROPERTYSELECTEDMC, message);
    }
}

propertyTileList.js-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="//soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Property Tile List</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="updateTimeStamp" type="String"></property>
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

以上是代码改动部分。接下来是配置部分。因为这个是自定义的 template的 lightning app page，所以并不支持 dynamic interaction。

我们使用标准的 template，然后将这两个组件拖动出来。这里选中了 propertyTileSummary组件以后，右侧就可以显示 Interaction 这个 Tab，我们就可以点击 Add Interaction去设置 dynamic interaction.

这里source以及event是没法更改的，目前 interaction只支持Update Properties，后续有可能会新增。updateTimeStamp使用 {!event.}的方式进行动态的赋值。实现propertySummary的事件注册以后，就会将变量动态交互赋值给 propertyTileList的updateTimeStamp变量。我们将这个字段设置了set，只要有变量，就refreshApex，从而实现只要右侧组件更新，左侧的列表也会自动的更新。