Lightning Web Component

LWC 標準の日付選択コンポーネントは<lightning-input type="date">となりますが、カスタ...

lightning/modal モジュール 「lightning/modal」はSalesforceのLightningコンポーネントフレームワークにおけるモーダルダイアロ...

lightning/confirm モジュール lightning/confirm モジュールを使用すると、コンポーネントに確認モードを作成できます。コンポーネントで LightningConfirm を使用して、続行する前にユーザーが応答する...

lightning/alert モジュール lightning/alert モジュールを使用すると、コンポーネントに警報モードを作成できます。機能やページだけでなく、コンポーネント上で LightningAlert を使用してシステ...

ログアウト方法 1 <site_name>/secur/logout.jspへ遷移し、ログアウトする方法 lwc:logout <template> <lightning-button label="...

LWC での画面遷移 LWC の中にNavigationMixinを提供しています、それを利用して、画面を遷移することができます、今回はNavigatio...

LWCライフサイクルフックの説明 LWC のライフサイクルフックには、インスタンス化、接続、更新、破棄の 4 つのフェーズがあります。それぞれのフェーズ...

LWC（Lightning Web Component） とは LWC（Lightning Web Component） は、Web Componentsを使用して...

LWC の環境構築方法 LWC の環境構築の詳しい方法は以下のようになります。 Salesforce の Developer Edition アカウントを取得します。 Developer Edition アカウントは、開発者向けのアカウントで、...

目的 LWC でのファイルダウンロード方法を共有します。 ソース構成図 force-app └─main └─default ├─classes │ ├─GetFileDemoC...

目的 今回 Classic モードで Visualforce に LWC のでファイル一括ダウンロードする方法を共有します。 前提 jszip.js を静的リソースにアップロードする ソース構成図 force-app └─main └...

目的 LWC での Path 共通コンポーネントを共有します。 実装例 path path.html <template> <div class="slds-path"> <div class="slds-grid slds-path__track"> <div class="slds-grid slds-path__scroller-container"> <div class="slds-path__scroller"> <div class="slds-path__scroller_inner"> <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal" > <template for:each="{pathItemList}" for:item="pathItem" for:index="index" > {getIndex} <template if:true="{pathIndexGeCurrentIndex}"> <li key="{pathItem}" if:true="{pathIndexEqCurrentIndex}" class="slds-path__item slds-is-current slds-is-active" role="presentation" > <a aria-selected="true" class="slds-path__link" href="javasctipt:void();" role="option" tabindex="-1" > <span class="slds-path__stage">...

LWC で CSV 出力方法説明 LWC で CSV ファイルを出力する考え方は主に下記の流れとなります。 1.LWC のコンポーネントにデータを持たせます。 2.CSV を作成するため、各行の...

LWC での Toast メッセージ LWC で Toast メッセージを表示するために、共通の Util クラスを作成することができます。 Toast メッセージのタイトル、メッセージ、種類(suc...

共通モーダル画面作成方法説明 共通モーダルはモーダルを開くための API を持ち、他のコンポーネントから呼び出すことができます。 他のコンポーネントで、...

VF ページに LWC を表示する方法説明 基本的な考え方は VF ページに LightningOut という仕組みを利用して、LWC を表示すると思います。 LightningOut の仕組み VF ⇒ Aura ⇒ LWCという...

1.目的 今回 LWC 中に AWS の SDK for javascript で S3 と連携する方法を共有します。 2.前提 2.1.AWS S3 バケット Cross-Origin Resource Sharing (CORS)の設定 [ { "AllowedHeaders": ["*"], "AllowedMethods": ["HEAD", "GET", "PUT", "POST", "DELETE"], "AllowedOrigins": ["*"], "ExposeHeaders": ["ETag"] } ] 2.2.Salesforce 側...

1.目的 LWC での DatePicker の作成方法を共有します。 2.ソース構成図 lwc ├─datePicker └─datePickerContainer datePicker .select-box { background-color: rgb(255, 255, 255); border:...

1.目的 今回 LWC での共通 Util の作成方法を共有します。 2.ソース構成図 lwc ├─commonUtil └─commonUtilChild commonUtil /** * デートフォ...

LWC 共通 CSS 方法説明 スタイルシートを使用して共通の CSS を定義し、それを複数のコンポーネントでインポートします。 CSS をグローバルに定義し、それをすべて...