Salesforce LWC學習(四十) dynamic interaction 淺入淺出

本篇參考：

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

我們使用標準的 template，然後將這兩個元件拖動出來。這裡選中了 propertyTileSummary元件以後，右側就可以顯示 Interaction 這個 Tab，我們就可以點選 Add Interaction去設定 dynamic interaction.

這裡source以及event是沒法更改的，目前 interaction只支援Update Properties，後續有可能會新增。updateTimeStamp使用 {!event.}的方式進行動態的賦值。實現propertySummary的事件註冊以後，就會將變數動態互動賦值給 propertyTileList的updateTimeStamp變數。我們將這個欄位設定了set，只要有變數，就refreshApex，從而實現只要右側元件更新，左側的列表也會自動的更新。

至此設定完成。結果展示如下：

1. 我們點選了一個item，右側進行編輯，將3更改成2.

2. save以後，左側的列表也會自動的變更。

總結： dynamic interaction目前支援性還是有限，但是salesforce按照目前的情況後續還會不斷的增強。瞭解目前的限制以及如何實現就OK，期待後續可以更多的使用場景以及更少的限制。篇中有錯誤歡迎指出，有不懂歡迎留言。