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

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を押して動作します。

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

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

Want more?

Transcript