次の方法で共有


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

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

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

前提条件

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

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

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

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

    新しい画面を選択してから、スクロール可能な画面タイプを選択します。

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

    アプリに追加されたスクロール可能な画面を示すスクリーンショット。

コントロールの追加

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

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

キャンバスのスクロール可能な画面で強調表示されているセクション ボタンを追加します。

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

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

ヒント

データ カードに関する詳細は、データ カードについて理解する を参照してください。

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

    画像のコンテンツを説明する Alt テキスト。

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

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

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

    画面のデータ カードのサイズを変更して、画面の約 3 分の 2 を消費します。

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

    新しいデータ カードが画面に追加されました。

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

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

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

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

    画面の幅を広げるために ペン入力 コントロールのサイズが変更されました。

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

    スクロール可能な画面をプレビューします。

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

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

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

ヒント

フォームの操作については、キャンバス アプリのフォームを理解する を参照してください。

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

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

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

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

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

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

    Scroll に設定されたコンテナの Vertical overflow プロパティ。

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

    表示フォームを持つスクロールに設定された Vertical Overflow プロパティを使用したスクロール可能な垂直コンテナ。

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

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

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

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

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

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

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

    コンテナーの Flexible height プロパティがオフになっています。

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

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

    スクロール機能にコンテナーとフォームの高さを使用するスクロール可能なフォーム。

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

参照

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。