LoginSignup
4
6

More than 3 years have passed since last update.

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でレスポンシブなアプリを作る

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6