RefreshView API の例

RefreshView API を使用するには、通常は一連のアクションを行う必要があります。

まず、ページ上のどこかに、更新の必要時に RefreshEvent イベントを送信できるコンポーネントを配置する必要があります。この例では、refreshButton コンポーネントが更新を通知できます。

1// refreshButton.js
2import { LightningElement } from "lwc";
3import { RefreshEvent } from "lightning/refresh";
4
5export default class RefreshButton extends LightningElement {
6  // signal a refresh programmatically
7  // or via a button click
8  beginRefresh() {
9    this.dispatchEvent(new RefreshEvent());
10  }
11}

1<!-- refreshButton.html -->
2<template>
3  <button label="Refresh Button" onclick={beginRefresh}>Refresh</button>
4</template>

次に、コンポーネントをビューの更新に加えるために、コンテナが RefreshEvent を受信した後に、呼び出されるハンドラメソッドをコンポーネントで登録します。この例では、ハンドラメソッドが refreshHandler.js で登録されています。

1//refreshHandler.js
2import { LightningElement } from "lwc";
3import {
4  registerRefreshHandler,
5  unregisterRefreshHandler,
6} from "lightning/refresh";
7export default class RefreshHandler extends LightningElement {
8  refreshHandlerID;
9  connectedCallback() {
10    this.refreshHandlerID = registerRefreshHandler(this, this.refreshHandler);
11  }
12  disconnectedCallback() {
13    unregisterRefreshHandler(this.refreshHandlerID);
14  }
15  refreshHandler() {
16    // example usage case for refresh participant
17    // fetch some data and report status once complete
18    let endPoint = "https://api.<your company>.com";
19    return new Promise((resolve) => {
20      fetch(endPoint, {
21        method: "GET",
22      });
23      resolve(true);
24    });
25  }
26}

最後に、RefreshEvent を受信するように登録したコンポーネントをページ上のいずれかの場所に配置する必要があります。この例では、refreshContainer が refresh イベントを受信するように登録されています。イベントを受信すると更新処理を開始します。

1// refreshContainer.js
2import { LightningElement } from "lwc";
3import {
4  registerRefreshContainer,
5  unregisterRefreshContainer,
6} from "lightning/refresh";
7
8export default class RefreshContainer extends LightningElement {
9  refreshContainerID;
10  connectedCallback() {
11    this.refreshContainerID = registerRefreshContainer(
12      this,
13      this.refreshContainer
14    );
15  }
16  disconnectedCallback() {
17    unregisterRefreshContainer(this.refreshContainerID);
18  }
19  refreshContainer(refreshPromise) {
20    console.log("refreshing");
21    return refreshPromise.then((status) => {
22      if (status === REFRESH_COMPLETE) {
23        console.log("Done!");
24      } else if (status === REFRESH_COMPLETE_WITH_ERRORS) {
25        console.warn("Done, with issues refreshing some components");
26      } else if (status === REFRESH_ERROR) {
27        console.error("Major error with refresh.");
28      }
29    });
30  }
31}

1<!-- refreshContainer.html -->
2<template>
3  <!-- Ensure handler exists within structure of container -->
4  <div>
5    <c-refresh-handler></c-refresh-handler>
6  </div>
7  <div>
8    <c-refresh-button></c-refresh-button>
9  </div>
10</template>

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。