Power Apps キャンバス コンテナで簡単レスポンシブ 実用編(サクッとLT)

3.4K Views

June 24, 23

スライド概要

Power Apps キャンバス コンテナで簡単レスポンシブ 実用編です。

profile-image

Power Apps 大好きおじさんです。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

\サクッとLT/ POWER APPS キャンバス コンテナで簡単レスポンシブ実用編 2023-06-22 MakotoMaeda

2.

はじめまして! Power Apps 大好きおじさんです。 まえださん、もしくはおうじゃさんとお呼びください。 おじさんでもいいです。 Twitter:Makoto Maeda(@bothernpa)さん / Twitter ブログ:Power Appsの使い方 (hateblo.jp) コミュニティ:おうじゃさんといっしょ - connpass #おうじゃさんといっしょ

3.

こんなことあるよね スマホとPCで使いたい! ♪

4.

こんなことあるよね レスポンシブさせよう。 ♪

5.

こんなことあるよね でも、難しそう・・・ ・・・

6.

コンテナ使うといいよ! (2回目)

7.

ひとくち概要 今回はレスポンシブアプリの実例をご紹介します! コンテナでレスポンシブに作ってみました。

8.

機能概要 3つの画面のあるアプリ。会社と担当者を一緒に保存できます。 ・開始画面 ・取引先企業フォーム ・取引先担当者フォーム 画面イメージは次へ。

9.

画面構成(縦)

10.

画面構成(横)

11.

画面構成(コンテナ)

12.

画面構成(コンテナ)

13.

画面構成(コンテナ)

14.

画面構成(コンテナ)

15.

TIPS

16.

アプリの領域が画面にフィットするよう設定 設定変更 画面に合わせて倍率を変更 オフ

17.

横並びで切り替え要素を配置 水平コンテナ内にそれぞれのステップの画面要素(コンテナ)を配置しています。 非表示

18.

ステップ要素のコンテナは変数で表示/非表示を切り替え スタート画面.Visible = locStep = 0 取引先企業フォーム画面.Visible = locStep >= 1 取引先担当者フォーム画面.Visible = locStep = 2

19.

親コンテナにフィットさせる LayoutAlignItems = LayoutAlignItems.Stretch

20.

比率を崩したくないので、最小幅は小さく設定 LayoutMinWidth = 1 または LayoutMinHeight = 1

21.

まとめ Visible や LayoutDirectionを動的に切り替えてレスポンシブさせよう! 必要に応じて高さや幅、割合も変えられます! ※コストが増すので、やりすぎ注意。 コンテナでレスポンシブやってみよう!