1. 首頁 > 生活百科 > >

四十 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如下圖所示

四十 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的使用方法
【四十 Salesforce LWC學習 dynamic interaction 淺入淺出】我們以下面的demo進行講解，下圖是 Dream House的組件組成部分 。我們所需要用到以及改動的是propertyTileList以及 proprtySummary
四十 Salesforce LWC學習 dynamic interaction 淺入淺出

文章插圖
我們先修改一下 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>

推薦閱讀