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

时间:2022-10-29 07:08:20

本篇参考:

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

Salesforce Help | Article

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如下图所示

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

本来这个是一个没啥好说的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

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

我们先修改一下 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="http://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="http://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。

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

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

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

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

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

至此配置完成。结果展示如下:

1. 我们点击了一个item,右侧进行编辑,将3更改成2.

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

2. save以后,左侧的列表也会自动的变更。

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

总结: dynamic interaction目前支持性还是有限,但是salesforce按照目前的情况后续还会不断的增强。了解目前的限制以及如何实现就OK,期待后续可以更多的使用场景以及更少的限制。篇中有错误欢迎指出,有不懂欢迎留言。