Lightning Studio 拡張機能の紹介
Lightning Studio は、Salesforce LWC 開発を簡単かつ迅速に構築します。このエディタ内で、Apex/メッセージチャネルと LWC スクリプトを直接作成できます。また、LWC (カスタム) コンポーネントを一度に直接デプロイすることもできます。これを Web サイトに追加して開く方法を見てみましょう。
Web サイトにアクセスし、「Lightning Studio – Add Chrome」を検索します (Chrome を使用している場合)。 「Chromeに追加」ボタンをクリックします。
Chromeに追加されていることがわかります。現在は無効になっています。これは、Salesforce 組織が開かれている場合にのみ有効になります。
Salesforce 組織にログインすると有効になります。
拡張子をクリックします。
左側に移動し、新しい LWC コンポーネントの作成に使用される 3 番目のアイコンを選択します。
- まず、コンポーネントの名前を指定する必要があります。
- 「isExused」は、Salesforce でのコンポーネントの表示設定を設定するために使用されます。 true に設定する必要があります。
- コンポーネントを配置するターゲットを指定することが重要です。複数のターゲットを選択できます。
- コンポーネントのデプロイは最後のステップです (「デプロイ」をクリックします)。
例 1: レコードページへの追加
このシナリオでは、「レコードに追加されました」ページのテキストを表示する「firstComponent」LWC スクリプトを作成し、このコンポーネントを「取引先レコード」ページに追加します。 「firstComponent.js-meta.xml」ファイルでは、ターゲットを lightning__RecordPage として指定する必要があります。
コード構造:
firstComponent.html
< レンプレート >< ライトニングカード 変異体 = '狭い' タイトル = 「リナックス」 >
< p >> 記録ページに追加しました p >
ライトニングカード >
レンプレート >
firstComponent.js
輸入 { 稲妻要素 } から 'ラック' ;輸出 デフォルトクラス FirstComponent は LightningElement を拡張します {
}
firstComponent.js-meta.xml
< ?xml バージョン = 「1.0」 ? >< ライトニングコンポーネントバンドル xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< APIバージョン > 57.0 APIバージョン >
< 露出しています > 真実 露出しています >
< ターゲット >
< 目標 > lightning__RecordPage 目標 >
ターゲット >
ライトニングコンポーネントバンドル >
コンポーネントの追加:
Salesforce 組織に移動し、アプリケーションランチャーで「Sales」アプリケーションを検索します。
「アカウント」タブに移動して、任意のアカウントレコードを開きます。歯車アイコンに移動し、「ページの編集」を選択します。
次に、左側に移動してコンポーネントを検索します。
コンポーネントをドラッグし、「ハイライトパネル」の下に配置します。
「有効化」をクリックし、組織のデフォルトとして割り当てます。最後に、レコードページを保存します。
完了しました。次に、「販売」アプリのページに戻り、「取引先レコード」(任意のレコード) に移動します。カスタムコンポーネントが追加されていることがわかります。
例 2: ホームページへの追加
「firstComponent」を活用してみましょう。 HTML ファイル内の段落テキストを「ホームページに追加」として変更します。 「firstComponent.js-meta.xml」ファイルでターゲットを「lightning__HomePage」として指定します。
firstComponent.html
<テンプレート><ライトニングカードのバリアント = '狭い' タイトル = 「リナックス」 >
< p > ホームページに追加されました < / p >
< / ライトニングカード>
< / テンプレート>
firstComponent.js-meta.xml
バージョン = 「1.0」 ?><ターゲット>
<ターゲット>lightning__HomePage< / ターゲット>
< / ターゲット>
< / ライトニングコンポーネントバンドル>
コンポーネントの追加:
「販売」アプリに移動し、「ホーム」タブをクリックします。
歯車アイコンの下にある編集ページをクリックします。コンポーネントを検索し、「パフォーマンス」コンポーネントの上に配置します。ページを保存します。
「販売ホーム」タブを更新します。
コンポーネントがホームページに追加されたことがわかります。
例 3: アプリページへの追加
「firstComponent」を活用してみましょう。 HTML ファイル内の段落テキストを「アプリ ページに追加」として変更します。 「firstComponent.js-meta.xml」ファイルでターゲットを「lightning__AppPage」として指定します。
firstComponent.html
< レンプレート >< ライトニングカード 変異体 = '狭い' タイトル = 「リナックス」 >
< p > アプリページに追加されました p >
ライトニングカード >
レンプレート >
firstComponent.js-meta.xml
バージョン = 「1.0」 ?><公開されている> 真実 < / 露出しています>
<ターゲット>
<ターゲット> lightning__AppPage < / ターゲット>
< / ターゲット>
< / ライトニングコンポーネントバンドル>
コンポーネントの追加:
まず、Lightning アプリケーションビルダーを使用して Salesforce でアプリケーションページを作成する必要があります。 「クイック検索」で「Lightning App Builder」を検索し、「新規」をクリックして新しいライトニングページを作成します。
アプリページを選択し、「次へ」に進みます。
ラベルに「Linuxhint App」を付けて「次へ」に進みます。
現時点では、コンポーネントを配置するために必要な領域は 1 つだけです。したがって、「1 つのリージョン」を選択し、「完了」をクリックします。
ここで、「firstComponent」をページにドラッグし、ページを保存します。
ページをアクティブにする必要があるポップアップが表示されます。 「有効化」をクリックします。
その後、アプリにページを追加する必要があります。 「LIGHTNING EXPERIENCE」タブに移動し、これを実行します。このアクティベーションを保存します。
次に、アプリランチャーに移動し、「Linuxhint App」を検索します。コンポーネントがアプリページに追加されていることがわかります。
結論
これで、LWC をアプリ ページ、ホーム ページ、およびレコード ページに追加する方法を理解できました。すべてのシナリオで、より良いアイデアを得るために同じ例を使用しました。 「isExposited」が true であることを確認してください。それ以外の場合、コンポーネントは Salesforce 組織に表示されません。このガイド全体では、Lightning Studio (ベータ) エディタを利用してコードを開発しました。このエディタのダウンロードと使用方法については、このガイドの冒頭ですべての手順が説明されています。