Lightning Component | yhayashi30.org

July 1, 2023 Lightning Component

LWCのDatatableをCustom Data Typeで拡張する

概要 Lightning Web ComponentのDatatable（lightning-datatable）は、簡単にテーブル形式でデータを表示することができるコンポーネントです。Datatableでは、標準でサポートしている型（※）がありますが、カスタマイズしたい場合にはLightningDatatableを拡張してCustom Typeを定義することができます。Custom Typeにより例えば行削除ボタンや画像、カスタムのテキストや数値のセルを実装することができます。 ※Summer’23時点actionbooleanbuttonbutton-iconcurrencydatedate-localemaillocationnumberpercentphonetext (default)url Custom Data Typeについて Custom Data Typeを使用するには、LightningDatatableを拡張したコンポーネントを作成する必要があります。今回は、サンプルである一定の条件を満たした際にボタンを表示/非表示を切り替えるCustom Typeを定義してみました。サンプル取引先のデータテーブルでカスタムデータタイプで表示条件をつけたボタンを作ってみました。一番右の列のRelated listは取引先に関連するケースが存在する場合にのみ表示されるようにしています。 https://github.com/yhayashi30/lwc-custom-data-type-sample Custom

May 14, 2023 Lightning Component / Salesforce

LWCにおけるSlotの利用について

Slotとは slotは、親コンポーネントから子コンポーネントにマークアップを渡すための方法です。slotタグを子コンポーネントのHTMLファイルで宣言することで、親コンポーネントから渡されたコンテンツを表示することできます。サンプルこの例では、親コンポーネントでc-child-componentを呼び出し、子コンポーネントのテンプレート内にあるスロットタグのname属性に”content”を指定しています。その後、親コンポーネント内でタグを定義し、slot属性に”content”を指定しています。これにより、子コンポーネントには親コンポーネントから渡された”Hello, World!”が表示されます。 Slotを利用することのメリットスロットを利用することで、子コンポーネントのHTMLテンプレート内に動的なコンテンツを表示することができます。また、複数のスロットを利用することもでき、それぞれに異なるname属性を指定することができます。スロットを利用することで、コンポーネントの再利用性を高めることができます。以上、SalesforceのLWCでのSlotの利用方法についてご紹介いたしました。ご参考になれば幸いです。参考 <slot>: ウェブコンポーネントのスロット要素 https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot スロットにマークアップを渡すhttps://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.create_components_slots

May 3, 2021 Lightning Component / Salesforce

コンポーネント間の通信

概要 Lightning Web Componentで複数のコンポーネント間でパラメータを引き渡して連動して動作するための通信を行う仕組みについて整理してみました。Custom EventとLightning Message Serviceの方法を用いて、下記のように殆ど同じ動作をするサンプルを作ってみたので、それぞれでどのような実装になるかを記載します。デモソースコードはこちらhttps://github.com/yhayashi30/lwc-pub-sub Custom Event デモ Lightning Message Service デモ Custom Event Custom Eventは標準のDOMイベントとなります。Custom