本篇参考:

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的信息

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

<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。

3. disconnectedCallback来取消refreshHandler。

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

 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还有一些其他的方法以及一些限制没有讲,只是抛砖引玉,感兴趣的小伙伴可以自行查看文档。篇中有错误地方欢迎指出,有不懂欢迎留言。

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

  1. Salesforce LWC学习(四十二) getRecordNotifyChange已弃用

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_get ...

  2. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

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

    本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Light ...

  4. Salesforce LWC学习(二十九) getRecordNotifyChange(LDS拓展增强篇)

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_ui_api https ...

  5. Salesforce LWC学习(四十) datatable的dynamic action的小坑浅谈

    本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentatio ...

  6. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  7. Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...

  8. Salesforce LWC学习(二十六) 简单知识总结篇三

    首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 inpu ...

  9. Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...

  10. Salesforce LWC学习(二十四) Array.sort 浅谈

    本篇参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sal ...

随机推荐

  1. Linux-yum卸载软件包

    yum是Linux操作系统中最常用的软件包管理器之一,它可以帮助你很容易地安装.删除和更新软件包.然而,有时候yum在删除软件包时可能会出现一些问题,本文将告诉你如何正确地使用yum卸载软件包,并解决 ...

  2. SP10050 POWTOW - Power Tower City 题解

    题目传送门 前置知识 扩展欧拉定理 解法 本题幂塔是有限层的,这里与 luogu P4139 上帝与集合的正确用法 中的无限层幂塔不同,故需要在到达递归边界 \(n+1\) 时进行特殊处理,对于处理 ...

  3. SSD 简介—— NAND 芯片介绍

    制作 存储芯片的制作和其他芯片制作大致相同,从沙子中提取单晶硅制作晶圆再封装芯片. 闪存芯片从架构上分为NOR和NAND NOR Flash的source line把每个cell都并联起来,而NAND ...

  4. 解决邮件客户端QQ Mail及Thunderbird无法登入Outlook的问题

    最近无论是安卓手机的邮件客户端, 或者是 Ubuntu 下的 Thunderbird 都无法登入 Outlook 账号, 原因是需要开启双因素验证. 这个在 Outlook 界面上是不能直接设置的, ...

  5. 用ELK分析每天4亿多条腾讯云MySQL审计日志(4)--MySQL全文索引

    前言:        该文章将会介绍以下: 1,MySQL全文索引的使用 2,全文索引停止词STOPWORD 3,使用全文索引的高效和准确 最近事情比较少,刚好可以梳理一下以前的工作,做一下总结! 在 ...

  6. 面试官:什么是Java内存模型?

    当问到 Java 内存模型的时候,一定要注意,Java 内存模型(Java Memory Model,JMM)它和 JVM 内存布局(JVM 运行时数据区域)是不一样的,它们是两个完全不同的概念. 1 ...

  7. 【Android逆向】静态分析+frida破解test2.apk

    有了上一篇的基础 https://www.cnblogs.com/gradyblog/p/17152108.html 现在尝试静态分析的方式来处理 为什么还要多此一举,因为题眼告诉了我们是五位数字,所 ...

  8. 【Android逆向】反调试绕过

    1. 拿到52pojie的反调试挑战apk 链接: https://www.52pojie.cn/thread-742686-1-1.html 的附件中 2. 项目进行安装,点开app,同时挑战成功, ...

  9. 项目实战:Qt+OpenCV图像处理与识别算法平台

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  10. 参数替换xargs

    由于很多命令不支持管道|来传递参数,xargs用于产生某个命令的参数,xargs可以读入stdin的数据,并且以空格符或回车符将stdin的数据分隔为参数 示例: 创建10个用户 echo user{ ...