スーパーバッジ攻略 Aura Components Specialist その5

＜追記＞
スーバーバッジの名称が「Lightning Component Framework Specialist」から「Aura Components Specialist」に変更になりました。
ですが、内容は前のLightning Component Framework Specialistと同じですので、そのまま読み替えていただいて構いません。

いよいよ最後になりました。
もう峠は超えているので、最後の仕上げです。
戦隊モノで言うと、最後に巨大ロボが合体するシーンまで来ています。

>2018/12/18 追記
コンポーネント構成図を追加しました。

Step8 ボートレビューを表示する
1. 問題
2. 攻略のヒント
Step9 サードパーティのスクリプトを統合する
1. 問題
2. 攻略のヒント
Step10 マップ上にマップマーカーをプロットする
1. 問題
2. 攻略のヒント
スーパーバッチ獲得！
1. いいね:

Step8 ボートレビューを表示する

問題

（原文）

Display boat reviews
Inside the Reviews tab, invoke a BoatReviews component that queries Apex and outputs the results based upon the Feeds component of the Lightning Design System, as shown in the business requirements. Hyperlink the user’s name to their record in Salesforce when possible.

（翻訳）
ボートレビューを表示する
レビュータブの中で、ビジネス要件に示されているように、Apexを照会し、Lightning Design SystemのFeedsコンポーネントに基づいて結果を出力するBoatReviewsコンポーネントを呼び出します。可能であれば、ユーザー名をSalesforceのレコードにハイパーリンクします。

攻略のヒント

ここではStep7で書いたレビューを表示する処理を入れます。

BoatReviews.cls
・getAllメソッドを作成し、boatIdを引数としてBoatIdと紐づくBoatRebiewレコードを返却

BoatReviews.cmp(+css)
・新規作成（五つ星評価の表示は除く）、Feedsコンポーネントに基づいて作成する

BoatReviewsController.js
・doInitメソッドを作成、ヘルパーのonInitメソッドを呼び出す
・onUserInfoClickメソッドを作成、data-useridアトリビュートから、レビュー者のユーザIDを取得し、ユーザ情報を参照する

BoatReviewsHelper.js
・onInitメソッドを作成し、ApexクラスのBoatReviewsクラス、getAllメソッドを呼び出す

BoatDetails.cmp
・ReviewsタブにBoatReviewコンポーネントを配置（idをつける）

BoatDetailsController.js
・onRecordUpdatedメソッドとonBoatReviewAddedメソッド内でBoatReviewコンポーネントをを取得し、リフレッシュをかける

Step9 サードパーティのスクリプトを統合する

問題

（原文）

Integrate third-party scripts
Create a FiveStarRating component with your coworker’s modified JavaScript to enable associates to give the boats a rating from 1–5 stars. Give the component edit and read modes that are used in the form and output, respectively.

（翻訳）
サードパーティのスクリプトを統合する
あなたの同僚の変更されたJavaScriptを使用してFiveStarRatingコンポーネントを作成して、ボートに1〜5個の星の評価を与えることができます。フォームと出力にそれぞれ使用されるコンポーネントの編集モードと読み取りモードを指定します。

攻略のヒント

ここでは後回しにしていたRatingの実装になります。
星をつけて表示、評価するインタフェースになっており、パッケージインストールにてライブラリがインストール済みなので、それを取り込むことで実現できます。

FiveStar.cmp
・新規作成
・評価数と編集可否のフラグをアトリビュートとして定義
・静的リソースからrating.cssとrating.jpを取得

FiveStar.cmp
・本文にあるソースをコピーして作成

BoatReviews.cmp
・FiveStarRating.cmpを配置（readonlyをtureにする）

AddBoatReview.cmp
・FiveStarRating.cmpを配置

Step10 マップ上にマップマーカーをプロットする

問題

（原文）

Plot the Map Marker on the Map
Deploy a mapping component to show where your boat docks. The Map component and its controller were included in the unmanaged package you installed as part of this superbadge. The component listens for the PlotMapMarker event, which is fired when a user clicks a boat from the BoatTile component.

（翻訳）
マップ上にマップマーカーをプロットする
あなたのボートがどこにドッキングするかを示すマッピングコンポーネントをデプロイします。 Mapコンポーネントとそのコントローラは、このスーパーバージョグの一部としてインストールしたアンマネージドパッケージに含まれていました。コンポーネントは、ユーザーがBoatTileコンポーネントからボートをクリックすると発生するPlotMapMarkerイベントをリスンします。