アプリケーションのコンテンツをモバイルリストページとして表示することで、モバイルアプリのユーザーインターフェイスの応答性と読み込み時間が改善されます。 このようにネイティブ画面のデフォルトでヘッダーに検索バーを設置し、画面が流れるようにアプリケーションを拡張できます。
たとえば、Lodgingカテゴリーのすべての経費を表示するネイティブリストページを作成できます。 アプリケーションを使用するマネージャーは、特定の従業員名を検索して、その従業員のすべての宿泊費を含む結果を取得できます。
始める前に：リストページのフレームワークを準備します。スワイプアクションとフローティングアクションボタンを備えたカスタム経費リストページのデザイン 
- アプリのモバイルチャネルを作成します。 詳しくは、「Setting up mobile apps」を参照してください。
- ページ画面の入力に使用できるケースタイプがあることを確認します。 たとえば、経費報告用のケースタイプを作成します。 詳細情報については、「Case types」を参照してください。
- ユーザーがリストアイテムに対して実行するカスタムスワイプアクションを追加する場合は、最初にケースワイドアクションを設定します。 詳しくは、「Adding optional actions to cases」を参照してください。
-
モバイルチャネルを開く：
- App Studioのナビゲーションペインで、「Channels」をクリックします。
- 「Current channel interfaces」セクションで、アプリのモバイルチャネルを示すタイルをクリックします。
- モバイルチャネルのページで、「Content」タブの「List pages」をクリックします。
- 「Add」をクリックして、新しいリストページを作成します。
- 「Edit page」セクションで、「Page name」フィールドにリストページの名前を入力します。
- オプション：モバイルリストページのデフォルトのアイコンを変更するには、イメージカタログからアイコンを選択します。
- 「Page name」フィールドのとなりの現在のアイコンをクリックします。
- 「Icon class picker」ウィンドウで、使用するアイコンを選択します。
- 「Case type」リストで、ビジネスプロセスを サポートするケースタイプを選択します。 例：ユーザーが宿泊カテゴリーなどの異なるカテゴリーの経費を提出するリストページの場合は、経費報告のケースタイプを選択します。
-
「Data page」リストで、ページ画面に入力するために使用するリストデータソースを選択します。
例：宿泊カテゴリーのすべての経費報告を保存するデータビューを選択します。補足：ケースタイプを作成すると、Pega Platformは自動的にリストデータソースを作成し、モバイルリストページで使用できるようになります。
-
「List item information」セクションで、 ページにワークアイテムを表示する方法を設定します。
例：以下のようなフィールドとプロパティの設定で、経費報告のページを表示することができます。選択肢 手順 ワークアイテムにフィールドを追加する - 「List item information」セクションで、「Add field」をクリックし、フィールドタイプを選択します。
- フィールドのとなりのリストで、実行時にフィールドにデータを入力するために使用するプロパティを選択します。
ワークアイテムからフィールドの削除 「List item information」セクションで、 削除するフィールドのとなりの「Delete this row」アイコンをクリックします。 - Primaryフィールドで、レポートの名前を定義するLabelプロパティを選択します。
- Secondaryフィールドで、費用の合計金額を定義するAmountプロパティを選択します。
- 次のSecondaryフィールドで、経費が提出される日時を定義する Create Date/Timeプロパティを選択します。
- 次のSecondaryフィールドには、宿泊費などの経費のカテゴリーを定義するカスタム プロパティを追加します。
- Statusフィールドで、レポートのステータスを定義するWork statusプロパティを選択します。
-
Swipe actionsセクションでは、実行時にユーザーが選択したワークアイテムをスワイプしたときに発生する動作を指定します。
例：経費報告書があるページの場合、以下のようなスワイプアクションを設定できます。選択肢 手順 右から左へのスワイプアクションの追加 「Right side actions」カテゴリーで、「Add actions」をクリックし、追加したいアクションを選択します。 左から右へのスワイプアクションの追加 「Left side actions」カテゴリーで、「Add action」をクリックして、追加するアクションを選択します。 スワイプアクションの削除 削除するアクションのとなりの「Remove」アイコンをクリックします。 スワイプアクションの名前変更 - 名前を変更するアクションのとなりの「Click to edit configuration」アイコンをクリックします。
- Nameフィールドに、アクションの新しい名前を入力します。
- 「Submit」をクリックします。
スワイプアクションのアイコンの変更 - アイコンを変更するアクションのとなりの「Click to edit configuration」アイコンをクリックします。
- 「Icon」セクションで、「Change」をクリックします。
- 「Icon class picker」ウィンドウで、使用するアイコンを選択します。
- 「Submit」をクリックします。
アクションのスワイプ方向の変更 選択したアクションを対応するスワイプ方向カテゴリーにドラッグします。 たとえば、スワイプ方向を 右から左に変更するには、アクションをRight side actionsカテゴリーにドラッグします。
スワイプアクションの順序の変更 補足：このオプションは、スワイプ方向に複数のアクションを追加した場合に使用できます。選択したアクションをスワイプ方向リストの上または下にドラッグします。ヒント：ページにとってより重要なアクションが画面の端に最も近い位置に表示されるようにすることで、モバイルアプリのユーザーがアイテムにアクセスしやすくなります。 - Right side actionsカテゴリーに、Edit detailsアクションを追加して、ユーザーが左にスワイプして 選択したExpense Reportを編集できるようにします。
- 「Right side actions」カテゴリーに「Attach file」のケースワイドアクションを追加し、ユーザーが左にスワイプすることによって、選択した経費報告書に請求書などのファイルを添付できるようにしました。
- Left side actionsカテゴリーに、Followアクションを追加して、ユーザーが 右にスワイプすることで、選択したExpense Reportに関する通知の受信を 開始できるようにします。
- オプション：ユーザーがボタンをタップすると新しいワークアイテムを作成するフローティングアクションボタンを追加するには、「Show create item button」のチェックボックスを選択します。
フローティングアクションボタンは、モバイルアプリのページの下部に表示されるボタンです。例：経費報告書のリストがあるモバイルリストページの場合、フローティングアクションボタンで新しい経費報告書を作成します。
- 「Save」をクリックします。
- Authoring mobile case pages for Cosmos React apps
ローコードオーサリング環境でケースページをカスタマイズして、最も関連性の高い情報を1つのユーザーフレンドリーなモバイルビューでハイライトします。 このようにして、ユーザーがモバイルデバイスでケースを効率的に表示および編集できるようにします。
- Adding a search gadget for Theme Cosmos and UI Kit mobile apps
検索機能を設定して有効にすることで、モバイルアプリの使い勝手が向上します。 検索範囲を特定のケースタイプに限定することで、より関連性の高い検索結果を保証し、検索速度が向上します。
- Adding a floating action button
モバイルアプリにフローティングアクションボタンを追加して、ページ上の最も重要なアクションを促進します。 たとえば、経費報告のモバイルアプリで新しい経費報告書を作成するケースフローを開始するフローティングアクションボタンを追加できます。
- Adding items to the menu bar
メニューバーにページやアクションを追加して、モバイルアプリに効果的なナビゲーションエクスペリエンスをもたらせます。 たとえば、ユーザーが基本的な連絡先情報のある画面に簡単にアクセスできるように、カスタムプロフィールページを経費報告アプリのメニューバーに追加できます。
