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

3 タスク

15 分

Pega Platform 8.4 (日本語)

Pega Platform 8.4 (English) Pega Platform 8.4 (Français) Pega Platform 8.4 (Deutsch)

Visible to: All users

初級 Pega Platform 8.4 モバイル ユーザーエクスペリエンス 日本語

シナリオ

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

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

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

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

このチャレンジを完了するには、Pegaインスタンスを起動する必要があります。

起動には5分ほどかかることがありますので、しばらくお待ちください。

• ログイン

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

詳細なタスク

1 Configure a map control to display nearby service providers

1. In Dev Studio, in the navigation pane, click App to open the Application Explorer.
2. In the Application Explorer, expand AssistanceRequest > User Interface > Section and click SelectServiceProvider_ServiceProvider to open the section rule that displays the list of nearby service providers.
3. On the section rule form, click Structural > Dynamic layout and drag the mouse cursor to the rule form above the Table 1 layout. A horizontal orange line is displayed on the rule form to indicate the planned position of the dynamic layout.
   
4. Release the mouse button to insert the dynamic layout above the table layout.
5. Click Data display > Map and drag the mouse cursor into the empty dynamic layout to add a map control to the section.
6. Double-click the Map control to open the Cell Properties window.
7. Change the map to use the Address Map control, rather than the default Tracking Map control.
   1. To the right of the control name, click Change to select a new control.
      
   2. Under Custom, select Other to dismiss the list of controls and display an entry field to the right of the control name.
   3. In the unlabeled field to the right of the control name, enter or select pxAddressMap to use the Address Map control.
      
8. In the Cell Properties window, click the Show User Location check box to display the current location of the user.
9. Add markers for service providers to the map.
   1. Under Markers source, from the Type drop-down list, select Data page to source marker data by using a data page.
   2. In the Data page field, enter or select D_ServiceproviderList to source marker data by using the records associated with the Service Provider data type. The Cell Properties window refreshes to display the parameter expected by the data page.
   3. Under the Data page field, in the Value field, enter or select .ServiceAddress.State to use the state of the service address as a parameter to the data page to filter the list of service providers.
   4. In the Property for location field, enter or select .LatLong to position markers using the latitude and longitude coordinates for each service provider.
   5. In the Marker Info section field, enter or select ProviderInformation to identify the section to display when the user clicks a marker icon.
      
10. Click Submit to complete the configuration of the Address Map control.

2 Apply visible when conditions to the map and table of service providers

1. On the section rule form, double-click the Dynamic Layout (Default) - 1 label to open the Dynamic layout properties window.
2. In the Dynamic layout properties window, from the Visibility drop-down list, select Condition (when rule). A field is displayed to the right of the drop-down list.
3. In the unlabeled field to the right of the drop-down list, enter or select pyIsMobile to display the layout that contains the map only when the user is using a mobile device.
   
4. Click Submit to complete the configuration of the layout that contains the map of service providers.
5. Double-click the Table - 2 label to display the Layout Properties window for the table layout.
6. Under Conditions, from the Grid visibility drop-down list, select Condition (when rule). A field is displayed to the right of the drop-down list.
7. In the unlabeled field to the right of the drop-down list, enter or select IsNotMobile to display the table layout only when the user is not using a mobile device.
8. Click Submit to complete the configuration of the table layout.
9. Click Save to complete the configuration of the section.

3 Confirm your work

1. In App Studio, click Preview application to return to the Case Manager.
2. Create a new Assistance Request case.
3. Advance the case to the Identify Location step, completing any required fields.
4. On the Identify Location step, in the State field, enter MA to display service providers located in the state of Massachusetts in the United States.
5. Advance the case to the Select Service Provider step.
6. Confirm that only the table of service providers is displayed.
   
7. In the menu bar, click the Tablet preview icon to preview the case by using a simulated Apple iPad Pro 10.5 display.
   

ヒント： The Tablet preview provides a larger preview area for the case than the mobile phone preview.

8. Confirm that only the map of service providers is displayed.
   
9. Click one of the markers to display a pop-up window containing provider information and a button to assign the provider to the case.
   
10. Optional: Use the Phone preview icon and use the device picker to preview the case by using other simulated mobile devices.

---

---

このモジュールは、下記のミッションにも含まれています。

• System Architect v1