※この内容は2018/5時点のものです。
始める前に
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_prereqs
Challenge要約
- [私のドメイン] にてカスタムドメインを組織へ追加してください。
- ※筆者注：Trailhead Playground 組織を利用する場合は、既に追加済みのため対応する必要はありません。
- カスタムオブジェクト「Expense」を（英語側の）ユニット本文に従い、以下内容で作成してください。
- 表示ラベル：Expense
- 表示ラベル（複数形）：Expenses
- 母音で始まる場合はチェック：チェックを入れる
- API 参照名：Expense__c
※筆者注：設定項目に「表示ラベル(複数形)」が表示されない場合は、組織情報にて言語のデフォルト値を「英語」に設定してください。
- カスタムオブジェクト「Expense」に、（英語側の）ユニット本文に従い、以下のカスタム項目を作成してください。
- データ型：通貨、項目の表示ラベル：Amount、API参照名：Amount__c、文字数：16、小数点の位置：2
- データ型：テキスト、項目の表示ラベル：Client、API参照名：Client__c、文字数：50
- データ型：日付、項目の表示ラベル：Date、API参照名：Date__c
- データ型：チェックボックス、項目の表示ラベル：Reimbursed、API参照名：Reimbursed__c
- カスタムオブジェクト「Camping Item」を作成し、以下項目を設定してください。
- Name：カスタムオブジェクト作成時に設定するレコード名
- データ型：数値、項目の表示ラベル：Quantity、API参照名：Quantity__c、文字数：18、小数点の位置：0、必須項目：チェックを入れる
- データ型：通貨、項目の表示ラベル：Price、API参照名：Price__c、文字数：16、小数点の位置：2、必須項目：チェックを入れる
- データ型：チェックボックス、項目の表示ラベル：Packed、API参照名：Packed__c、デフォルト値：チェックなし
Lightning コンポーネントの使用開始
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_intro
Lightning コンポーネントの作成および編集
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_create
Challenge要約
- 「Bug Spray」、「Bear Repellant」、「Goat Food」を含めた順序付きリストを持つLightningコンポーネント「campingList」を作成してください。
- 「Camping List」という文字列をH1タグを使い、フォントサイズ：18で表示するLightningコンポーネント「campingHeader」を作成してください。
- 上記「campingList」、「campingHeader」コンポーネントを含むLightningコンポーネント「camping」を作成してください。
属性と式
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_attributes_expressions
Challenge要約
- Lightningコンポーネント「campingListItem」を作成してください。
- 「campingListItem」コンポーネントに以下属性を追加してください。
- name属性：item
- type属性：Camping_Item__c
- この属性は必須としてください。
- 「Name」、 「Price」、 「Quantity」、 「Packed」の各項目を式を用いて表示してください。
- 「Price」、 「Quantity」の各項目を表示する際は、適切な書式を設定してください。
- 「Packed」項目を表示する際は、切り替え形式のチェックボックス(toggle)の書式を設定してください。
コントローラを使用したアクションの処理
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_controllers
Challenge要約
- 前のChallengeで作成した「campingListItem」コンポーネントに、以下のボタンを作成してください。
- ラベル(label): Packed!
- 呼び出すコントローラ関数: packItem
- コントローラ関数に、以下を実行するよう実装してください。
- item属性のPacked項目に対し、Trueを設定する。
- ボタンを無効にするため、disabled属性に対し、Trueを設定する。
フォームを使用したデータの入力
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_forms
Challenge要約
- 「campingHeader」コンポーネントをlightning:layoutやSLDSを用いて、以下のように変更してください。
- このユニットのソースコードを参考に、「slds-page-header」の中にH1タグにある「Camping List」を入れてください。
- lightning:iconを用いて「action:goal」SLDSアイコンを追加してください。
- 「campingList」コンポーネントを、新規アイテム追加フォームの表示、及び追加したアイテムを表示するために「campingListItem」コンポーネントを繰り返し実行するよう変更してください。
変更内容の詳細は以下の通りです。
- Camping Itemカスタムオブジェクトの配列を型(type)とする「items」属性を追加してください。
- Camping_Item__cを型(type)とする「newItem」属性を追加してください。Quanitity、Price のデフォルト値は0としてください。
- 「campingList」コンポーネントには、「newItem」属性より適切な入力コンポーネントタイプ、値を用いてName、Quanitity、Price、およびPackedの各項目のフォームを表示してください。 Quantity項目に入力可能な値は1以上としてください。
- フォームを登録した場合に、JavaScriptコントローラにある「clickCreateItem」アクションを実行するようにしてください。
- フォームが有効な場合、JavaScriptコントローラーは newItem を既存のitemの配列に挿入し、items value providerが変更されたことの通知をトリガーし、空の Camping_Item__c 型(type)の sObjectType で newItem をリセットしてください。 このコードは、ヘルパーではなくコンポーネントのコントローラに記述してください。
サーバ側コントローラを使用した Salesforce への接続
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_server
Challenge要約
- 「CampingListController」Apexクラスを作成し、getItems, saveItemメソッドを実装してください。
- コンポーネントの起動時にデータベースから既存レコードの読み込みを行う、「doInit」初期化ハンドラを追加してください。
- 有効なフォーム送信内容からデータベースにレコードを保存するため、ヘルパーに記述したcreateItemメソッドを使用するようにJavaScript コントローラを変更してください。新しいitemは、コントローラのitems value provider に追加されます。
コンポーネントとイベントの接続
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_events
Challenge要約
- 「campingList」コンポーネントにあるHTMLフォーム部分のコードを、新しく作成した「campingListForm」コンポーネントに移動してください。また、ボタンをクリックした際に「clickCreateItem」JavaScript コントローラアクションを呼び出すようにしてください。
- 「campingList」コンポーネントは、c:addItemEvent イベントをリスン(listen)し、JavaScriptコントローラにある handleAddItem アクションを実行するようにしてください。 handleAdditemメソッドはレコードをデータベースに保存し、レコードを items value provider に追加するようにしてください。
- addItemEvent イベントの type は component とし、 Camping_Item__c 型(type)の item という名前の属性を持つようにしてください。
- 「campingListForm」コンポーネントには、c:addItemEvent 型(type)の addItem イベントを登録してください。
- フォームが有効な場合、campingListFormController JavaScriptコントローラは、ヘルパーにある createItem メソッドを呼び出すようにしてください。
- campingListFormHelper JavaScriptヘルパーは、追加する item を持つ addItem イベントを作成し、イベントを発生させるようにしてください。その後、newItem value provider を、空の Camping_Item__c 型(type) の sObjectType でリセットしてください。
次のステップの確認
https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_next_steps
