四十 Salesforce LWC学习 dynamic interaction 浅入浅出 _生活百科

本篇参考：
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如下图所示

文章插图
本来这个是一个没啥好说的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的使用方法
【四十 Salesforce LWC学习 dynamic interaction 浅入浅出】我们以下面的demo进行讲解，下图是 Dream House的组件组成部分。我们所需要用到以及改动的是propertyTileList以及 proprtySummary

文章插图
我们先修改一下 propertySummary的代码。
propertySummary.html: lightning-record-form 增加了 onsuccess逻辑
<lightning-record-formobject-api-name="Property__c"record-id={propertyId}fields={propertyFields}columns="2"onsuccess={handleSuccessAction}></lightning-record-form>