演習 - アプリのナビゲーションの練習

このモジュールの終わりに近づいているため、ガイド付きの演習で学んだことを応用してみましょう。

この例では、Contoso Coffee Machines アプリで画面遷移の構成を続けます。 別のマルチスクリーン アプリを使用している場合、同様の手順に従うことができます。

1. Power Apps のホーム ページにサインインし、Contoso Coffee Machines アプリを編集モードで開きます。

2. ホーム画面で、カタログの表示ボタンを選択します (以下の例の Button2)。 OnSelect プロパティで、以下を置き換えます。

   Navigate('Catalog Screen')

   これを以下に置き換えます。

   Navigate('Catalog Screen',ScreenTransition.Cover)

   

3. 引き続きホーム画面で、Admin Screen ボタンを選択します。 その OnSelect 式で、以下を変更します。

   Navigate('Admin Screen')

   これを以下に変更します。

   Navigate('Admin Screen',ScreenTransition.Fade)

4. アプリをプレビューします。 遷移を確認するには、Catalog ボタンと Admin ボタンを選択します。 次に、戻る ボタンを使用してホーム画面に戻ります。

5. 編集モードに戻します。 Admin Screen で、戻るボタンとして使用される矢印アイコンを選択します。 OnSelect プロパティを次のように変更します。

   Back()

   これを以下に変更します。

   Back(ScreenTransition.UnCoverRight)

6. アプリをもう一度プレビューします。 Admin Screen ボタンを選択してから、戻るボタンを選択します。 戻る遷移の違いに注目してください。

7. 編集モードで、新しい画面>テンプレート>成功の順に選択して新しい画面を挿入します。 名前を Success Screen に変更します。

8. Catalog Screen で、ツリー ビューからフォーム コントロールを選択します。

9. フォームの OnSuccess プロパティを次のように設定します。

   Navigate(‘Success Screen’,ScreenTransition.Fade)

10. ツリー ビューの Success Screen に移動し、タイマー コントロールを挿入します。

11. 次のタイマー コントロールのプロパティを設定します。

    • AutoStart: true

    • Duration: 4000

    • OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • Visible: false

    

12. Catalog Screen に戻り、アプリをプレビューします。 フォームに変更を加え、変更の保存を選択します。

    アプリに Success Screen が 4 秒間表示され、その後 Catalog Screen に戻ります。

13. プレビュー モードを終了し、Home Screen に戻ります。 次に、ドロップダウン ナビゲーション メニューを追加します。

14. ドロップダウン コントロールを挿入し、ヘッダーの四角形の左上領域の下に配置します。

15. ドロップダウンの上にテキスト ラベル コントロールを追加し、その Text プロパティを次のように設定します。

    Screen Navigation

    その Color プロパティを次のように設定します。

    Color.White

16. Dropdown コントロールを選択し、そのプロパティを設定します。

    • Default: ""

    • Items: ["", "Catalog Screen", "Admin Screen"]

17. その OnChange プロパティを次のように設定します。

    Switch(
        Self.SelectedText.Value,
        "Catalog",
        Navigate(
            'Catalog Screen',
            ScreenTransition.Cover
        ),
        "Admin",
        Navigate(
            'Admin Screen',
            ScreenTransition.Cover
        )
    );
    Reset(Self)
    

    

18. アプリをもう一度プレビューします。 ドロップダウンをテストし、画面間のナビゲーションを確認します。

19. 編集モードに戻り、Catalog Screen を選択します。 戻る アイコンをコピーし (Ctrl+C)、貼り付けます (Ctrl+V)。 複製アイコンをヘッダーの四角形の右上に移動します。

20. 複製したアイコンをホーム アイコンに変更します。

21. ホーム アイコンの OnSelect プロパティを次のように設定します。

    Navigate('Home Screen', ScreenTransition.CoverRight)

22. アプリをプレビューします。 Catalog Screen で、ホーム アイコンを選択すると Home Screen に戻ることを確認します。

アプリでナビゲーション機能を正常に構成しました。

• 画面遷移を伴うナビゲーション機能と戻る機能。
• OnSuccess を使用してフォームを送信すると表示される Success Screen。
• OnTimerEnd を介して遅延後に移動するタイマー。
• OnChange を使用したナビゲーション用のドロップダウン メニュー。
• ホーム画面に戻るためのホーム アイコン。

では、知識チェックを行いましょう。