前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Salesforce LWC学习(四十九) RefreshView API实现标准页面更新,自定义组件自动捕捉更新

Salesforce LWC学习(四十九) RefreshView API实现标准页面更新,自定义组件自动捕捉更新

作者头像
Zero-Zhang
发布2024-03-21 09:24:08
2470
发布2024-03-21 09:24:08
举报
文章被收录于专栏:salesforce零基础学习

本篇参考:

https://developer.salesforce.com/docs/platform/lwc/guide/data-refreshview.html

https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-refreshview.html

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007KX6dASAT

我们在前篇中讲述了两种标准页面更新的情况下,自定义页面如何捕捉以及如何操作Salesforce LWC学习(四十七) 标准页面更新以后自定义页面如何捕捉?

随着lwc的更新,我们同样可以通过 refreshView来进行捕捉和自定义组件的更新。

RefreshView API简单介绍

我们直接看一下例子然后进行一下分解:

RefreshViewSampleController: 方法用于获取Account的信息

代码语言:javascript
复制
public with sharing class RefreshViewSampleController {
    @AuraEnabled(cacheable=false)
    public static Account getAccount(String recordId) {
        Account accountItem = [SELECT Name,Industry,Phone from Account where Id = :recordId limit 1];
        system.debug(accountItem);
        return accountItem;
    }
}

refreshViewSample.html:显示Account的Name

代码语言:javascript
复制
<template>
    {accountName}
</template>

refreshViewSample.js: 用来获取Account信息,赋值Account Name以及注册和解除注册 RefreshHandler。这里我们细节的分析一下。

  1. 头部需要引入必要的方法。import {registerRefreshHandler,unregisterRefreshHandler } from "lightning/refresh"; 用来注册/取消注册在refresh process中的refresh handler.
  2. connectedCallback来注册refreshHandler。该方法有两个参数。
  • contextElement—(Required) 一个html element代表参与在刷新流程中的container,通常可以用this。
  • providerMethod—(Required) 一个函数,用于标识刷新过程开始时要调用的回调函数。 处理程序回调需要返回一个代表其特定元素的刷新状态的 Promise。
  1. disconnectedCallback来取消refreshHandler。

这里我们看一下第16行的注释。如果当前的org启用了lws,则使用目前的代码,如果当前的org没有启用lws,使用了lightning locker,则打开16行的注释并且将14行注释。

代码语言:javascript
复制
 1 import { LightningElement, track, wire, api } from "lwc";
 2 import getAccount from "@salesforce/apex/RefreshViewSampleController.getAccount";
 3 import {
 4   registerRefreshHandler,
 5   unregisterRefreshHandler
 6 } from "lightning/refresh";
 7 export default class refreshViewSample extends LightningElement {
 8   accountName;
 9   refreshHandlerID;
10   @api recordId;
11 
12   connectedCallback() {
13     // Session Setting --> Use Lightning Web Security for Lightning web components and Aura components
14     this.refreshHandlerID = registerRefreshHandler(this, this.refreshHandler);
15     // if the component runs in an org with Lightning Locker instead of LWS, use
16     // this.refreshHandlerID = registerRefreshHandler(this.template.host, this.refreshHandler.bind(this));
17     this.retrieveAccount();
18   }
19 
20   disconnectedCallback() {
21     unregisterRefreshHandler(this.refreshHandlerID);
22   }
23 
24   refreshHandler() {
25     return new Promise((resolve) => {
26       this.retrieveAccount();
27       resolve(true);
28     });
29   }
30 
31   retrieveAccount() {
32     getAccount({ recordId: this.recordId })
33       .then((result) => {
34         this.accountName = result.Name;
35       })
36       .catch((error) => {
37         console.log("execute error");
38       });
39   }
40 }

效果展示:

除这种system/app-trigger以外,还可以是两个组件间的触发方式。比如一个组件去this.dispatchEvent(new RefreshEvent()); 另外一个组件进行注册以及处理。这种场景不在本篇的范围,感兴趣的小伙伴可以自行尝试。

总结:篇中通过一个demo来介绍RefreshView API的两个方法以及所可以达到的标准页面更新,自定义组件进行捕捉的demo。使用这个功能需要启用 lightning locker或者lightning web security,此api还有一些其他的方法以及一些限制没有讲,只是抛砖引玉,感兴趣的小伙伴可以自行查看文档。篇中有错误地方欢迎指出,有不懂欢迎留言。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档