Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PowerApps初心者勉強会ハンズオン住所録(公開用)詳細ステップ版
Search
frogkoby
November 22, 2018
Programming
0
1.1k
PowerApps初心者勉強会ハンズオン住所録(公開用)詳細ステップ版
11月22日に行いましたPowerApps初心者勉強会のハンズオン資料詳細版を公開します。
frogkoby
November 22, 2018
Tweet
Share
More Decks by frogkoby
See All by frogkoby
[経営者が語る]Power Platformで業務改革!作業工数を把握し可視化せよ
frogkoby
2
1.1k
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
650
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
58
16k
ニーリーにおけるプロダクトエンジニア
nealle
0
760
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
740
Deep Dive into ~/.claude/projects
hiragram
12
2.3k
C++20 射影変換
faithandbrave
0
560
VS Code Update for GitHub Copilot
74th
2
600
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
190
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
GraphRAGの仕組みまるわかり
tosuri13
8
530
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
Featured
See All Featured
It's Worth the Effort
3n
185
28k
How to Ace a Technical Interview
jacobian
277
23k
Making Projects Easy
brettharned
116
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Documentation Writing (for coders)
carmenintech
72
4.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
The Pragmatic Product Professional
lauravandoore
35
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
セクション2:ハンズオン 小林 竜也
本日作成するアプリ:住所録 一覧表示画面 登録・修正画面 機能: 一覧表示 登録 修正 削除 検索 データベース
Common Data Service
使用するパーツ説明 ギャラリー フォーム データを登録し たり編集したり するパーツ データを一覧表 示するパーツ アイコン アプリ内に設置
できるイラスト ボタン 画面を遷移したり 決定を許可する
データ保存場所を作成(エンティティ) ①左メニューから「エン ティティ」を選択 ②上部メニューより、 「新しいエンティティ」 を選択
エンティティ作成 ③エンティティの 編集 表示名:住所録 表示名の複数形: 住所録 名前:AddressBook 「完了」を押す。 データ保存場所を作成
フィールド追加 ④「フィールドの 追加」を選択 Name、Email、 Addressの3つの フィールドを作成 します。(手順は 以下の通り) ※初回作成時にある 「Primary
Name」は、削 データ保存場所を作成
フィールド追加 ⑤Nameフィール ドの作成 ※初回作成時に自動的に 作成できる「Primary Name」は、削除できな いので、これをName フィールドに変更します。 データ保存場所を作成
フィールド追加 ⑥PrimaryName を クリックして、右 に出てくる ⑥-1「表示名」 ⑥-2「名前」を Nameに変更。 ⑥-3 完了を押す。
データ保存場所を作成 ⑥ ⑥ー1 ⑥ー2 ⑥ー3 Nameフィールドの作成
フィールド追加 ⑦「フィールドの追加」 を選択 ⑦-1「表示名」 ⑦-2「名前」を Emailに変更。 ⑦ -3 データ型を電子メールを 選択。
⑦-4 完了を押す。 データ保存場所を作成 ⑦ Emailフィールドの作成 ⑦-1 ⑦-2 ⑦-3 ⑦-4
フィールド追加 ⑧「フィールドの追加」 を選択 ⑧-1「表示名」 ⑧-2「名前」を Addressに変更。 ⑧ -3 データ型をテキストを選 択。
⑧-4 完了を押す。 データ保存場所を作成 ⑧ Addressフィールドの作成 ⑧-1 ⑧-2 ⑧-3 ⑧-4
フィールド追加 データ保存場所を作成 ⑨「エンティ ティの保存」を 選択
フィールド追加 データ保存場所を作成 ⑩「Name」を選 択 ⑩-1「必須」を 解除 ⑩-2「完了」を 選択 Nameフィールドの必須解除 ⑩-1
⑩-2
フィールド追加 データ保存場所を作成 ⑪「エンティ ティの保存」を 選択
アプリケーション作成 ①左メニューから「作 成」を選択 ②一から作成するキャン バスアプリの「このアプ リの作成」を選択
登録・修正画面作成 完成図 このような登録画 面を作成します。
登録・修正画面作成 ①スクリーン名を クリックして 「RegistrationScreen に変更 ①
ヘッダー作成 登録・修正画面作成 ②「挿入」→「ラベ ル」を選択 ②
ヘッダー作成 登録・修正画面作成 ②「挿入」→「ラベ ル」を選択 ②-1作成したラベル クリックして「登録 画面」とテキストを 変更し横に広げる。 ② ②-1
ヘッダー作成 登録・修正画面作成 ②-2「ホーム」→ ②ー3「中央揃え」を 選択 ②-2 ②-3
ヘッダー作成 登録・修正画面作成 ②-4 色の塗りを青 にして、文字色を白 を選択 ②-4
フォーム設置 登録・修正画面作成 ① ①「挿入」「フォー ム」から「編集」を 選択 ①-1「データソース の追加」を選択 ①-2「新しい接続」 を選択
①-3「Common Data Service」を選択 ①-4「作成」を選択 ①-1 ①-2 ①-3 ①-4
フォーム設置 登録・修正画面作成 ①-5「住所録」を選 択 ①-6「接続」を選択 ①-7「列へのスナッ プ」で「1」 ①-8「フィールド」 から「Name」 「Email」「Address」
を選択 ①-9「×」ボタンで 閉じる ①-5 ①-6 ①-7 ①-8 ①-9
フォーム設置 登録・修正画面作成 ②もし左の様な赤い× が出現した場合には ②-1 DataCard1を選択 ②-2 MaxLengthを選択 ②-3 DataSourceInfo(住所録,
DataSourceInfo.MaxLength, "cr131_name") ↓ DataSourceInfo([@住所録], DataSourceInfo.MaxLength, “cr131_name”) に変える。 ② ②-1 ②-2 ②-3 ②-4 この作業を 「DataCard2」「DaraCard3」 に対しても同様に行ってくだ さい。
登録・戻るボタン 登録・修正画面作成 ①「挿入」→「ボタ ン」を選択し、ボタ ンを画面に作成しま す。 ②2つ設置したボタンは、項目をダブルクリッ クして名称を「戻る」と「登録」に変更
登録ボタン 登録・修正画面作成 ③登録ボタンを選択 ③-1「詳細設定」の OnSelectプロパティに あるfalseを削除し、 SubmitForm(Form1) と入力 ③ ③-1
※SubmitForm関数は、 フォームに記入された内容 を登録します。
戻るボタン 登録・修正画面作成 ④戻るボタンを選択 ④-1「詳細設定」の OnSelectプロパティに あるfalseを削除し、 Back(ScreenTransition.Fa de) と入力 ④
④-1 ※Back関数は、前画面に戻る 命令で、画面エフェクトを フェードを選択しています。
保存 ①ファイルをクリック ①
保存 ※一旦、ここまでの作業を保存します。保存後は2分に1回自動保存されます。 ② ②アプリ名「住所録」②-1保存を選びます。 ②-1
一覧画面作成 完成図 このような一覧画 面を作成します。
新しい画面作成 一覧画面作成 ①「新しい画面」から「空」を 選択 ②新しく設置した画面をクリックして名称をListScreenに変更 ① ②
新しい画面作成 一覧画面作成 ③ ④ ③「…」をクリックして ④「上へ移動」を選択 先ほど作成した、 RegistorationScreenとListScreen の順番を入れ替えます。
ヘッダー作成 一覧画面作成 RegistorationScreen画面で作成してヘッダーをListScreen画面へコピーして、「一覧画面」と名前を変更
新規登録ボタン作成 一覧画面作成 ①「挿入」より「アイコン」「追加」を選択 ① ② ②右の端に設置。 「詳細設定」の「色」プロパ ティで、文字の色を白にする。
新規登録ボタン作成 一覧画面作成 ③ ③「詳細設定」の OnSelectプロパティに あるfalseを削除し、 NewForm(Form1); Navigate(RegistrationScr een,ScreenTransition.Fad e)
と入力 ※NewFormは、フォームを 新規登録モードに変更 ※Navigateは、画面移動 この場合は、 RegistrationScreen画面に移動 する
新規登録ボタン作成 一覧画面作成 ④再生ボタンを押して、新規 登録が行えるかテストします。 ④
新規登録ボタン作成 一覧画面作成 ⑤表示された画面の「+」ボタンを押して ⑥登録画面へ移動し、各項目を入力して「登録」ボタン を押します。 ⑦「表示するアイテムがありません」と表示されたら、 データが登録されています。 ×ボタンで再生を終了しましょう。 ⑤ ⑥
⑦
ギャラリー作成 一覧画面作成 ①「挿入」ギャラ リーより「縦」を選 択 ①
ギャラリー作成 一覧画面作成 ②「データソース」 から「住所録」を選 択 ②
ギャラリー作成 一覧画面作成 ③レイアウトから「タ イトル、サブタイトル、 本文」を選択 ③
ギャラリー作成 一覧画面作成 ④ ④Body2をName Subtitle4をEmail Title4をAddress に設定 ⑤「×」ボタン押して 閉じます。 ※この時点で、先ほど
登録したデータが表示 されている筈です。 ※ ⑤
ギャラリー作成 一覧画面作成 ④ ヘッダーの下にギャラ リーを引き延ばして配 置します。 ※
削除機能 一覧画面作成 ①Gallery1のSeparator を選択 ②「挿入」「アイコ ン」「ごみ箱」を選択。 ※ Gallery1のSeparatorを選 択した理由は、Gallery1の 中にゴミ箱アイコンを設置
したいからです。 必ず選択してから、アイコ ンを入れてください。 ① ②
削除機能 一覧画面作成 ③Gallery1の中にアイコン が設置されていることを確 認。 ④ごみ箱アイコンを移動し ます。 ⑤詳細設定のOnSelectプロ パティにあるFalseを消して Remove([@住所録],ThisItem);
Refresh([@住所録]) と入力します。 ③ ④ ⑤
修正機能 一覧画面作成 ①「>」ボタンを選択 ②詳細設定のOnSelectプロ パティにあるSelect(Parent) を消して EditForm(Form1); Navigate(RegistrationScreen,Sc reenTransition.Fade) と入力します。
① ②
修正機能(データ表示内容指定) 一覧画面作成 ※登録画面にもどり、フォームを選択 ③ RegistrationScreen画面の 「Form1」を選択 ④詳細設定のItemプロパ ティに Gallery1.Selected と入力します。
※これは、Galleryの選択され たレコードの詳細を表示する ために設定します。 ③ ④
検索機能 • Filter 関数 • LookUp 関数 • Search 関数
一覧画面作成 何かを検索するためには、3つの関数があります。
検索機能 Filter 関数 数式を満たすレコードをテーブル内で検索しま す。 1 つ以上の条件に一致する一連のレコー ドを検索したり、そのような条件に一致しない レコードを除外したりするには、Filter を使用
します。 一覧画面作成
検索機能 LookUp 関数は、テーブル内で数式を満たす最 初のレコードを検索します。 1つ以上の条件に 一致する 1つのレコードを検索するには、 LookUp を使用します。 一覧画面作成
検索機能 Search 関数は、テーブル内でそのいずれかの列 にある文字列が含まれているレコードを検索し ます。 この文字列は、列内のどこに現れても かまいません。検索では大文字小文字が区別さ れません。 Filter および
LookUp とは異なり、 Search 関数は、照合に数式ではなく 1 つの文 字列を使用します。 一覧画面作成
検索機能 一覧画面作成 ①ListScrren画面に戻り、 「挿入」「テキスト」「テキスト入力」を 選択 ②ヘッダーの左端へ設置します。 ① ②
検索機能 一覧画面作成 ③Gallry1を選択 ④詳細設定のItemプロパ ティに 次ページに解説する内容を入 力します。 ③ ④
検索機能 一覧画面作成 If( TextInput1.Text = "テキスト入力", 住所録, Search( 住所録, TextInput1.Text,
"cr131_name", "cr131_email", "cr131_address“ ) ) もし( TextInput1の入力したText (文字列)が “テキスト入力”であるか調べる, 正解なら 「住所録」データベースの全部を表示, 不正解なら Search関数で( 「住所録」データベースから, TextInput1に入力したText(文字列)を, “nameフィールドと", “emailフィールドと", “addressフィールドから検索“ ) ) ▪スクリプト解説 ※注意 cr131などの名称は、皆さんの環境に より名前が違っているので、コピペせ ずに、 Ifからタイピングして、Search関数の フィールド名の指定を選択肢から選ん で設定してください。 ※注意
動作テスト 最後に 以上でアプリは完成です。 動作テストは、 アプリのプレビューボタン または、キーボードのF5を押 して動作します。