PowerApps初心者勉強会ハンズオン住所録(公開用)詳細ステップ版

11月22日に行いましたPowerApps初心者勉強会のハンズオン資料詳細版を公開します。

Transcript

1. セクション２：ハンズオン 小林 竜也
2. 本日作成するアプリ：住所録 一覧表示画面 登録・修正画面 機能： 一覧表示 登録 修正 削除 検索 データベース Common Data Service
3. 使用するパーツ説明 ギャラリー フォーム データを登録し たり編集したり するパーツ データを一覧表 示するパーツ アイコン アプリ内に設置 できるイラスト ボタン 画面を遷移したり 決定を許可する
4. データ保存場所を作成（エンティティ） ①左メニューから「エン ティティ」を選択 ②上部メニューより、 「新しいエンティティ」 を選択
5. エンティティ作成 ③エンティティの 編集 表示名：住所録 表示名の複数形： 住所録 名前：AddressBook 「完了」を押す。 データ保存場所を作成
6. フィールド追加 ④「フィールドの 追加」を選択 Name、Email、 Addressの3つの フィールドを作成 します。（手順は 以下の通り） ※初回作成時にある 「Primary Name」は、削 データ保存場所を作成
7. フィールド追加 ⑤Nameフィール ドの作成 ※初回作成時に自動的に 作成できる「Primary Name」は、削除できな いので、これをName フィールドに変更します。 データ保存場所を作成
8. フィールド追加 ⑥PrimaryName を クリックして、右 に出てくる ⑥－１「表示名」 ⑥－２「名前」を Nameに変更。 ⑥－３ 完了を押す。 データ保存場所を作成 ⑥ ⑥ー１ ⑥ー2 ⑥ー3 Nameフィールドの作成
9. フィールド追加 ⑦「フィールドの追加」 を選択 ⑦－１「表示名」 ⑦－２「名前」を Emailに変更。 ⑦ －３ データ型を電子メールを 選択。 ⑦－４ 完了を押す。 データ保存場所を作成 ⑦ Emailフィールドの作成 ⑦－1 ⑦－2 ⑦－3 ⑦－4
10. フィールド追加 ⑧「フィールドの追加」 を選択 ⑧－１「表示名」 ⑧－２「名前」を Addressに変更。 ⑧ －３ データ型をテキストを選 択。 ⑧－４ 完了を押す。 データ保存場所を作成 ⑧ Addressフィールドの作成 ⑧－1 ⑧－2 ⑧－3 ⑧－4
11. フィールド追加 データ保存場所を作成 ⑨「エンティ ティの保存」を 選択
12. フィールド追加 データ保存場所を作成 ⑩「Name」を選 択 ⑩－1「必須」を 解除 ⑩－2「完了」を 選択 Nameフィールドの必須解除 ⑩－1 ⑩－2
13. フィールド追加 データ保存場所を作成 ⑪「エンティ ティの保存」を 選択
14. アプリケーション作成 ①左メニューから「作 成」を選択 ②一から作成するキャン バスアプリの「このアプ リの作成」を選択
15. 登録・修正画面作成 完成図 このような登録画 面を作成します。
16. 登録・修正画面作成 ①スクリーン名を クリックして 「RegistrationScreen に変更 ①
17. ヘッダー作成 登録・修正画面作成 ②「挿入」→「ラベ ル」を選択 ②
18. ヘッダー作成 登録・修正画面作成 ②「挿入」→「ラベ ル」を選択 ②－1作成したラベル クリックして「登録 画面」とテキストを 変更し横に広げる。 ② ②－1
19. ヘッダー作成 登録・修正画面作成 ②－2「ホーム」→ ②ー3「中央揃え」を 選択 ②－2 ②－3
20. ヘッダー作成 登録・修正画面作成 ②－4 色の塗りを青 にして、文字色を白 を選択 ②－4
21. フォーム設置 登録・修正画面作成 ① ①「挿入」「フォー ム」から「編集」を 選択 ①－1「データソース の追加」を選択 ①－2「新しい接続」 を選択 ①－3「Common Data Service」を選択 ①－4「作成」を選択 ①－1 ①－2 ①－3 ①－4
22. フォーム設置 登録・修正画面作成 ①－5「住所録」を選 択 ①－6「接続」を選択 ①－7「列へのスナッ プ」で「１」 ①－8「フィールド」 から「Name」 「Email」「Address」 を選択 ①－9「×」ボタンで 閉じる ①－5 ①－6 ①－7 ①－8 ①－9
23. フォーム設置 登録・修正画面作成 ②もし左の様な赤い× が出現した場合には ②－1 DataCard1を選択 ②－2 MaxLengthを選択 ②－3 DataSourceInfo(住所録, DataSourceInfo.MaxLength, "cr131_name") ↓ DataSourceInfo([@住所録], DataSourceInfo.MaxLength, “cr131_name”) に変える。 ② ②－1 ②－2 ②－3 ②－4 この作業を 「DataCard2」「DaraCard3」 に対しても同様に行ってくだ さい。
24. 登録・戻るボタン 登録・修正画面作成 ①「挿入」→「ボタ ン」を選択し、ボタ ンを画面に作成しま す。 ②2つ設置したボタンは、項目をダブルクリッ クして名称を「戻る」と「登録」に変更
25. 登録ボタン 登録・修正画面作成 ③登録ボタンを選択 ③－1「詳細設定」の OnSelectプロパティに あるfalseを削除し、 SubmitForm(Form1) と入力 ③ ③－1 ※SubmitForm関数は、 フォームに記入された内容 を登録します。
26. 戻るボタン 登録・修正画面作成 ④戻るボタンを選択 ④－1「詳細設定」の OnSelectプロパティに あるfalseを削除し、 Back(ScreenTransition.Fa de) と入力 ④ ④－1 ※Back関数は、前画面に戻る 命令で、画面エフェクトを フェードを選択しています。
27. 保存 ①ファイルをクリック ①
28. 保存 ※一旦、ここまでの作業を保存します。保存後は2分に1回自動保存されます。 ② ②アプリ名「住所録」②－1保存を選びます。 ②－1
29. 一覧画面作成 完成図 このような一覧画 面を作成します。
30. 新しい画面作成 一覧画面作成 ①「新しい画面」から「空」を 選択 ②新しく設置した画面をクリックして名称をListScreenに変更 ① ②
31. 新しい画面作成 一覧画面作成 ③ ④ ③「…」をクリックして ④「上へ移動」を選択 先ほど作成した、 RegistorationScreenとListScreen の順番を入れ替えます。
32. ヘッダー作成 一覧画面作成 RegistorationScreen画面で作成してヘッダーをListScreen画面へコピーして、「一覧画面」と名前を変更
33. 新規登録ボタン作成 一覧画面作成 ①「挿入」より「アイコン」「追加」を選択 ① ② ②右の端に設置。 「詳細設定」の「色」プロパ ティで、文字の色を白にする。
34. 新規登録ボタン作成 一覧画面作成 ③ ③「詳細設定」の OnSelectプロパティに あるfalseを削除し、 NewForm(Form1); Navigate(RegistrationScr een,ScreenTransition.Fad e) と入力 ※NewFormは、フォームを 新規登録モードに変更 ※Navigateは、画面移動 この場合は、 RegistrationScreen画面に移動 する
35. 新規登録ボタン作成 一覧画面作成 ④再生ボタンを押して、新規 登録が行えるかテストします。 ④
36. 新規登録ボタン作成 一覧画面作成 ⑤表示された画面の「+」ボタンを押して ⑥登録画面へ移動し、各項目を入力して「登録」ボタン を押します。 ⑦「表示するアイテムがありません」と表示されたら、 データが登録されています。 ×ボタンで再生を終了しましょう。 ⑤ ⑥ ⑦
37. ギャラリー作成 一覧画面作成 ①「挿入」ギャラ リーより「縦」を選 択 ①
38. ギャラリー作成 一覧画面作成 ②「データソース」 から「住所録」を選 択 ②
39. ギャラリー作成 一覧画面作成 ③レイアウトから「タ イトル、サブタイトル、 本文」を選択 ③
40. ギャラリー作成 一覧画面作成 ④ ④Body2をName Subtitle4をEmail Title4をAddress に設定 ⑤「×」ボタン押して 閉じます。 ※この時点で、先ほど 登録したデータが表示 されている筈です。 ※ ⑤
41. ギャラリー作成 一覧画面作成 ④ ヘッダーの下にギャラ リーを引き延ばして配 置します。 ※
42. 削除機能 一覧画面作成 ①Gallery1のSeparator を選択 ②「挿入」「アイコ ン」「ごみ箱」を選択。 ※ Gallery1のSeparatorを選 択した理由は、Gallery1の 中にゴミ箱アイコンを設置 したいからです。 必ず選択してから、アイコ ンを入れてください。 ① ②
43. 削除機能 一覧画面作成 ③Gallery1の中にアイコン が設置されていることを確 認。 ④ごみ箱アイコンを移動し ます。 ⑤詳細設定のOnSelectプロ パティにあるFalseを消して Remove([@住所録],ThisItem); Refresh([@住所録]) と入力します。 ③ ④ ⑤
44. 修正機能 一覧画面作成 ①「＞」ボタンを選択 ②詳細設定のOnSelectプロ パティにあるSelect(Parent) を消して EditForm(Form1); Navigate(RegistrationScreen,Sc reenTransition.Fade) と入力します。 ① ②
45. 修正機能（データ表示内容指定） 一覧画面作成 ※登録画面にもどり、フォームを選択 ③ RegistrationScreen画面の 「Form1」を選択 ④詳細設定のItemプロパ ティに Gallery1.Selected と入力します。 ※これは、Galleryの選択され たレコードの詳細を表示する ために設定します。 ③ ④
46. 検索機能 • Filter 関数 • LookUp 関数 • Search 関数 一覧画面作成 何かを検索するためには、3つの関数があります。
47. 検索機能 Filter 関数 数式を満たすレコードをテーブル内で検索しま す。 1 つ以上の条件に一致する一連のレコー ドを検索したり、そのような条件に一致しない レコードを除外したりするには、Filter を使用 します。 一覧画面作成
48. 検索機能 LookUp 関数は、テーブル内で数式を満たす最 初のレコードを検索します。 1つ以上の条件に 一致する 1つのレコードを検索するには、 LookUp を使用します。 一覧画面作成
49. 検索機能 Search 関数は、テーブル内でそのいずれかの列 にある文字列が含まれているレコードを検索し ます。 この文字列は、列内のどこに現れても かまいません。検索では大文字小文字が区別さ れません。 Filter および LookUp とは異なり、 Search 関数は、照合に数式ではなく 1 つの文 字列を使用します。 一覧画面作成
50. 検索機能 一覧画面作成 ①ListScrren画面に戻り、 「挿入」「テキスト」「テキスト入力」を 選択 ②ヘッダーの左端へ設置します。 ① ②
51. 検索機能 一覧画面作成 ③Gallry1を選択 ④詳細設定のItemプロパ ティに 次ページに解説する内容を入 力します。 ③ ④
52. 検索機能 一覧画面作成 If( TextInput1.Text = "テキスト入力", 住所録, Search( 住所録, TextInput1.Text, "cr131_name", "cr131_email", "cr131_address“ ) ) もし（ TextInput1の入力したText （文字列）が “テキスト入力”であるか調べる, 正解なら 「住所録」データベースの全部を表示, 不正解なら Search関数で（ 「住所録」データベースから, TextInput1に入力したText（文字列）を, “nameフィールドと", “emailフィールドと", “addressフィールドから検索“ ) ) ▪スクリプト解説 ※注意 cr131などの名称は、皆さんの環境に より名前が違っているので、コピペせ ずに、 Ifからタイピングして、Search関数の フィールド名の指定を選択肢から選ん で設定してください。 ※注意
53. 動作テスト 最後に 以上でアプリは完成です。 動作テストは、 アプリのプレビューボタン または、キーボードのF5を押 して動作します。