開発したコードは以下のサイトで実行できます。 (オンライン環境みたい)
Lightning Web Components Playground
具体的なコードはこちら⇒
Thrilheadで作成したPlaygroundをログインして、Dev Hubも有効化になりました。
スクラッチ組織定義ファイルを作成したら、コマンドラインから直接、簡単にスクラッチ組織を作成し、開くことができます。スクラッチ組織を作成する前に、次の操作を実行します。
- Salesforce DX プロジェクトを設定する
- Dev Hub 組織を認証する
- スクラッチ組織定義ファイルを作成する
昨日も簡単に紹介いたしました。
①VSCodeでプロジェクトを作成する(bikeCard)
②Dev Hub 組織を認証する(Dev Hub有効化のPlayground環境)
①②はこちら⇒
③LWCファイル作成する
ライフサイクルフック
Lightning Web コンポーネントでは、コンポーネントのライフサイクルで重要なイベントは発生したらコードを「フック」できるようにするメソッドが提供されています。こうしたイベントとして、コンポーネントに次の変化があった場合などが含まれます。
-
作成された
-
DOM に追加された
-
ブラウザで表示された
-
エラーが発生した
-
DOM から削除された
1、紹介したいのは、カスタムコンポーネントはPlaygroundに配置しておきます。
SFDX:Create Lightning Web Component
BikeCord
path
自動生成三つファイル
コードを入れて、Playground環境ログインして
SFDX:Authorize an Org
Playground環境にリリースする
SFDX: Deploy This Source to Org
リリース成功する
Playground環境に移動する
SFDX:Open Default Org
ログイン終わった後
Lightning App Builderを作成する、そのコンポーネントは配置する
Home画面に配置する
bikeCard.js-meta.xml
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Product Card</masterLabel> //コンポーネントの名前
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightningCommunity__Page</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Product2</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
説明:
①<masterLabel>Product Card</masterLabel> //コンポーネントの名前
<targetConfigs>
<targetConfig targets=”lightning__RecordPage”>
<objects>
<object>Product2</object>
</objects>
</targetConfig>
</targetConfigs>
<targetConfigs>Lightning App Builderの中に設定できる
targets=”lightning__RecordPage”:<target>lightning__RecordPage</target>の制限
<object>Product2</object>:新規RecordPageの場合(オブジェクトは指定される)、このオブジェクトにこのコンポーネントを追加できる、他のオブジェクトは追加できません。新規ほかのAppPageとHomePageは影響なし、追加できます。(オブジェクトは指定されない)
-
必須
-
apiVersion は、コンポーネントを Salesforce API バージョンにバインドします。
isExposed (true または false) は、コンポーネントを他の名前空間から使用できるようにします。これを true に設定するのは、コンポーネントを管理パッケージか、別の組織の Lightning アプリケーションビルダーで使用できるようにする場合のみです。
-
省略可能
-
targets は、Lightning アプリケーションビルダーでコンポーネントを追加可能な Lightning ページの種別を指定します。
targetConfigs は、Lightning ページの種別ごとに固有の動作を指定します。これには、コンポーネントをサポートするオブジェクトなどがあります。
サポートされる構文すべてのリストは、このドキュメントを参照してください。
Configuration File Tags:
Product Card
新規RecordPageの場合、Object:Product
Product Cardを表示される
Object:Accountとかの場合
Product Cardを表示されていない
新規AppPage
Product Cardを表示される
新規HomePage、上のHome画面に配置と同じ
2、紹介したいのは、カスタムコンポーネントはScrath Orgに配置しておきます。
SFDX: Create a Default Scrath Org
Authorize a Dev Hub
ログインして(先のPlayground環境)
path
Scrath Orgのalias MyFirstScrathOrg
スクラッチ組織の期間、つまりスクラッチ組織の有効期限がいつ切れるかを指定する (日数)
デフォルトは 7 日です。有効な値は 1 ~ 30 です。
作成できました、一番下にaliasも表示されること
alias⇒MyFirstScrathOrgをクリックする、MyFirstScrathOrg環境もユーザー名も表示
修正するコンポーネント(BikeCord)をScrath Orgにリリース
SFDX:Push Source to Default Scrath Org
(SFDX:Pull Source from Default Scrath Org)もできる
PUSH成功
このScrath Orgをログインして
SFDX:Open Default Org
新しいScrath Orgをログインできる
ユーザー名です、パスワードもリセットできる
簡単 にパスワードの設定⇒
Trailhead Playground のユーザ名とパスワードの取得と変更ーsetPassword(‘userid’,’password’)
Playgroundと同じようにProduct Cardコンポーネントを画面に配置できる
これで完成です。
コマンド(CMD)も設定できます。
こちら⇒
スクラッチ組織を作成する:sfdx force:org:create -f project-scratch-def.json
スクラッチ組織定義値を指定する:sfdx force:org:create adminEmail=me@email.com edition=Developer \
username=admin_user@orgname.org別名を持つスクラッチ組織を作成する:sfdx force:org:create -f project-scratch-def.json -a MyScratchOrg
スクラッチ組織の有効期限がいつ切れるかを指定する (日数):sfdx force:org:create -f config/project-scratch-def.json -d 3
スクラッチ組織を開きます:sfdx force:org:open -u <username/alias>
productCardコード:
https://github.com/trailheadapps/ebikes-lwc/tree/master/force-app/main/default/lwc/productCard
Lightning Web コンポーネントの基本:
https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics
コードの詳細内容はまだ説明していないから、これから具体的な問題あり、一歩一歩で研究しましょう。
以上となります。
何か問題がございましたら、コメントを頂れば嬉しいです。
Latest posts by zchao (see all)
- Auraでアクションボタン作成して画面のチェックボックス項目一括処理 - 2021年4月12日
- デフォルト項目値を含むレコード作成実例説明(defaultFieldValues) - 2021年1月9日
- Salesforce のノーコード・ローコード開発 - 2020年12月31日
转载请注明:zchao博客之家 » LWC勉強ースクラッチ組織の作成とリリース(002)