特殊时期,大家一定要保重身体。增强自身免疫力,一切都会过去,一起加油!!!

LWC勉強ースクラッチ組織の作成とリリース(002)

LWC zchao 626℃ 0评论

開発したコードは以下のサイトで実行できます。 (オンライン環境みたい)

Lightning Web Components Playground

 

具体的なコードはこちら⇒

https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/create-lightning-web-components

Thrilheadで作成したPlaygroundをログインして、Dev Hubも有効化になりました。

スクラッチ組織定義ファイルを作成したら、コマンドラインから直接、簡単にスクラッチ組織を作成し、開くことができます。

スクラッチ組織を作成する前に、次の操作を実行します。

  • Salesforce DX プロジェクトを設定する
  • Dev Hub 組織を認証する
  • スクラッチ組織定義ファイルを作成する

昨日も簡単に紹介いたしました。

①VSCodeでプロジェクトを作成する(bikeCard)

②Dev Hub 組織を認証する(Dev Hub有効化のPlayground環境)

①②はこちら⇒

LWC勉強ー初めて(001)

③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:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_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)も設定できます。

こちら⇒

https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_dev.meta/sfdx_dev/sfdx_dev_scratch_orgs_create.htm

スクラッチ組織を作成する: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

 

コードの詳細内容はまだ説明していないから、これから具体的な問題あり、一歩一歩で研究しましょう。

以上となります。

何か問題がございましたら、コメントを頂れば嬉しいです。

 

转载请注明:zchao博客之家 » LWC勉強ースクラッチ組織の作成とリリース(002)

喜欢 (9)or分享 (0)

您必须 登录 才能发表评论!