キャンバス アプリにスクロール画面を追加する

キャンバス アプリで、ユーザーがスクロールしてさまざまな項目を表示できるスクリーンを作成します。 たとえば、ユーザーがスクロールすると表示できるデータを複数のグラフで表示する電話アプリを作成します。

セクションに複数のコントロールを追加すると、それが電話アプリであるかまたはタブレット PC アプリであるかに関係なく、コントロールはそのセクション内で相対位置を維持します。 画面サイズと向き は、セクションの配置にも影響する場合があります。

前提条件

1. 空白のキャンバス アプリを作成します。
2. コントロールを追加して構成する方法について学習します。

スクロール スクリーンを作成する

1. トップ メニューの下で、新規スクリーン を選択します。

2. スクロール可能 を選択します。

   

   新しいスクロール可能なスクリーンがアプリに追加されます。

   

コントロールの追加

スクロール可能なスクリーンには、規定で 1 枚のデータ カードを持つ流体グリッドが含まれています。 データ カードは、画面上のビルディング ブロックを分離するのに役立ちます。 複数のコントロールで画面をスクロール可能にするには、データ カードを追加します。 次に、必要に応じてデータ カードにコントロールを追加します。

データ カードを追加するには、スクロール可能な画面の下で セクションを追加 を選択します。

規定でスクロール可能な画面で使用可能なデータ カードにコントロールを追加することから始め、次に別のデータカードを追加する新しいセクションを追加します。 新しいデータ カードが利用可能になったら、新しいデータ カード内に別のコントロールを追加します。

同時に、データ カードとデータカード内のコントロールの両方が画面の規定の長さを延長し、画面のスクロール機能を使用する必要があります。

1. 左ウィンドウから + (挿入) を選択します。

   

2. チャート を拡大して、次に 列チャート を選択します。

3. 画面に追加されたグラフのサイズを変更して、画面の約 3 分の 2 を消費します。

4. データ カードのサイズを、追加したグラフのサイズに縮小します。

   

5. 画面上の セクションを追加 を選択して、別のセクションを追加します。

   

6. 挿入 > チャート > 折れ線グラフ を選択します。

7. 画面右側のスクロール バーを使用して画面を下にスクロールし、セクションを追加 を選択して 3 枚目のデータカードを追加します。

8. 挿入 > 入力 > ペン入力 を選択します。

9. データ カード内の幅を広げて、ペン入力 コントロールのサイズを変更します。

   

10. キーボードで F5 を押して、アプリをプレビューします。 スクロール バーを使用して下にスクロールし、画面の下部に移動します。

    

スクロール可能な画面の使用方法を示したので、ビジネス要件に従ってアプリをさらにカスタマイズします。

フォームのスクロール画面

Power Apps がデータカードを使用してセクションを作成し、表示フォーム と 編集フォーム コントロールを挿入することはできません。 このようなコントロールの組み合わせをネストすると、アプリのパフォーマンスが低下する可能性があります。 したがって、フォーム コントロールを使用する場合は、垂直コンテナー コントロールのようなレイアウト コンテナを使用してください。

フォームを使用してスクロールを構成するには、複数の異なる方法があります。

Vertical Overflow プロパティを使用する

Vertical Overflow プロパティの使用は、フォームのあるスクロール画面を使用する基本的な方法です。

1. スクロール可能な画面ではなく、空白の画面を使用していることを確認してください。

2. 挿入 > レイアウト を選択し、次に Vertical container を選択します。

3. プロパティ ペインの画面の右側から、Vertical Overflow プロパティ ドロップダウンを選択して、スクロール を選択します。

   

4. 必須フィールドを含む編集フォームまたは表示フォームを追加します。 フィールドのリストが画面内のコンテナのサイズを超えると、スクロール バーを使用してコンテナ内をスクロールできるようになります。

   

Vertical container 内のコンテナを使用する

複雑なアプリの場合は、垂直コンテナー コントロール内にコンテナーを追加することを検討してください。 次に、フォームと内部コンテナの高さを次のように調整します。

1. スクロール可能な画面ではなく、空白の画面を使用していることを確認してください。

2. 挿入 > レイアウト を選択し、次に Vertical container を選択します。

3. プロパティ ペインの画面の右側から、Vertical Overflow プロパティ ドロップダウンを選択して、スクロール を選択します。

4. 挿入 > レイアウト を選択し、次に コンテナー を選択します。

5. プロパティ ペインの画面の右側から、Flexible height プロパティを オフ にします。

   

6. 必須フィールドを含む編集フォームまたは表示フォームを追加します。

7. フォームの画面内でスクロールできるようにするには、手順 4 で追加した height of the container とフォームを更新します。

   

アプリの応答性の操作の詳細については、レスポンシブ キャンバス アプリの構築 と レスポンシブ レイアウト を参照してください。

参照

• Horizontal コンテナー
• 垂直コンテナー