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 学習メモ (5) : キャンバス アプリ(コンポーネント、コンテナー、コレクション)

Last updated at Posted at 2024-08-05

はじめに

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

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

前の投稿

コンポーネント

キャンパスアプリの中で再利用な部品をコンポーネントとして、作成することができます。

image.png

作成したコンポーネントは [挿入] - [カスタム] からアプリで利用できます。

image.png

コンポーネントの注意点

  • コンポーネントではコンテキスト変数ではなく、グローバル変数を使用する
    UpdateContext 関数はコンポーネントでは使用できません。
  • コンポーネントとアプリの間の入出力はカスタムプロパティで行う

カスタムプロパティ

コンポーネントとアプリの間の入出力は、コンポーネントに定義したカスタムプロパティで行います。

アプリからコンポーネントへの入力

アプリからコンポーネントへの値の入力は、コンポーネントのカスタムプロパティで [プロパティの型][入力] に指定します。

image.png

アプリ側からコンポーネントのカスタムプロパティに値を入力することができます。

image.png

コンポーネントからアプリへの出力

コンポーネントからアプリへの値の出力は、コンポーネントのカスタムプロパティで [プロパティの型][出力] に指定します。

image.png

アプリ側からコンポーネントのプロパティとしてカスタムプロパティの値を参照することができます。

image.png

コンポーネントのインポート・エクスポート

作成したコンポーネントはエクスポートして、ほかのアプリにインポートすることもできます。
※ 現在は後述のコンポーネントライブラリの利用が推奨されています。

image.png

コンポーネントライブラリを作成すると、複数のコンポーネントをまとめてインポートしたり、コンポーネントのバージョンアップを簡単に行うことができます。

image.png

image.png

コンテナー

コンテナーの中にコントロールを配置することで、コントロールを等間隔で配置したり、画面サイズに応じて表示を変えたりすることができます。

image.png

以下のように、コンテナーの Width プロパティをスクリーンのサイズに設定しておき、コンテナ内のコントロールを折り返し配置するようにしておきます。

image.png

スクリーンのサイズに合わせて、自動的にコントロールが配置されます。

image.png

image.png

コレクション

コレクションを使用すると、アプリの中でテーブルのようなデータを生成して保存できます。コレクションのデータはテーブルと同じようにギャラリーで表示できます。

コレクションへのレコードの追加・削除

Collect 関数でレコードをコレクションへ追加できます。

Collect(【コレクション名】, {【列名1】: 【データ1】,【列名2】: 【データ2】})

例:
Collect(MyCollection, {"Text": TextInput1.Text})

Clear 関数でコレクションの内容を削除します。ClearCollect 関数では内容を削除してからレコードの追加します。

Clear(【コレクション名】)
ClearCollect(【コレクション名】, {【列名1】: 【データ1】,【列名2】: 【データ2】})

ギャラリーの Items プロパティにコレクションを指定することで、ギャラリー内でコレクションを表示できます。

image.png

image.png

コレクションのデータの保存、読み込み

コレクションのデータはアプリを閉じると削除されます。
SaveData 関数、LoadData 関数を使用するとコレクション内のデータ
を端末内に保存して、後で読み込むことができます。

SaveData(【コレクション名】, 【保存名】)
LoadData(【コレクション名】, 【保存名】)

image.png

Web ブラウザでのコレクションの保存は投稿時点でプレビューの機能なので、設定からオンにする必要があります。

image.png

次の投稿

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?