SFDC：Lightning Web Componentsの開発 - Part 12

データガイドライン

Lightning データサービスについて説明があります。Lightning データサービス = LDS。Apexではなく、LWC側からデータ操作ができる仕組み。「Lightning データサービスでは、API 使用状況コールは発生しませんが、返されるレコード数などの一般的な制限の対象となります。」とのこと。

「基本コンポーネントや Lightning データサービスワイヤアダプタまたは関数を使用できない場合、Apex を使用します。」とのことで、メインはLDSを使いましょうってことなのかな。Apexに寄せたほうが開発が楽そうな気はするけど。

Lightning データサービス

LDSの詳細についてまとめられていました。サンプルコードとかはなかったので、概念を確認する感じ。

基本コンポーネントを使用したレコードの操作

「Salesforce レコードの表示、編集、作成が可能なフォームを作成するには、lightning-record-form、lightning-record-edit-form、および lightning-record-view-form の各コンポーネントを使用します。」とのことです。

基本コンポーネントの比較

フォーム用コンポーネントのそれぞれの役割について記載されています。

• lightning-record-edit-form — 編集可能フォームを表示します。
• lightning-record-view-form — 参照のみのフォームを表示します。
• lightning-record-form — 編集、表示、参照のみのモードをサポートします。

レコードの読み込み

lightning-record-formについてまとめられています。

サンプルコードを見ながら試してみた結果がこちら。

lightning-record-formも覚えるべき内容ですが、レコードページのID情報を取得したりするのに以下のコードが必要となっています。

• import { getRecord, getFieldValue } from "lightning/uiRecordApi";
• import ACCOUNT_OBJECT from "@salesforce/schema/Account";
• import NAME_FIELD from "@salesforce/schema/Account.Name";
• @wire(getRecord, { recordId: "$recordId", fields: [NAME_FIELD] })
• return this.record.data ? getFieldValue(this.record.data, NAME_FIELD) : "";

今回のコードにApexは使っていませんでした。なのでこれがLDSを使ったデータ操作になるんだと思います。

レコードの編集

lightning-record-edit-formについて説明されています。lightning-record-formと一緒に使用するもののようです。

試してみました。

とりあえず雰囲気は確認できました。開発者ガイドにはこの他の高度な使い方も記載されていました。

• 元の項目値へのフォームのリセット
• カスタムイベントを使用したデフォルト動作の変更
• lightning-record-edit-form を使用した、カスタム検証が含まれるレコードの編集

レコードの作成

lightning-record-formの使い方がまとめられています。

試してみました。

レコードを作成および編集するカスタム UI の作成

lightning-record*form コンポーネントを使わない方法です。(これが一番必要そう。)

試してみました。

テーブルでのレコードデータの表示

「レコードデータの行と列を表示するには、lightning-datatable コンポーネントを使用します。構造階層 (取引先レコードと関連取引先責任者など) のあるテーブルにデータを表示するには、lightning-tree-grid コンポーネントを使用します。」とのこと。

データ表示用の lightning-datatable と lightning-tree-grid の比較

次の２つの仕組みが紹介されていました。

• lightning-datatable は、Salesforce Lightning Design System (SLDS) のデータテーブルブループリントを使用して、デスクトップにレコードデータを表示する簡単な方法を提供します。
• lightning-tree-grid は、SLDS のツリーグリッドブループリントを使用して、階層データを表示し、レコードを親子リレーションにグループ化できるようにします。

インライン編集を使用したテーブルでのデータの表示

lightning-datatableの使い方。

試してみました。

Apexのアクセス方法は次の宣言となります。

import getContacts from "@salesforce/apex/apexContactsForAccountController.getContacts";

その他いろいろimport処理があります。

カスタムデータ型の作成

lightning-datatableでカスタムデータ型を作成したい場合について説明されています。

データ型のレイアウトとスタイルのカスタマイズ

lightning-datatable セルの外観をカスタマイズする方法。

カスタムデータ型を編集可能にする

lightning-datatable でカスタムデータ型を編集可能にするには、追加のテンプレートを作成して、データ型をインライン編集するための UI を実装したりしないといけないとのこと。この辺はもう省略。

レコードデータの階層テーブルの作成

lightning-tree-gridをつかった階層テーブルの作成。

サンプルコードがあったので試してみました。

フォームの表示密度の変更

lightning-record-edit-form、lightning-record-view-form、および lightning-record-formでは、「density="xxx"」で、表示密度を変更できるようです。

レコードの操作に関する使用上の考慮事項

「レコードタイプの情報を取得するには、getObjectInfo ワイヤアダプタを使用します。」とのこと。

ワイヤサービスを使用したデータの取得

@wireの使い方です。注意点として@wireの使用の前に「lightning-record*form コンポーネント」で実現できないかは検討しましょうとのことでした。

ワイヤサービスについて

慣れるまで大変そう。

レコードデータの取得

ワイヤサービスを使用してレコードデータを取得して、一部の項目名を表示する方法が紹介されています。

サンプルコードがあるので試してみました。@wire、getRecord、"$recordId"、これを使ってレコードページに組み込むLWCを実装できます。

Lightning データサービスでのエラーの処理

エラー発生時の処理についてです。

ワイヤサービスでの基本コンポーネントの使用

サンプルコードは2つ。最初のGetContactNameの方はうまく動かせませんでした。2つめのGetContactAddressはうまくいきました。(地図は表示されなかった)

Apex メソッドのコール

ここまでのサンプルコードで何度か出てきているApexクラスのコードを呼び出す方法。

Apex メソッドのインポート

「@salesforce/apex」をインポートする。メソッドごとにインポートする必要があるとのこと。

Lightning Web コンポーネントへの Apex メソッドの結び付け

@wire(apexMethodName, { apexMethodParams })について説明されてました。

サンプルコードで試してみました。importでApex処理を読み込んで@wireで処理を実行。実行結果を変数にセットするという感じ。

命令としての Apex メソッドのコール

@wire を使用せずに命令としてメソッドを Apex コールする方法。

こういう書き方ができるとのこと。RemoteActionのときの使い方に近いのでこっちの方が好み。

パラメータを含む Apex メソッドのコール はこうなるとのこと。

Apex への値の受け渡しのサンプル。

Apex アクションの一括処理

仕様的な話。

Apex メソッド結果のクライアント側キャッシュ

「cacheable=true を設定するには、メソッドはデータの取得のみを行う必要があり、データを変更することはできません。」というのが重要なポイントっぽい。

その他。

refreshApex()について

@salesforce/schema からのオブジェクトと項目のインポート

@salesforce/schemaについての話。

項目の存在判定ができる。

継続を使用した長時間コールアウトの実行

Apex で Continuation クラスを使用して、外部 Web サービスへの長時間要求を行えるとのことです。

Apex クラスでの継続の処理

次のような箇所で宣言します。

• @AuraEnabled(continuation=true cacheable=true)
• Continuation con = new Continuation(40);

継続の @AuraEnabled アノテーション

continuation=trueというのがあるってことを覚えておく。

継続の例

継続の制限

Apex クラスの保護

RefreshView API によるコンポーネントデータの更新

コンポーネントのリフレッシュ方法についてです。「コンポーネントで RefreshView API が使用される組織では、Lightning Web セキュリティを有効にする必要があります。Lightning Locker では、RefreshView API はサポートされていません。」とのことです。

RefreshView API ユーザエクスペリエンス

RefreshView API の使用

import { registerRefreshHandler, unregisterRefreshHandler } from "lightning/refresh";と宣言する。

RefreshView API の考慮事項

Apex からの API のコール

「Lightning コンポーネントによって作成されたセッションでは API アクセスが有効になっていません。この制約により、Apex コードも Salesforce への API コールを行うことができなくなります。特定の API コールに値して指定ログイン情報を使用することによって、このセキュリティ制限を慎重かつ選択的にスキップすることができます。」とのこと。

さらりと重要な情報が書かれていました。

まとめ

Salesforce データの操作のセクションはこんな感じでした。