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

by frogkoby

Slide 1

Slide 1 text

セクション２：ハンズオン小林竜也

Slide 2

Slide 2 text

本日作成するアプリ：住所録一覧表示画面登録・修正画面機能：一覧表示登録修正削除検索データベース Common Data Service

Slide 3

Slide 3 text

使用するパーツ説明ギャラリーフォームデータを登録したり編集したりするパーツデータを一覧表示するパーツアイコンアプリ内に設置できるイラストボタン画面を遷移したり決定を許可する

Slide 4

Slide 4 text

データ保存場所を作成（エンティティ） ①左メニューから「エンティティ」を選択 ②上部メニューより、「新しいエンティティ」を選択

Slide 5

Slide 5 text

エンティティ作成 ③エンティティの編集表示名：住所録表示名の複数形：住所録名前：AddressBook 「完了」を押す。データ保存場所を作成

Slide 6

Slide 6 text

フィールド追加 ④「フィールドの追加」を選択 Name、Email、 Addressの3つのフィールドを作成します。（手順は以下の通り） ※初回作成時にある「Primary Name」は、削データ保存場所を作成

Slide 7

Slide 7 text

フィールド追加 ⑤Nameフィールドの作成 ※初回作成時に自動的に作成できる「Primary Name」は、削除できないので、これをName フィールドに変更します。データ保存場所を作成

Slide 8

Slide 8 text

フィールド追加 ⑥PrimaryName をクリックして、右に出てくる ⑥－１「表示名」 ⑥－２「名前」を Nameに変更。 ⑥－３完了を押す。データ保存場所を作成 ⑥ ⑥ー１ ⑥ー2 ⑥ー3 Nameフィールドの作成

Slide 9

Slide 9 text

フィールド追加 ⑦「フィールドの追加」を選択 ⑦－１「表示名」 ⑦－２「名前」を Emailに変更。 ⑦ －３データ型を電子メールを選択。 ⑦－４完了を押す。データ保存場所を作成 ⑦ Emailフィールドの作成 ⑦－1 ⑦－2 ⑦－3 ⑦－4

Slide 10

Slide 10 text

フィールド追加 ⑧「フィールドの追加」を選択 ⑧－１「表示名」 ⑧－２「名前」を Addressに変更。 ⑧ －３データ型をテキストを選択。 ⑧－４完了を押す。データ保存場所を作成 ⑧ Addressフィールドの作成 ⑧－1 ⑧－2 ⑧－3 ⑧－4

Slide 11

Slide 11 text

フィールド追加データ保存場所を作成 ⑨「エンティティの保存」を選択

Slide 12

Slide 12 text

フィールド追加データ保存場所を作成 ⑩「Name」を選択 ⑩－1「必須」を解除 ⑩－2「完了」を選択 Nameフィールドの必須解除 ⑩－1 ⑩－2

Slide 13

Slide 13 text

フィールド追加データ保存場所を作成 ⑪「エンティティの保存」を選択

Slide 14

Slide 14 text

アプリケーション作成 ①左メニューから「作成」を選択 ②一から作成するキャンバスアプリの「このアプリの作成」を選択

Slide 15

Slide 15 text

登録・修正画面作成完成図このような登録画面を作成します。

Slide 16

Slide 16 text

登録・修正画面作成 ①スクリーン名をクリックして「RegistrationScreen に変更 ①

Slide 17

Slide 17 text

ヘッダー作成登録・修正画面作成 ②「挿入」→「ラベル」を選択 ②

Slide 18

Slide 18 text

ヘッダー作成登録・修正画面作成 ②「挿入」→「ラベル」を選択 ②－1作成したラベルクリックして「登録画面」とテキストを変更し横に広げる。 ② ②－1

Slide 19

Slide 19 text

ヘッダー作成登録・修正画面作成 ②－2「ホーム」→ ②ー3「中央揃え」を選択 ②－2 ②－3

Slide 20

Slide 20 text

ヘッダー作成登録・修正画面作成 ②－4 色の塗りを青にして、文字色を白を選択 ②－4

Slide 21

Slide 21 text

フォーム設置登録・修正画面作成 ① ①「挿入」「フォーム」から「編集」を選択 ①－1「データソースの追加」を選択 ①－2「新しい接続」を選択 ①－3「Common Data Service」を選択 ①－4「作成」を選択 ①－1 ①－2 ①－3 ①－4

Slide 22

Slide 22 text

フォーム設置登録・修正画面作成 ①－5「住所録」を選択 ①－6「接続」を選択 ①－7「列へのスナップ」で「１」 ①－8「フィールド」から「Name」「Email」「Address」を選択 ①－9「×」ボタンで閉じる ①－5 ①－6 ①－7 ①－8 ①－9

Slide 23

Slide 23 text

フォーム設置登録・修正画面作成 ②もし左の様な赤い× が出現した場合には ②－1 DataCard1を選択 ②－2 MaxLengthを選択 ②－3 DataSourceInfo(住所録, DataSourceInfo.MaxLength, "cr131_name") ↓ DataSourceInfo([@住所録], DataSourceInfo.MaxLength, “cr131_name”) に変える。 ② ②－1 ②－2 ②－3 ②－4 この作業を「DataCard2」「DaraCard3」に対しても同様に行ってください。

Slide 24

Slide 24 text

登録・戻るボタン登録・修正画面作成 ①「挿入」→「ボタン」を選択し、ボタンを画面に作成します。 ②2つ設置したボタンは、項目をダブルクリックして名称を「戻る」と「登録」に変更

Slide 25

Slide 25 text

登録ボタン登録・修正画面作成 ③登録ボタンを選択 ③－1「詳細設定」の OnSelectプロパティにあるfalseを削除し、 SubmitForm(Form1) と入力 ③ ③－1 ※SubmitForm関数は、フォームに記入された内容を登録します。

Slide 26

Slide 26 text

戻るボタン登録・修正画面作成 ④戻るボタンを選択 ④－1「詳細設定」の OnSelectプロパティにあるfalseを削除し、 Back(ScreenTransition.Fa de) と入力 ④ ④－1 ※Back関数は、前画面に戻る命令で、画面エフェクトをフェードを選択しています。

Slide 27

Slide 27 text

保存 ①ファイルをクリック ①

Slide 28

Slide 28 text

保存 ※一旦、ここまでの作業を保存します。保存後は2分に1回自動保存されます。 ② ②アプリ名「住所録」②－1保存を選びます。 ②－1

Slide 29

Slide 29 text

一覧画面作成完成図このような一覧画面を作成します。

Slide 30

Slide 30 text

新しい画面作成一覧画面作成 ①「新しい画面」から「空」を選択 ②新しく設置した画面をクリックして名称をListScreenに変更 ① ②

Slide 31

Slide 31 text

新しい画面作成一覧画面作成 ③ ④ ③「…」をクリックして ④「上へ移動」を選択先ほど作成した、 RegistorationScreenとListScreen の順番を入れ替えます。

Slide 32

Slide 32 text

ヘッダー作成一覧画面作成 RegistorationScreen画面で作成してヘッダーをListScreen画面へコピーして、「一覧画面」と名前を変更

Slide 33

Slide 33 text

新規登録ボタン作成一覧画面作成 ①「挿入」より「アイコン」「追加」を選択 ① ② ②右の端に設置。「詳細設定」の「色」プロパティで、文字の色を白にする。

Slide 34

Slide 34 text

新規登録ボタン作成一覧画面作成 ③ ③「詳細設定」の OnSelectプロパティにあるfalseを削除し、 NewForm(Form1); Navigate(RegistrationScr een,ScreenTransition.Fad e) と入力 ※NewFormは、フォームを新規登録モードに変更 ※Navigateは、画面移動この場合は、 RegistrationScreen画面に移動する

Slide 35

Slide 35 text

新規登録ボタン作成一覧画面作成 ④再生ボタンを押して、新規登録が行えるかテストします。 ④

Slide 36

Slide 36 text

新規登録ボタン作成一覧画面作成 ⑤表示された画面の「+」ボタンを押して ⑥登録画面へ移動し、各項目を入力して「登録」ボタンを押します。 ⑦「表示するアイテムがありません」と表示されたら、データが登録されています。 ×ボタンで再生を終了しましょう。 ⑤ ⑥ ⑦

Slide 37

Slide 37 text

ギャラリー作成一覧画面作成 ①「挿入」ギャラリーより「縦」を選択 ①

Slide 38

Slide 38 text

ギャラリー作成一覧画面作成 ②「データソース」から「住所録」を選択 ②

Slide 39

Slide 39 text

ギャラリー作成一覧画面作成 ③レイアウトから「タイトル、サブタイトル、本文」を選択 ③

Slide 40

Slide 40 text

ギャラリー作成一覧画面作成 ④ ④Body2をName Subtitle4をEmail Title4をAddress に設定 ⑤「×」ボタン押して閉じます。 ※この時点で、先ほど登録したデータが表示されている筈です。 ※ ⑤

Slide 41

Slide 41 text

ギャラリー作成一覧画面作成 ④ ヘッダーの下にギャラリーを引き延ばして配置します。 ※

Slide 42

Slide 42 text

削除機能一覧画面作成 ①Gallery1のSeparator を選択 ②「挿入」「アイコン」「ごみ箱」を選択。 ※ Gallery1のSeparatorを選択した理由は、Gallery1の中にゴミ箱アイコンを設置したいからです。必ず選択してから、アイコンを入れてください。 ① ②

Slide 43

Slide 43 text

削除機能一覧画面作成 ③Gallery1の中にアイコンが設置されていることを確認。 ④ごみ箱アイコンを移動します。 ⑤詳細設定のOnSelectプロパティにあるFalseを消して Remove([@住所録],ThisItem); Refresh([@住所録]) と入力します。 ③ ④ ⑤

Slide 44

Slide 44 text

修正機能一覧画面作成 ①「＞」ボタンを選択 ②詳細設定のOnSelectプロパティにあるSelect(Parent) を消して EditForm(Form1); Navigate(RegistrationScreen,Sc reenTransition.Fade) と入力します。 ① ②

Slide 45

Slide 45 text

修正機能（データ表示内容指定）一覧画面作成 ※登録画面にもどり、フォームを選択 ③ RegistrationScreen画面の「Form1」を選択 ④詳細設定のItemプロパティに Gallery1.Selected と入力します。 ※これは、Galleryの選択されたレコードの詳細を表示するために設定します。 ③ ④

Slide 46

Slide 46 text

検索機能 • Filter 関数 • LookUp 関数 • Search 関数一覧画面作成何かを検索するためには、3つの関数があります。

Slide 47

Slide 47 text

検索機能 Filter 関数数式を満たすレコードをテーブル内で検索します。 1 つ以上の条件に一致する一連のレコードを検索したり、そのような条件に一致しないレコードを除外したりするには、Filter を使用します。一覧画面作成

Slide 48

Slide 48 text

検索機能 LookUp 関数は、テーブル内で数式を満たす最初のレコードを検索します。 1つ以上の条件に一致する 1つのレコードを検索するには、 LookUp を使用します。一覧画面作成

Slide 49

Slide 49 text

検索機能 Search 関数は、テーブル内でそのいずれかの列にある文字列が含まれているレコードを検索します。この文字列は、列内のどこに現れてもかまいません。検索では大文字小文字が区別されません。 Filter および LookUp とは異なり、 Search 関数は、照合に数式ではなく 1 つの文字列を使用します。一覧画面作成

Slide 50

Slide 50 text

検索機能一覧画面作成 ①ListScrren画面に戻り、「挿入」「テキスト」「テキスト入力」を選択 ②ヘッダーの左端へ設置します。 ① ②

Slide 51

Slide 51 text

検索機能一覧画面作成 ③Gallry1を選択 ④詳細設定のItemプロパティに次ページに解説する内容を入力します。 ③ ④

Slide 52

Slide 52 text

検索機能一覧画面作成 If( TextInput1.Text = "テキスト入力", 住所録, Search( 住所録, TextInput1.Text, "cr131_name", "cr131_email", "cr131_address“ ) ) もし（ TextInput1の入力したText （文字列）が “テキスト入力”であるか調べる, 正解なら「住所録」データベースの全部を表示, 不正解なら Search関数で（「住所録」データベースから, TextInput1に入力したText（文字列）を, “nameフィールドと", “emailフィールドと", “addressフィールドから検索“ ) ) ■スクリプト解説 ※注意 cr131などの名称は、皆さんの環境により名前が違っているので、コピペせずに、 Ifからタイピングして、Search関数のフィールド名の指定を選択肢から選んで設定してください。 ※注意

Slide 53

Slide 53 text

動作テスト最後に以上でアプリは完成です。動作テストは、アプリのプレビューボタンまたは、キーボードのF5を押して動作します。