1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PL-200 学習メモ (2) : キャンバス アプリ(一覧画面、詳細画面)

Last updated at Posted at 2024-05-29

はじめに

この投稿は PL-200: Microsoft Power Platform 業務コンサルタントの学習をした内容のメモです。

投稿の一覧は以下のリンク先にあります。

前の投稿

キャンバス アプリ

  • キャンバスにボタンやテキストを配置することでコードを書かずにアプリが作れる
  • アプリの作成時にレイアウトを「タブレット」向けか「携帯 (スマホ)」向けかを指定する
    • 「タブレット」を選ぶと、設定からサイズも変更できる
      • 16:9 (既定)
      • 4:3 iPad など
  • Dataverse のデータから自動的にアプリを作ることができる
  • 既定で 2 分ごとに自動保存される

キャンバス アプリの作成

Dataverse から作成

  1. [作成] - [Dataverse] をクリック
    image.png

  2. [新しい接続] から Dataverse を選び、サンプルデータのテーブルを選択して [接続]
    image.png

  3. 自動的に一覧画面、編集画面、新規作成画面の 3 つの画面をもつアプリが作成される

  4. image.png

空のアプリから作成

同じキャンバスアプリを空のアプリから作成してみます。

一覧画面

  1. [作成] - [空のアプリ] をクリック

  2. [空のキャンバスアプリ] をクリックし、形式で [タブレット] か [携帯] を選択して [作成]
    image.png

  3. [挿入] - [垂直ギャラリー] をクリック
    ※[レイアウト] 配下からそのほかのギャラリーも選択できる
    image.png

  4. [データソース] を選択
    image.png

  5. ギャラリーが追加される
    image.png

  6. 表示する項目の配置は [プロパティ] の [レイアウト]、各項目に表示する内容は [フィールド] から指定できる
    image.png
    image.png

  7. ギャラリー内のラベルの文字の色やサイズといったプロパティも任意に変更できる
    ※ ギャラリーでは 1 行目の項目についてプロパティを変更すれば、すべての行に反映される。
    image.png

詳細画面

  1. [新しい画面] から空の画面を追加
    image.png

  2. [挿入] - [表示フォーム] をクリック
    image.png

  3. 一覧画面と同様にデータソースを選択し、[フィールド] から表示する列を選択
    image.png

  4. [詳細設定] - [Item] に以下を入力することにより、一覧画面で選択した行を表示することができる

Item 欄:
【一覧画面のギャラリーの名前】.Selected

例:
Gallery1.Selected

image.png

一覧画面からの画面遷移

一覧画面をクリックした際に、詳細画面に遷移するように変更します。
画面をクリックした際の動作は onSelect プロパティで制御します。

  1. 一覧画面の Garallery の onSelect に以下を設定する
Navigate(DetailScreen)

image.png
2. Garallery 配下のラベルなどの onSelect に以下を設定する
※ 初めから設定されています。

Select(Parent)

image.png

これで Garallery 内のどこをクリックしても、Garallery の onSelect に設定されている Navigation により、詳細画面に遷移するようになります。

Animation1.gif

戻るボタン

詳細画面から一覧画面に戻るためのボタンを追加します。

  1. [挿入] - [図形] - [戻る矢印] をクリック
    image.png
  2. 配置した 戻る矢印 の onSelect プロパティに以下を設定する
Back()

image.png

これで一覧画面から詳細画面に遷移した後で、戻るボタンで元の一覧画面に戻ることができるようになりました。

Animation2.gif

画面遷移におけるアニメーション

Navigation() / Back() ではクリックした際のアニメーションを設定することもできます。

例:
Grallery と 戻る矢印 の onSelect を以下に変更すると、ページがスライドして遷移する効果を設定できます。

Navigate(DetailScreen, ScreenTransition.Cover)
Back(ScreenTransition.UnCover)

Animation3.gif

次の投稿

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?