Help us understand the problem. What is going on with this article?

Power Apps レスポンシブ対応

Power Apps とは

Power Apps は、アプリ、サービス、コネクタ、データプラットフォームのスイートであり、ビジネスニーズに合わせてカスタムアプリを構築するための迅速なアプリケーション開発環境を提供します。

Power Apps を使用すると、基になるデータプラットフォーム (Common Data Service)またはさまざまなオンラインおよびオンプレミスのデータソース (SharePoint、Excel、Office 365、Dynamics 365、SQL Server など)に格納されているビジネスデータに接続するカスタムビジネスアプリをすばやく作成できます。

image.png

レスポンシブ対応

以前作成したアプリのレスポンシブ対応をしてみます。

ちなみに公式では、このような記述がされています。

携帯電話用の Dynamics 365 およびタブレットアプリがインストールされていない場合でも、デバイスの画面解像度が十分に高い限り、タブレットで web ブラウザーを使用できます。

Power Appsは、スマホアプリやタブレットアプリ、ブラウザ表示でも使用することができます。

ちなみにレスポンシブ対応前は、このような感じになってしまい、スマホサイズの画面がタブレットやブラウザ(Dynamics 365 ホームページ)で表示できます。

<スマホ画面(iPhone7)>
iOS の画像 (4).png

<タブレット画面(iPad)>
iOS の画像 (2).png


demo002.png

STEP1 設定変更

Power Appsの設定を変更します。
これで、全ての端末で開いた際にスマホサイズ表示になっていた状態が解除されます

demo001.png
demo005.png

上記に設定変更後、以下のように、表示が崩れた状態になります。

demo003.png

STEP2 画面サイズの取得方法

画面サイズは、コードから以下の値で取得できます。

横幅: App.Width
縦幅: App.Height

トップ画面のGallery部分にこの値を適応させると、、

demo006.png

横幅

App.Width

高さ

App.Height - (RectQuickActionBar1_1.Height + TextSearchBox1.Height)

Y座標

RectQuickActionBar1_1.Height + TextSearchBox1.Height

これで、トップ画面はこのような感じになります。

<タブレット画面>

iOS の画像 (3).png

<ブラウザ画面>

demo004.png

誤り、改善点や疑問点ありましたらコメント下さい。宜しくお願い致します。

参考記事

PowerAppsでレスポンシブなアプリを作る

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした