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

Continue reading

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

Continue reading

コンポーネント間の通信

概要 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

Continue reading

ソーシャルサインオンのフロー整理

概要 本記事では、Salesforceの主に外部サイトの構築のログイン認証で使用するソーシャルサインオンを整理します。ソーシャルサインオンではSalesforceがRP(Relying Party)となり、認証/認可はソーシャル(Facebook/Google/Twitter etc)で行います。基本的にはOpenID Connectを用いたシングルサインオンとなるため、内部ユーザというよりExperience Cloudなどの外部ユーザのログインに使用されるケースが多いかと思います。 内部ユーザ向けに利用されるSAMLの認証フローについては下記の記事を参考にしてください。 OpenID Connectとは RESTベースで実装されており、クラウド系のサービス、アプリケーションに向いた仕組みである。OpenIDに対応した実装を作るプログラマ視点で見るとSAMLよりも容易に実装を構築できる。先にRPにアクセスするユースケースしかサポートしていないため、ログインポータルを作ることはできない。OpenID ConnectはOAuthの技術をベースにしている。OAuthは厳密にはSSOではなく、権限移譲のためのプロトコルである。 OpenID ConnectやOAuthについて、詳細の流れやフローについては下記の記事を参考にしてください。 ソーシャルサインオンの認証フロー ソーシャルサインオンの認証フローはOpenID Connectを用いており、下記のようなシーケンスとなっております。 ソーシャルサインオンの設定 Facebookに認証用のアプリを作成 Facebookの開発者サイトから自分のアカウントにログインしてアプリ作成を行います。https://developers.facebook.com/ アプリIDとapp

Continue reading

SAML認証フロー整理

概要 本記事ではSAML認証フローを用いてシングルサインオンを実現する流れをSalesforceのプラットフォームでの設定を用いて仕組みを整理します。 主な用語の内容は以下の通りになります。 Idp Identity Provider。ユーザーのIDやパスワードなどの認証情報を提供する役割を果たす。 SP Service Provider。IdPに認証を委託し、IdPによる認証情報を信頼してユーザーにサービスを提供する。OpenID Connectの場合には、RP (Relying Party) ともいう。 SAMLとは SAMLは、Security Assertion Markup Languageの略であり、Webサービスベースのシングルサインオンプロトコルである。認証情報のやりとりなどにXMLを利用。企業向けの従来型のソフトウェア製品などで採用されているケースが多い。利用者先にIdpにアクセスするユースケース(Idp Initiated)と、先にSPにアクセスするユースケース(SP Initiated)の両方をサポートしている。

Continue reading

LWC Local Developmentを試してみた

概要 SalesforceのLightning Web Component(LWC)をローカルサーバーで動かせる機能がBeta版でリリースされていたので、どんなものかを触って確かめてみました。 準備 Local Dev Server用のCLIをインストール 最終的にはSalesforce CLIのパッケージに含まれるようですが、現在はBeta版なので含まれていないので、個別にインストールする必要があります。 組織の認証 Devhub組織と認証して、Scratch組織を作成しておきます。どうやら接続先はSandboxではなくScratch組織である必要があるみたいです。この辺は結構前に書いた記事ですが、下記をご参照ください。 Salesforce DXの基礎の基礎https://qiita.com/yhayashi30/items/80dd868f2e15aac67072 ローカルサーバーを起動 下記のコマンドを実行することでnode.jsがローカルサーバーを起動してくれます。 また、VSCodeのコマンドパレットで下記を実行して操作することもできます。 起動して開くSFDX: Open Local

Continue reading

SalesforceにおけるOAuth2.0/OpenID Connect

概要 本記事では、業界標準であるOAuth2.0とOpenID Connectの概要を紹介した後に、Salesforceではそれらをどのように実装することができるのかを簡単に記載していきたいと思います。 本記事のベースとなるOAuth2.0やOpenID Connectの技術的な事項はこちらの本で学習しました。クライアント、認可サーバー、保護対象リソースのそれぞれについてサンプルのソースコードでどのように動作するかが詳細に記載されており理解するのに非常に役に立ちました。おすすめです。 認証・認可とは それぞれ詳細を説明すると非常に長くなるのですが、あえて一言で言うと下記で表せます。 認証 通信の相手が誰(何)であるかを確認すること 認可 とある特定の条件に対して、リソースアクセスの権限を与えること Salesforceにおける認証・認可とは Salesforceで実現可能な認証・認可の仕組みは下記が上げられます。 # 名称 概要 機能名 1 フォーム認証 Webブラウザでユーザ名とパスワードを入力する最も基本的な認証方式

Continue reading

[Salesforceデザイナー資格]Data Architecture and Management デザイナー

概要 本記事は、Salesforceのデザイナー資格であるData Architecture and Managementを受験するにあたって勉強した際の簡単なメモとなります。私が受験した時のバージョンはWinter’20でしたので、その時点での試験範囲に基づいております。 試験範囲 試験範囲については、リリースごとに変わる可能性があるので最新情報を確認する必要があります。詳細は下記から参照してください。http://tandc.salesforce.com/examguide_cert_data_archi_manage_designer.pdf 勉強内容 基本的な勉強方法は、上記の試験範囲に沿って必要な情報が公開されているヘルプサイトやブログ、Trailheadを参考にインプットをしました。 Data Modeling (20%) BigObject https://developer.salesforce.com/docs/atlas.en-us.bigobjects.meta/bigobjects/big_object.htm https://developer.salesforce.com/docs/atlas.en-us.bigobjects.meta/bigobjects/big_object_example_queueable.htm Roll up summary https://help.salesforce.com/articleView?id=fields_about_roll_up_summary_fields.htm&type=5 https://help.salesforce.com/articleView?id=fields_defining_summary_fields.htm&type=5

Continue reading

VS CodeのOrg Browserという機能

概要 Salesforceのソースコードベースの開発を行う際には、VSCodeとその拡張機能(Extension)を使用しますが、その中にOrg Browserという便利な機能が追加されていたので紹介したいと思います。Org Browserを使用すると、manifest file(package.xml)を作成せずにSandbox等の組織からローカルにソールコードを取得することができます。 VSCodeの基本設定やSalesforceのExtensionについてはこちらに記載していますので、本記事では割愛します。 使用方法 SFDXプロジェクトを作成する VSCodeのコマンドパレットでSFDX: Create Project with Manifestを実行してSFDXプロジェクトを作成します。 接続対象の組織を認証する VSCodeのコマンドパレットでSFDX: Authorize an Orgを実行して対象組織の認証により接続を行います。認証するとVSCodeの一番左のアイコンにSalesforceマークが表示されます。こちらが、Org Browserの機能となります。 対象のメタデータを選択

Continue reading

本番組織へのソース形式でのデプロイ

概要 本記事はSalesforceにおけるリリースにおいて、CLIを使用する場合にソース形式(メタデータ形式ではなく)で直接、本番組織へデプロイする方法を記載します。これまで(Spring’19以前)もSandboxへはソース形式でもデプロイすることができましたが、本番組織には一度メタデータ形式に変換したのちにデプロイする必要がありました。Summer’19からは、一度クイックリリースでテストを実行したのちに、そこで発行されるジョブIDを元にデプロイをすることができるようになったようです。 リリース方法(コマンド) まずは、クイックリリースでテストを実行してコードカバー率が要件を満たしていることを確認します。 上記のコマンドでSuccessとなった後に、実行した際に発行されているジョブIDを用いてデプロイを行います。 以上でリリース完了となります。 まとめ いちいちメタデータ形式への変換が不要となったので、個人的にはこちらの方が便利かなと思っています。 参考 本番組織へのアプリケーションのリリースhttps://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_build_mdapi_production.htm 任意の組織に対する開発https://developer.salesforce.com/docs/atlas.ja-jp.220.0.sfdx_dev.meta/sfdx_dev/sfdx_dev_develop_any_org.htm source Commandshttps://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_force_source.htm#cli_reference_deploy

Continue reading