スーパーバッジ攻略 Lightning Component Framework Specialist その5

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

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

スポンサーリンク

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コンポーネントをを取得し、リフレッシュをかける

Friends with Boatsのコンポーネント構成 Step8

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を配置

Friends with Boatsのコンポーネント構成 Step9

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イベントをリスンします。

攻略のヒント

最後はマップを表示し、指定された緯度経度にマーカーを入れる処理を作ります。
といっても、地図処理の大半がパッケージインストールの時点で作られており、ちょっと一手間加えれば晴れてスーパーバッチ獲得になります。

PlotMapMarker.evt
・アプリケーションイベントで新規作成、sObjectId・lat・long・label(いずれもString型)を引数とする

BoatTile.cmp
・PlotMapMarkerイベントを登録

BoatTileController.js
・onBoatClickメソッドで、PlotMapMarkerイベントを送信、引数の情報はBoatレコードから取得

Map.cmp
・PlotMapMarkerの受信ハンドラーを定義

Map.design
・幅(width)と高さ(height)を定義する

MapController.js
・onPlotMapMarkerメソッドを作成、緯度・経度を取得してlocationにセットする
(sObjectIdとlabelは使わなかった)

FriendswithBoats.app
・Mapコンポーネントを追加配置

Friends with Boatsアプリケーションページ
・Mapコンポーネントを追加配置

Friends with Boatsのコンポーネント構成 Step10

スーパーバッチ獲得!

これでスーパーバッチ獲得しました。
Lihghtningにも慣れてない分、結構苦労しました。

実際に作成したアプリケーションを使用してみると・・・

Friends with Boatsの完成イメージ

あれっ、画像が上手く表示されてないや。。。
どっかのタイミングで微調整はしようかな。

コメント