キャンバス アプリでスクリーンを追加して移動する

一般的なアプリのシナリオ向けに事前に構築されたスクリーンを追加して、最新の応答性の高いアプリを作成します。 スクリーンには、さまざまなスクリーンサイズに適応するレスポンシブなコンテナーと最新のコントロールが備わっています。 さまざまなレイアウトやコントロールを備えたカスタムスクリーンを追加することもできます。

次の新しい事前構築済みスクリーンを利用できます。

• 承認要求
• ようこそ画面
• ヘッダーとギャラリー
• ヘッダーとフォーム
• ヘッダーとテーブル

新しい画面を追加します

1. Power Apps にサインインします。

2. キャンバスアプリの作成用、または編集用に開きます。

3. コマンド バー で、新規スクリーン を選択して、スクリーンレイアウトを選択します。

4. アプリを プレビュー して、さまざまなデバイスでどのように表示されるかを確認します。 詳細については、 プレビュー アプリをご覧ください。

チップ

アプリが実行されているデバイスのディスプレイのサイズに適応させるには、フィットするようにスケール オプションをオフにします。

ようこそ画面

ようこそ画面 は、画像、タイトル、説明などのタイルをカスタマイズできるため、アプリの最初の画面に最適です。 メイン コンテナーでタイルを追加または削除することで、タイルの数を変更できます。 タイルを使用して、ユーザーをアプリの他の部分に移動させてください。

ようこそ画面 には、次のコントロール テンプレートがあります。

• スクリーンコンテナ
  • ヘッダー コンテナー
    • ヘッダー
  • メイン コンテナー
    • コンテナー
      • 画像コンテナー
        • Image
      • タイトル コンテナー
        • 機能項目ボタン
        • 説明のテキスト

ようこそ画面のサイズを追加してカスタマイズする

1. 新規スクリーン>ウェルカムスクリーン を選択します。

2. タイルの画像を変更するには、それを選択し、編集 を選択します。

3. 選択 で 機能アイテム ボタン コントロールを選択し、 プロパティ ペイン に独自のテキストを追加します。

   

4. 短い説明または魅力的なメッセージ テキストを選択、独自のテキストを追加します。

5. 必要に応じてタイルを追加および削除します。

   • ツリー ビューにタイルを追加するには、 Container 項目をコピーして貼り付けます。

   • ツリー ビューでタイルを削除するには、 コンテナー を右クリックし、選択 削除 を選択します。

ヘッダーとギャラリーの画面

ヘッダーとギャラリー スクリーンを使用して、製品カタログのようなさまざまな製品またはサービス情報を表示します。 ギャラリー コントロールを 接続 すると、ほとんどカスタマイズを必要とせずにカタログが自動的に作成されます。

ヘッダーとギャラリー スクリーンの ギャラリー コントロール は、 クラシック コントロールです。 モダン ギャラリー コントロールがリリースされると、 ヘッダーとギャラリー 画面でそれが使用されます。 詳細についての キャンバス アプリにおけるモダン コントロールとテーマの概要 を参照してください。

ヘッダーとギャラリー 画面には、次のコントロール テンプレートがあります。

• スクリーンコンテナ
  • ヘッダー コンテナー
    • ヘッダー
  • メイン コンテナー
    • ギャラリー
      • ギャラリーコンテナ
        • 画像コンテナー
          • Image
        • タイトル コンテナー
          • タイトル テキスト
          • 説明のテキスト
        • ボタン コンテナー
          • Button

ヘッダーとギャラリー画面を追加してカスタマイズする

1. 新規スクリーン>ヘッダーとギャラリー を選択します。

2. ツリー ビューで、ギャラリー を選択し、Dataverse などのデータ ソースにそれを接続します。

3. 画像、タイトル テキスト、説明テキストなど、ギャラリー内の特定のコントロールを選択します。 コントロールのプロパティで、 ThisItem 構文を使用して、必要な画像、タイトル テキスト、および説明を設定します。

   たとえば、タイトル テキスト コントロールに アカウント名 を追加するには、数式バーに ThisItem を入力して検索します。データ セットから追加できる使用可能な項目の一覧を表示します。

   

承認要求画面

承認リクエスト 画面には、ヘッダー、送信ボタンのあるフォーム、および事前定義されたステージのあるギャラリーがあります。 承認リクエスト 画面は、承認リクエストの送信やビジネスのワークフロー プロセスの表示など、フォームの送信によってアクションがトリガーされるシナリオに役立ちます。

チップ

承認リクエスト画面を追加すると、データ ソース を使用して 接続 するように求められます。 データ ソース はリクエスト フォーム内のフィールド名を決定します。

承認リクエスト 画面には、コントロール用の次のテンプレートがあります。

• スクリーンコンテナ
  • ヘッダー コンテナー
    • ヘッダー
  • メイン コンテナー
    • フォーム コンテナー
      • フォーム タイトル テキスト
      • 承認フォーム
      • 送信ボタン
    • サイド バー コンテナー
      • レビューワー テキスト
      • レビューワー ギャラリー

承認リクエスト画面を追加してカスタマイズする

1. 選択 新しい画面>承認リクエスト。

2. ApprovalForm のツリー ビューでは、 Dataverse などの 接続 を データ ソース に入力するように求められます。

3. データ ソースの選択。

4. 承認ステージの詳細を表示するには、ツリービューで、SidebarContainer ノードの下の ReviewersGallery を選択します。 その後プロパティ ウィンドウで、詳細 タブを選択して、品目 に移動します。

   承認段階の詳細は次のとおりです。

   • 名前: ステージや承認者の名前
   • タイトル: ステージや承認者のサブタイトル
   • 状態: ステージの状態
   • 現在: このステージが承認リクエストの現在のステージであるかどうか

   

承認者に通知するために、ボタンに Power Automate 承認ワークフローを追加できます。 詳細は、Power Automate で承認ワークフローを作成およびテストする を参照してください。

ヘッダーとフォーム

ヘッダーとフォーム 画面には、ヘッダー、フォーム、およびフォームを送信するための2つのボタンまたは キャンセル フォーム送信ボタンがあります。 この画面は、フルスクリーンフォームを使用するのに最適です。

ヘッダーとフォーム 画面には、コントロール用の次のテンプレートがあります。

• スクリーンコンテナ
  • ヘッダー コンテナー
    • ヘッダー
  • メイン コンテナー
    • フォーム コンテナー
      • Form
    • ボタン コンテナー
      • キャンセル ボタン
      • 送信ボタン

ヘッダーとフォーム画面を追加してカスタマイズする

1. 新規スクリーン>ヘッダーとフォーム を選択します。

2. ツリー ビューでは、フォーム が選択され、フォームをデータ ソースに接続するためのプロンプトが表示されます。

3. データ ソースの選択。

4. オプションで、スクリーンの応答性を最大限に高めるには、フォーム上の各データ カードを選択し、プロパティ ウィンドウの 表示 タブの 幅をフィット を オン に設定します。

ヘッダーとテーブル

ヘッダーとテーブル スクリーンには、ヘッダー コントロールとテーブル コントロールの 2 つのコントロールがあります。 このテンプレートは、詳細なデータ テーブルをスクリーンに表示するのに最適です。

ヘッダーとテーブル 画面には、次のコントロールがあります。

• ヘッダー コンテナー
  • ヘッダー
• メイン コンテナー
  • テーブル

ヘッダーとテーブル画面を追加してカスタマイズする

1. 選択 新しい画面>ヘッダーとテーブル。

2. ツリー ビューで、選択 Table and接続 して データ ソース にします。

テーブルとフォーム

テーブルとフォーム画面には、モダン テーブル コントロールとモダン フォーム コントロールという2つの主要なコントロールが含まれています。 このテンプレートには、データの接続とカスタマイズを簡単に行うための Power Fx 数式が組み込まれています。 このテンプレートは、フォームを使用してレコードを選択および編集するのに最適です。

テーブルとフォーム画面には、次のコントロールが含まれています。

• スクリーンコンテナ
  • ヘッダー コンテナー
    • ヘッダー コントロール
  • ボディ コンテナー
    • テキスト入力 (検索)
    • テーブル コントロール
    • フォーム コントロール
    • ボタン
      • 新しい
      • 編集
      • Delete
      • 送信
      • キャンセル​​

テーブルとフォーム画面の追加とカスタマイズ

Power Apps Studio の場合

1. 新規スクリーン>テーブルとフォーム を選択します。

2. インライン アクション バーで データ を選択します。

3. 希望のデータ ソースを選択します。

   

   接続されると、テーブル コントロールとフォーム コントロールの両方が データ ソース にバインドされます。

テーブル コントロールでレコードを 選択 すると、フォームに選択したレコードの詳細が表示されます。

このテンプレートのすべてのボタンには事前に構築された Power Fx機能があるため、さらにカスタマイズする必要はありません。 選択したデータ ソースにスクリーンを接続すると、スクリーンは完全に機能するようになります。

スクリーンの並べ替え

アプリに複数のスクリーンがある場合は、ツリー ビューでそれらを異なる順序で配置できます。

並べ替えるスクリーンのオーバーフロー メニューを選択し、上に移動 または 下に移動 を選択します。

StartScreen プロパティを使って、このスクリーンが最初に表示されるように設定します。

ナビゲーションの追加

アプリに複数の画面がある場合は、ユーザーが画面間を移動できるようにナビゲーションを追加できます。

1. 選択されたスクリーンで、挿入 を選択します。 検索ボックスで、Next arrow とタイプしてそれを選択します。

2. 矢印を表示したい場所にスクリーン上で移動してください。

3. 矢印を選択した状態で、 OnSelect プロパティを Navigate 関数に設定します。たとえば、 Navigate(Target, Fade) となります。

   Target を、移動する画面の名前に置き換えます。

   

   この例で、ユーザーが矢印を選択する時に、ターゲット スクリーンがフェードインします。

4. ターゲット スクリーンで、 戻る矢印 アイコンを同じ方法で追加します。 OnSelect プロパティを設定します（例： Navigate(Target, ScreenTransition.Fade)）。

   ターゲット を戻りたいスクリーンの名前に置き換えてください。

関連情報

スクリーン コントロールのリファレンス