表示モードを式で制御する

  • 8 分

Power Apps では、コントロールの DisplayMode プロパティを使用して、アプリを使用するときのコントロールと情報の外観と機能を変更することができます。 たとえば、画面上にボタンがある場合に、そのボタンがいつ選択可能であるかをユーザーに示すには、 ボタンが選択可能なときは正常に表示し、選択可能でないときは無効にして、ユーザーが選択できないようにします。 このような機能を実現するには、コントロールの DisplayMode プロパティを構成します。 すべてのコントロール (画面を除く) には、次の 3 つの DisplayModes があります。

  • DisplayMode.Disabled

  • DisplayMode.Edit

  • DisplayMode.View

コントロールをアプリに追加すると、表示モードは既定で DisplayMode.Edit になります。

さまざまなモードを見てみましょう。

DisplayMode.Edit

例としてボタン コントロールを使用します。DisplayMode プロパティを DisplayMode.Edit に設定すると、ボタンは想像どおりに機能します。 つまり、ユーザーはボタンを選択して操作できます。 また、これは、コントロールの OnSelect などの他のプロパティを使用して、ボタンが選択されたときにアクションをトリガーできることを意味します。

DisplayMode.Disabled

ボタン コントロールの例に戻って考えてみると、DisplayMode プロパティが DisplayMode.Disabled に設定されている場合、ボタンはグレー表示になり選択できません。 コントロールがグレー表示になるのは、プロパティが無効であるためです。 各コントロールには若干異なる無効プロパティがあり、それにより、このモードでのコントロールの外観が決まります。 これらのプロパティには次のものが含まれます。

  • DisabledBorderColor - コントロールの境界線の色。

  • DisabledColor - コントロール内のテキストの色。

  • DisabledFill - コントロールの背景色。

これらのプロパティは必要に応じてカスタマイズできますが、最初は既定値を使用するとよいでしょう。

DisplayMode.View

再度ボタン コントロールの例に戻って考えてみると、DisplayMode プロパティが DisplayMode.View に設定されている場合、ボタンの外観は DisplayMode.Edit のときとまったく同じですが、選択することはできません。 おそらく、これにはエンド ユーザーが不満を感じたり、混乱したりすることでしょう。 前の例よりもう少し詳しく説明すると、ユーザーが特定のときにだけ選択できるようにアプリのボタンを構成する場合は、DisplayMode.View ではなく DisplayMode.Disabled を検討する必要があります。 どちらのモードでもユーザーはボタンを選択できませんが、無効モードでは選択できないことが視覚的にも示されます。

試してみる

  1. キャンバス アプリ画面に 3 つのボタンを追加します。

  2. それぞれに "編集"、"無効"、および "表示" と名前を付けます。

  3. [無効] ボタンを選択し、DisplayMode プロパティを以下に更新します。

    DisplayMode.Disabled

  4. [表示] ボタンを選択し、DisplayMode プロパティを以下に更新します。

    DisplayMode.View

  5. アプリをプレビュー モードにし、カーソルを他のボタンに移動して選択します。 色が変更され、クリック可能なのは [編集] ボタンだけであることを確認します。 この画像は、[編集] ボタンの上にマウスを移動すると、その色がどのように変化するかを示しています。 他のボタンはそのまま残ります。 この画像は、プレビュー モードでマウス カーソルを移動している間の [編集] ボタンの様子を示しています。 色が若干暗く見えることに注意してください。

[編集] ボタンの周囲にボックスが表示されている 3 つのボタンのスクリーンショット。

各コントロールの機能は少しずつ異なるため、あるコントロールの DisplayMode が別のコントロールには同じように影響しない場合があります。 さまざまなコントロールの詳細については、Power Apps のコントロールとプロパティを参照してください。

そこで、ユーザーが操作できるコントロールは、Visible プロパティが true であるものと、DisplayMode が DisplayMode.Edit であるもののみだということを確認しました。