＜追記＞
スーバーバッジの名称が「Lightning Component Framework Specialist」から「Aura Components Specialist」に変更になりました。
ですが、内容は前のLightning Component Framework Specialistと同じですので、そのまま読み替えていただいて構いません。
お待たせしました！
前回までは、本文の翻訳でしたが、今回からは問題編になります。
先にお断りしておきますが、コードを直接載せるなど、問題の答えは直接記載する予定はありません。
Salesforceが決めた試験パスなので、きっとLightningの知識を得た上で上級デベロッパーとして認めるという想いがあるのでしょう。
じゃないと、Salesforceに怒られてしまいますので。。。
ということで、ここでお伝えするのが問題の内容と攻略のヒントだけに留めておきます。
>2018/12/18 追記
コンポーネント構成図を追加しました。
Step1 あなたが始める前に
問題
（原文）
Before you start
Complete all of the prework, including the installation of the unmanaged package.
（翻訳）
あなたが始める前に
アンマネージドパッケージのインストールを含む、すべての事前作業を完了します。
攻略のヒント
ここは、問題文の通り、パッケージインストールなどの事前準備をしましょう。
「Prework and Notes」に記載されていることを実行すればOKです。
具体的には
-
- マイドメインの設定（Trailhead Playground環境作成した場合は設定済みなので不要）
- コンポーネントキャッシュを無効にする
- アンマネージドパッケージをインストール
インストール時にはユーザ名とパスワードが必要なので、管理者ユーザのパスワード初期化は済ませておく必要があります
サンプルデータ挿入はパッケージインストール時に自動実行されるので、操作不要です。
Step2 サンプルフォームによるクエリの作成
問題
（原文）
Build the query-by-example form
Create a form displaying a dropdown that lists each boat type, along with Search and New buttons, using BoatSearchForm.cmp, BoatSearchResults.cmp, and BoatSearch.cmp, as described in the business requirements.Add these components to a Lightning page named Friends with Boats, and activate the page as a new tab in Lightning Experience and the Salesforce App. Lastly, create a Lightning application named FriendswithBoats.app that has a layout that is similar to the Lightning page.
（翻訳）
サンプルフォームによるクエリの作成
BoatSearchForm.cmp、BoatSearchResults.cmp、およびBoatSearch.cmpを使用して、ビジネス要件に記載されているように、各ボートの種類をリストしたドロップダウンを表示するフォームを作成します。
これらのコンポーネントをFriends with Boatsという名前のLightningページに追加し、Lightning ExperienceとSalesforce Appで新しいタブとしてページをアクティブにします。 最後に、Lightningページに似たレイアウトを持つFriendswithBoats.appというLightningアプリケーションを作成します。
攻略のヒント
ここからいよいよLightningコンポーネントの実装に入っていきます。
Step２からやることが多くなります。
ここでやることは以下の通りです。
- LightningコンポーネントのBoatSearch.cmp、BoatSearchResults.cmp、BoatSearch.cmpを作成
- LightningアプリケーションのFriendswithBoats.appを作成
- Lightningページ「Friends with Boats」を作成
コンポーネント別に概要を説明するとこのようになります。
BoatSearch.cmp
・lightning:cardを上下に配置し、それぞれコンポーネントBoatSearchFormとBoatSearchResultを入れる
・コンポーネント間は10pxの間隔をとる
BoatSearchForm.cmp
・BoatTypeを選択する選択リストと、SarchボタンとNewボタンを配置
・ロード時のアクションでBoatTypeを取得して、選択リストに反映（All Typesも選択肢に加える）
→BoatSearchFormController.jsとBoatSearchFormController.clsを作成します
・SearchとNewボタンのアクションはこの時点では不要
BoatSearchResults.cmp
・この時点では空の状態で問題ありません
FriendswithBoats.app
・レイアウト配置はLightningページと同じようにしてBoatSearchForm.cmpコンポーネントを含めます
プレビュー用として使用
Step3 BoatTileおよびBoatSearchResultsコンポーネントを実装する
問題
（原文）
Implement the BoatTile and BoatSearchResults components
Create a new BoatTile component and update your BoatSearchResults container to loop through all the results returned from an Apex controller BoatSearchResults to display an unfiltered list of every boat that HowWeRoll leases.Define the method getBoats() in BoatSearchResults, to return search results as described in the business requirements. BoatSearchResults.cmp displays search results with a helper method, onSearch(), and displays each result as a BoatTile component.
（翻訳）
BoatTileおよびBoatSearchResultsコンポーネントを実装する
新しいBoatTileコンポーネントを作成し、BoatSearchResultsコンテナを更新して、ApexコントローラBoatSearchResultsから返されたすべての結果をループして、HowWeRollがリースするすべてのボートのフィルタリングされていないリストを表示します。
BoatSearchResultsのgetBoats（）メソッドを定義して、ビジネス要件に記述されているように検索結果を返します。 BoatSearchResults.cmpは、検索結果をヘルパーメソッドonSearch（）で表示し、各結果をBoatTileコンポーネントとして表示します。
攻略のヒント
Step3は検索結果表示部分の実装です。BoatSearchResultsにBoatTileを使用した検索結果表示が実現できればOKです。リストを返すコントローラを作成する必要はありますが、検索ロジックまでは作成する必要はありません。
BoatTile.cmp（+css）
・新規作成、CSSなどは要件のコードに従う
・Boatレコードを受け取り、タイル内に名前、背景にイメージを表示
・ボタンのアクションはこの時点では不要
BoatSearchResults.cmp
・検索結果にBoatTileコンポーネントをリスト数分ループして配置
BoatSearchResultsController.js
・doSearchメソッドを作成、ヘルパーのonSearchを呼び出す
BoatSearchResultsHelper.js
・onSearchメソッドを作成、ApexコントローラーのgetBoatsメソッドを呼び出す
BoatSearchResults.cls
・getBoatsメソッドでSOQLでBoatのリストを返す
（検索処理は不要で、全リストを返す）
※判定ロジックはよく分かりませんが、この時点ではメソッドの定義だけで、実際ロード時に検索の結果を表示させる等の処理は不要でした
おそらく、必要なキーワード（doSearch、onSearchなど）が揃っていればOKかと
Step4 検索フィルターを実装する
問題
（原文）
Implement the search filter
Create a FormSubmit event to allow your BoatSearchForm to pass the selected boat type to the BoatSearchResults component, which queries Apex and stores the results.Handle FormSubmit with a controller action, onFormSubmit, and pass formData.boatTypeId from the controller to search, a public method on the BoatSearchResults component. The search function uses a helper function, onSearch(), and controller function, doSearch(), to get the list of boats.
（翻訳）
検索フィルターを実装する
BoatSearchFormがBoatSearchResultsコンポーネントに選択したボートタイプを渡すことを許可するFormSubmitイベントを作成します。BeatSearchResultsコンポーネントは、Apexに問い合わせて結果を保存します。
コントローラーアクションonFormSubmitを使用してFormSubmitを処理し、BoatSearchResultsコンポーネントのパブリックメソッドであるsearchからformData.boatTypeIdをコントローラーに渡します。 検索関数は、ヘルパー関数onSearch（）とコントローラー関数doSearch（）を使用してボートのリストを取得します。
攻略のヒント
ここからイベントが絡み、コンポーネント間で処理が行き来するので、より複雑になります。
構造を理解するためにも図示したりして道に迷わないようにしましょう。
今回の処理は、簡単に経路を言うと、BoatSearchForm→BoatSearch→BoatSearchResultとなります。
コンポーネントの親子関係に着目すると、BoatSearchFormはBoatSearchの子供なので、コンポーネントイベントを使用して、通信することができます。
逆に、BoatSearchはBoatSearchResultの親なので、イベントは受信できませんが、直接コンポーネントを指定して呼び出すことで、情報の受け渡しが可能になります。
と言うことで、やることをまとめるとこうなります。
FormSubmit.evt
・イベントの新規作成、イベントタイプはコンポーネント、引数はObject型にする（要件に従う）
BosySearchForm.cmp
・イベントformSubmitEventの登録
・Searchボタン押下でコントローラのonFormSubmitを起動
BoatSearchFormController.js
・onFormSubmitメソッドを作成し、選択されたBoatTypeIDを取得し、formSubmitEventを起動させる
BoatSearch.cmp
・受信ハンドラーを定義し、アクションとしてonFormSubmitを指定する
BoatSearchController.js
・BoatSearchResults.cmpにあるsearchメソッドを直接呼び出す
BoatSearchResults.cmp
・searchメソッドを定義する（aura:methodタグを使用）、アクションにはコントローラーのdoSearchを呼び出す
BoatSearchResultsController.js
・doSearchメソッドを作成、BoatTypeIdを受け取る
BoatSearchResultsHelper.js
・onSearchメソッドを作成、BoatTypeIdを引数とし、ApexコントローラーのgetBoatsメソッドを呼び出す
BoatSearchResults.cls
・getBoatsメソッドでIDを引数にし、検索ロジックを作成する（IDが空の場合は、全BoatTypeが対象になるので、動的SOQLでないとできない）
ふぅ、疲れた。
今日はここまで
やっていることはLightningコンポーネントの基礎の組み合わせですが、色々なコンポーネントをまたぐため、その度に頭の整理が必要です。
文章だけでは分かりづらいので、いずれは図ものっけていきたいと思います。
コメント