アプリの内容
ペン入力でお絵かきをし、お絵かきをした画像をSharePoint Listの添付ファイルに保存します。
SharePoint Listに保存されている添付ファイルをギャラリーに表示するようにします。
画像を表示する画面を作成する
SharePointに絵を保存する用のリストを作成する。
SharePointから新規でリストを作成しておきます。
お絵かきパーツ、タイトルを入力する画面を作成する
挿入タブからパーツを好きな位置に配置します。
SharePointのリストの保存したいので、フォームを使っていきます。
(こちらの記事を参考にさせていただきました！)
FormをSharePointListと紐付ける
編集フォームのパーツを配置し、細かい設定をしていきます。
データソースをさきほど作成したSharePointListを選択します。
フォームの入力画面が自動で作成されます。
不要な項目は、フィールドから削除を行います。
新規作成なので、Formのプロパティの規定モードを新規に設定
Formは入力する時に邪魔なので、サイズをちっちゃくして最背面に移動し、隠しておきます。
コレクションの作成
コレクションに添付ファイル情報を載せて、それをフォームの添付ファイル項目にセットします。
ボタンのOnSelectに下記のように記載
Collect(
LocalImages,
{
DisplayName: ImageName.Text & ".png", // ファイル名を指定
Image: PenInput.Image, // ペン入力項目を指定
Id: "1" // なぜか必要な項目
}
);
これでボタンを押すとコレクションが作成されます。
保存された内容は、ファイルのコレクションで確認できます。
コレクションとFormの紐付け
Formに先ほどのコレクションを紐付けます。
添付ファイル項目がありますので、Itemsに値を設定をします。
Itemsは詳細設定にあります。
Itemsには、コレクションを紐付け、NameにDisplayName、ValueにImageを設定
ボタンを押した時の挙動を設定する
ボタンを押した時に、以下の挙動をするように設定します。
- SharePointに保存するようにする
- 次回入力用に入力項目やFormをリセットしておく
- 違う画面に遷移させる(後で作る画像一覧に遷移するように)
OnSelectに下記のように追記します。
Collect(
LocalImages,
{
DisplayName: ImageName.Text & ".png",
Image: PenInput.Image,
Id: "1"
}
);
SubmitForm(DrawImageForm);
ResetForm(DrawImageForm);
Reset(PenInput);
Reset(ImageName);
Navigate([@ImageList])
画面表示時に、コレクションをクリアするようにしておく
コレクションは作成時はクリアさせておく必要があります。
書いた絵を一覧表示させる画面を作る
SharePointリストに格納された画像を一覧で表示させるのはギャラリーで表示させます。
（こちらの記事を参考にさせていただきました！）
ギャラリーでSharePointリストの添付ファイル画像を表示させるようにする
画面にギャラリーを配置しデータソースは、SharePointリストを設定
ギャラリーのImageに添付ファイルを表示させるようにします。
添付ファイルはテーブル(配列？)ようになっているので、Firstで囲って最初のレコードを取得するようにしておきます。
First(ThisItem.添付ファイル).Value
画像を作成日が新しい順にソートする
作成日順でソートするには、SharePointリストに作成日を表す項目を追加し、
ギャラリーのItemsを下記のように変更します。
Sort(DrawAppList,CreateDate,Descending)
つまったところ
フォームのItems設定
Name,Valueが正しく設定されてないと保存できませんでした；；
最後
PowerAppsで簡単すぎず、みんなで遊べるアプリを使いたくてつくってみました。