2021.08.17
Salesforce Summer'21 Lightning Web コンポーネント開発に関する新機能のご紹介
ポスト
はじめに
こんにちは、姜です。
Summer '21リリースで、コンポーネントの開発に役に立つ以下のような機能が公開されました。
①親のコンポーネントのスタイルを子コンポーネントで使用できる機能
②レコード詳細ページに配置したカスタムボタンからLWCを呼び出せる機能
この記事では、上記2つの機能について紹介します。
①親のコンポーネントのスタイルを子コンポーネントで使える機能
Lightning Web コンポーネントのスタイル設定フック
LWCのスタイル設定にCSS カスタムプロパティを使えます。
親子コンポーネントに各々のスタイルを適用してしまうと膨大な量の CSSができてしまい、コードを把握することに時間がかかっていましたが、Summer '21リリースにより親のスタイルの1ヶ所にCSSの値を定義しておき、複数の子コンポーネントから参照することができるようになりました。
これからCSSプロパティをSalesforceにも実装してみましょう。
・oneComponent.html
・oneComponent.css
親のコンポーネントのスタイルにcssプロパティを使用してスタイルを定義します。
cssプロパティは先頭に「--」付けると、変数のようにスタイルを使用可能になります。
・twoComponent.html
・twoComponent.Css
上記「oneComponent.css」のativeスタイルの--important-color, --text-colorを子コンポーネントの「twoComponent.css」cssに渡せば親のスタイルを使用可能です。
* 書き方は「var(スタイルプロパティ名)」の形式です。
今回も子コンポーネントにスタイルを渡すため既存と同じく親・子を分けて:host() という疑似クラスを用いて各自のコンポーネントにスタイルを定義しますが、 上記のスタイルプロパティにより同じく使用するスタイルを子コンポーネントのスタイルに改めて追記する必要はなくなりました。
実装結果を見ると親のスタイルが子コンポーネントに適用されていることが見えます！
この機能によりスタイルの再利用がしやすくなり、複数の階層の子コンポーネントも親コンポーネントのスタイルに定義したスタイルを渡して再利用することができます。
ここで一つ気になったのは「もし親子コンポーネント両方に同じ名前でスタイルを定義するとどれが適用されるのか」ということです。
それでは早速検証してみます。
・twoComponent.css
子コンポーネント「twoComponent.css」に親のスタイル「active」と同じ名前のスタイルを定義します。
コンポーネントの文字の色がホワイトで、背景がブラックになれば子コンポーネントが優先、変化がなければ親のスタイルが優先される結果になります。
次は、コンポーネントが多層になった場合にもスタイルプロパティが使えるかを検証してみます。
・threeComponent.html
・threeComponent.css
・twoComponent.html
上記検証した親子コンポーネントの次に孫コンポーネントを作成します。
孫コンポーネントのスタイルと区別するため「twoComponent.css」のactiveクラスをコメントアウトします。「threeComponent.css」はスタイルをなにも定義せず「twoComponent.css」と同じくプロパティを受けるhostクラスを用意します。
実装結果、孫のコンポーネントにも親のスタイルが使用できることを確認できました。
②レコード詳細ページに配置したカスタムボタンからLWCを呼び出せる機能
Lightning Web コンポーネントを呼び出すクイックアクション
1.画面移動のないLWCアクションの実行
2.ヘッドレスアクション
1-1. LWCクイックアクション
・LWCは、LightningExperienceのクイックアクションとしてのみサポートされます。
・LWCを迅速なアクションとして使用することは、Salesforceモバイルアプリではサポートされていません。
参照： Quick Actions Developer Guide
この機能を簡単に説明してみると、Lightning Web コンポーネントを「画面フロー」ように使えるということです。 コンポーネントを画面アクションとして定義すると、ユーザは画面移動することなくモーダルを開くことも可能です。 HTMLを記載できるため、ライフサイクルも利用可能です。
それではレコード詳細ページのカスタムボタンからLWCを呼び出す検証をやってみます。
事前準備
- 1.LWC内のメタデータを修正
- 1-1.
lightning__RecordAction 追記 - 1-2. actionTypeを設定すること
・screenAction.html
・screenAction.js
まず、呼び出されるメッセージとボタンが表示されるサンプルなLWCを作成しました。
テストオブジェクトマネージャ→取引先→ボタンリンクおよびアクションカスタムボタン（アクション）を作成します。アクション種別は「LightningWebコンポーネント」を、LightningWebコンポーネントは先ほど作成しましたLWCの名前を選択すると、作成が完了します。
ページレイアウトでボタンを配置して動作確認してみましょう。
レコード詳細ページに作成したカスタムボタンを押下します。
作成したLWCが画面遷移せず表示されました！
この機能によりSalesforceの強力なLWCをカスタムボタンとして使えます。
もちろんHTML記載が可能であるためライフサイクルを利用でき、より効率的なコンポーネントの作成もできます。
2-1. ヘッドレスアクション
さらにヘッダーレスアクションが可能となり、画面を表示せず、処理だけ実装できるようになりました。
・headLessAction.js-meta.xml
・headLessAction.js
まず、メタデータ設定は以前クイックアクションの検証と同じく記載しておきます。
そして今回は画面要素がないアクションのためHTMLがないコンポーネントを作成します。 api invokeメソッドが初期処理で動作するため、js内にメソッドを用意し、処理を記載します。
クイックアクションの検証と同じくカスタムボタンを用意して先ほど作成したLWCを設定しましょう。
では、作成したカスタムボタンを押下してみましょう。
画面上、なにも起こらない状態ですね、HTML要素を作成してなかったので当然ですが、chromeのデベロッパーツールの「Console」を確認してみましょう。
初期処理に記載した「’TEST’」が表示されました！
さいごに
今も親コンポーネントで定義されたスタイルは、子コンポーネントには継承されないので親子の各々のスタイルファイルが必要ですが、 今回のリリースにより親のスタイルを再利用して親子が同じく使うスタイルは複数定義する必要がなくなりました。
そしてLWCをクックアクションとして使用可能になり、LWCの強力な機能をカスタムボタン代わりに使ったり、バックグラウンドで実行される処理や 画面要素がいらない処理などをLWCを通じてできるようになりましたので、いろいろな使い方が期待されます。
