Skip to main content
close Search
Close search

チャレンジ

モバイルアプリのUIデザイン

3 タスク

15 分

Visible to all users
初級 Pega Platform 8.4 モバイル ユーザーインターフェイス 日本語

シナリオ

GoGoRoadのカスタマー エクスペリエンス チームは、モバイルユーザーに近くのサービスプロバイダを提示するモバイル指向インターフェイスを提供したいと考えています。 テーブルを提示する代わりに、近くのサービスプロバイダの場所を示すマーカーを表示するマップをモバイルユーザーに提示します。 ユーザーがマーカーをタップしたときにプロバイダの名前と住所がポップアップ表示されるようにマップを設定します。 別の開発者が、ポップアップに表示されるユーザー インターフェイスをすでに設定しています。

「Select service provider」ビューにアドレス マップ コントロールを追加して、近くの各サービスプロバイダのマーカーを表示します。 ユーザーがマーカーをクリックしたときにProviderInformationセクションを表示するようにマップを設定します。 モバイルデバイスでのみマップを表示するには、標準のpyIsMobilewhenルールを使用して表示when条件をマップに適用します。 モバイルデバイスでサービスプロバイダのテーブルを非表示にするには、標準のIsNotMobilewhenルールを使用して、表示when条件を適用します。

以下の表は、チャレンジに必要なログイン情報をまとめたものです。

ロール オペレーター ID パスワード
アプリケーションデベロッパー author@gogoroad pega123!

チャレンジ ウォークスルー

You must initiate your own Pega instance to complete this チャレンジ.

Initialization may take up to 5 minutes so please be patient.

詳細なタスク

1 近くのサービスプロバイダを表示するようにマップコントロールを設定する

  1. Dev Studioのナビゲーション パネルで、「App」をクリックしてApplication Explorerを開きます。
  2. Application Explorerで「AssistanceRequest」 > 「User Interface」 > 「Section」を展開し、「SelectServiceProvider_ServiceProvider」をクリックして、近くのサービスプロバイダのリストを表示するセクションルールを開きます。
  3. セクション ルール フォームで「Structural > 「Dynamic layout」をクリックし、マウスカーソルを「Table 1」レイアウト上のルールフォームまでドラッグします。 ダイナミック レイアウトで計画された位置を示すオレンジ色の水平線がルールフォームに表示されます。
    The insertion point for a new layout is indicatedby the orange horizontal line
  4. マウスボタンを離して、ダイナミック レイアウトをテーブルレイアウトの上に挿入します。
  5. 「Data display」 > 「Map」をクリックし、マウスカーソルを空のダイナミックレイアウトにドラッグして、セクションにマップコントロールを追加します。
  6. 「Map」コントロールをダブルクリックして、「Cell Properties」ウィンドウを開きます。
  7. デフォルトのTracking Mapコントロールではなく、Address Mapコントロールを使用するようにマップを変更します。
    1. コントロール名の右側の「Change」をクリックして、新しいコントロールを選択します。
      Map properties window, highlighting the link for changing the control
    2. 「Custom」の下の「Other」を選択してコントロールのリストを閉じ、コントロール名の右側に入力フィールドを表示します。
    3. コントロール名の右側のラベルのないフィールドに「pxAddressMap」と入力するか選択して、Address Mapコントロールを使用します。
      Map properties window with the pxAddressMap control selected
  8. 「Cell Properties」ウィンドウで「Show User Location」チェックボックスをクリックして、ユーザーの現在の場所を表示します。
  9. サービスプロバイダのマーカーをマップに追加します。
    1. 「Markers」ソースの「Type」ドロップダウンリストから「Data page」を選択し、データページを使用してマーカーデータを取得します。
    2. 「Data page」フィールドで、「D_ServiceproviderList」を入力するか選択して、サービスプロバイダのデータタイプに関連付けられたレコードを使用してマーカーデータを取得します。 「Cell Properties」ウィンドウが更新され、データページに必要なパラメーターが表示されます。
    3. 「Data page」フィールドの下の「Value」フィールドに「.ServiceAddress.State」を入力するか選択して、サービスアドレスの状態をデータページのパラメーターとして使用し、サービスプロバイダのリストをフィルタリングします。
    4. 「Property for location」フィールドで、各サービスプロバイダの緯度と経度の座標を使用して位置マーカー「.LatLong」を入力するか選択します。
    5. 「Marker Info section」フィールドで、「ProviderInformation」を入力するか選択して、ユーザーがマーカーアイコンをクリックしたときに表示されるセクションを特定します。
      Completed configuration of the Address Map control to display markers for nearby service providers
  10. 「Submit」をクリックして、「Address Map」コントロールの設定を完了します。

2 サービスプロバイダのマップとテーブルに表示when条件を適用します

  1. セクション ルール フォームで「Dynamic Layout (Default) - 1」ラベルをダブルクリックして、「Dynamic layout properties」ウィンドウを開きます。
  2. 「Dynamic layout properties」ウィンドウで、「Visibility」ドロップダウン リストから「Condition (when rule)」を選択します。 フィールドがドロップダウンリストの右側に表示されます。
  3. ドロップダウン リストの右側のラベルのないフィールドに「pyIsMobile」を入力するか選択して、ユーザーがモバイルデバイスを使用している場合にのみマップを含むレイアウトを表示します。
    Configuration of the dynamic layout containing the map control to display only if the user is using a mobile device
  4. 「Submit」をクリックして、サービスプロバイダのマップを含むレイアウトの設定を完了します。
  5. 「Table - 2」ラベルをダブルクリックして、テーブルレイアウトの「Layout Properties」ウィンドウを表示します。
  6. 「Conditions」で「Grid visibility」ドロップダウンリストから「Condition (when rule)」を選択します。 フィールドがドロップダウンリストの右側に表示されます。
  7. ドロップダウンリストの右側のラベルのないフィールドに「IsNotMobile」を入力するか選択して、ユーザーがモバイルデバイスを使用していない場合にのみテーブルレイアウトを表示します。
  8. 「Submit」をクリックして、テーブルレイアウトの設定を完了します。
  9. 「Save」をクリックして、セクションの設定を完了します。

3 作業の確認

  1. App Studioで「Preview application」をクリックしてCase Managerに戻ります。
  2. 新しいAssistance Requestケースを作成します。
  3. ケースをIdentify Location手順に進めて必要なフィールドに入力します。
  4. 「Identify Location」ステップの「State」フィールドに「MA」と入力して、米国のマサチューセッツ州にあるサービスプロバイダを表示します。
  5. ケースをSelect Service Provider手順に進めます。
  6. サービスプロバイダのテーブルのみが表示されていることを確認します。
    Table of service providers displayed to a user not using a mobile device
  7. メニューバーで「Tablet preview」アイコンをクリックし、Apple iPad Pro 10.5のシミュレーション表示でケースをプレビューします。
    App Studio menu bar with the Tablet preview icon highlighted
ヒント: タブレットのプレビューはスマートフォンのプレビューよりケースのプレビュー領域が広がります。
  1. サービスプロバイダのマップのみが表示されていることを確認します。
    The Select service providers step, as viewed on a simulated Apple iPad display
  2. マーカーの1つをクリックして、プロバイダー情報を含むポップアップ ウィンドウと、プロバイダをケースに割り当てるボタンを表示します。
    Map of service providers with a provider selected, displaying a pop-up containing information about the service provider
  3. オプション:「Phone preview」アイコンとデバイスピッカーを使用し、他のシミュレーション表示されたモバイルデバイスを使ってケースをプレビューします。


下記のミッションにも含まれています。

If you are having problems with your training, please review the Pega Academy FAQs.

このコンテンツは役に立ちましたか?

改善できるところはありますか?

修正を提案する。

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice