今回の記事では、Power Appsでシンプルな検索アプリを実装していきます。
社内用語検索やFAQ(よくある質問)検索などにご活用ください。
完成イメージ
画面中央のテキスト入力にキーワードを入力すると、それに合致するデータが表示されます。
半角/全角スペースで区切ることで、複数キーワードでの検索も可能です。
前提・注意事項
今回の検索アプリは、データソースとしてSharePointリストを利用しています。
検索時の不具合を防ぐため、SharePointリストに格納するデータは2000行以下に抑えてください。
（2001行以上のデータがSharePointリストに含まれていると、正しく検索できない可能性があります。）
データ準備
アプリを作成する前に、検索元となるSharePointリストのデータを準備していきます。
SharePointリストの作成
まずは検索元となるSharePointリストを作成していきます。
お好きなSharePointサイトにアクセスし、右上の「歯車アイコン」>「サイトコンテンツ」に進みます。
続いて左上の「＋新規」>「リスト」を選択し、次の画面でも「リスト」を選択します
リスト名の入力欄が表示されるため、「SearchDataSource」と入力して「作成」ボタンを押します。
列の追加
SharePointリストが作成できたため、続いて列を追加します。
すでに「タイトル」という列ができているかと思いますので、その右の「＋列の追加」を選択して「Details」列を保存します。
追加できたら、Power Appsの実装時に分かりやすくなるよう列名を変更します。
先ほど作成したDetails列をクリックし、「列の設定」>「編集」を選択します。名前をDetailsから「詳細」に変更してください。
（最初から「詳細」と日本語で名付けてしまうと、内部列名が文字化け・エンコードされて分かりづらくなってしまいます。そのため、わざわざ「Details」と英語で作成してから、日本語に直しています）
データの入力
SharePointリストの列が追加できたため、データを入力していきます。
「グリッドビューを編集」ボタンなどを利用して、データを書き込んでください。
今回はサンプルとして以下表のようなデータを入力しました。
| タイトル | 詳細 |
| フロー | トリガーとアクションから構成される自動化プロセス |
| トリガー | フローを開始するイベントや条件 |
| アクション | トリガーを呼び出した際に開始するタスク |
| キャンバスアプリ | ドラッグ＆ドロップでユーザーが自由にレイアウトをデザインできるアプリ。高度にカスタマイズ可能なユーザーインターフェース（UI）を持つアプリケーションを作成可能。 |
| モデル駆動型アプリ | データモデルに基づいて自動的にUIが生成されるアプリ。Dataverseというデータベースと連携して、データの管理や操作に特化したアプリケーションを作成可能。 |
もし自身でデータを用意する場合、以下の要領で入力してください
- 用語検索として利用したい：タイトル列に単語を、詳細列にその単語の意味を入力
- FAQ(よくある質問)として利用したい：タイトル列に質問(Q)を、詳細列に回答(A)を入力
アプリの作成
データの準備が完了したため、Power Appsポータルから新規アプリを作成していきます。
アプリの新規作成
「作成」メニューの「白紙から作成する」を選択します。サイズは「タブレットPCのサイズ」を選択します。
（メニュー名の変更が起こる可能性があるため、適宜読み替えて新規アプリを作成してください）
データソースの接続
しばらく待つと空のアプリが作成され、アプリ開発画面が表示されます。
まずは左側のメニューから表のマークを選択した後、「データの追加」ボタンを押します。
その後「データソースの選択」ポップアップ内で「SharePoint」を選択します。
SharePointリストの接続を選択する画面が表示されます。
自身のメールアドレスが表示された場合はそれを選択し、接続方法を聞かれた場合は「直接接続」を選択してください。
続いて先ほど作成したSharePointリスト(SearchDataSource)の場所を指定します。
SharePointリストのURLを入力するか、「最近利用したサイト」から選択していきます。
今回は「最近利用したサイト」を選択したため、その後リストの場所も選択します。
データ行の上限設定
データソースの接続が完了したら、データ行の上限を設定します。
「歯車アイコン」>「全般」>「データ行の制限」を選択し、最大値である2000を設定します。
（設定することで、最大2000件のデータから正しく検索できます）
スクリーンのコピー&ペースト
ここまでの設定が完了したら、検索画面を構築します。
以下のコードをコピーしてください (右上の青いコピーボタンをご利用ください)
Screens:
SearchScreen:
Properties:
LoadingSpinnerColor: =RGBA(56, 96, 178, 1)
Children:
- ctnSearchScreen:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =768
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =4
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
Width: =1366
Children:
- ctnHeader:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
Fill: =RGBA(25, 118, 210, 1)
FillPortions: =2
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =0
LayoutMinWidth: =16
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Children:
- icoSearch:
Control: Icon@0.0.7
Properties:
Height: =48
Icon: ="Search"
IconColor: =RGBA(255, 255, 255, 1)
IconStyle: ='Icon.IconStyle'.Filled
LayoutMinHeight: =16
LayoutMinWidth: =16
Width: =48
- lblAppTitle:
Control: ModernText@1.0.0
Properties:
Align: =Align.Center
Color: =RGBA(255, 255, 255, 1)
FontWeight: =FontWeight.Semibold
Height: =60
LayoutMinHeight: =16
LayoutMinWidth: =16
Size: =30
Text: ="検索アプリ"
Width: =200
- ctnBody:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =14
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =10
LayoutMinHeight: =0
LayoutMinWidth: =16
PaddingBottom: =10
PaddingLeft: =2
PaddingRight: =2
PaddingTop: =10
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Children:
- ctnBodyLeft:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
LayoutMinHeight: =16
LayoutMinWidth: =16
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
X: =40
Y: =40
Children:
- galSearchResult:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =400
Items: |-
=With(
{
scpReplacedQuery: Substitute(
txtInputKeywords.Text,
" ",
" "
)
},
Filter(
SearchDataSource,
Or(
CountRows(
Filter(
Split(
scpReplacedQuery,
" "
),
Value in Title
)
) = CountRows(
Split(
scpReplacedQuery,
" "
)
),
And(
CountRows(
Filter(
Split(
scpReplacedQuery,
" "
),
Value in Details
)
) = CountRows(
Split(
scpReplacedQuery,
" "
)
),
chkIncludeDetails.Checked
)
)
)
)
OnSelect: |-
=UpdateContext({locIsSelectedItem: true})
TemplateSize: =100
Width: =Parent.Width - 100
X: =50
Y: =180
Children:
- lblItemTitle:
Control: ModernText@1.0.0
Properties:
FontWeight: |-
=If(
ThisItem.IsSelected,
FontWeight.Bold,
FontWeight.Normal
)
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingTop: =0
Size: =18
Text: =ThisItem.Title
Width: =Parent.Width - 120
Y: =18
- lblItemDetails:
Control: ModernText@1.0.0
Properties:
FontWeight: |-
=If(
ThisItem.IsSelected,
FontWeight.Bold,
FontWeight.Normal
)
OnSelect: =Select(Parent)
Size: =16
Text: =ThisItem.Details
Width: =Parent.Width - 60
Wrap: =false
Y: =50
- btnChevronRight:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
FontColor: =RGBA(40, 134, 222, 1)
FontSize: =32
Icon: ="ChevronRight"
IconStyle: |-
=If(
ThisItem.IsSelected,
'Icon.IconStyle'.Filled,
'Icon.IconStyle'.Outline
)
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: =Select(Parent)
Text: =
Width: =32
X: =Parent.Width - 60
Y: =(Parent.TemplateHeight - Self.Height) / 2
- chkIncludeDetails:
Control: CheckBox@0.0.30
Properties:
CheckboxSize: =20
Checked: =true
FontSize: =18
Height: =40
Label: ="説明文も含めて検索"
Width: =240
X: =60
Y: =110
- txtInputKeywords:
Control: ModernTextInput@1.0.0
Properties:
Height: =60
PaddingLeft: =10
PaddingRight: =10
Placeholder: ="キーワード検索"
RadiusBottomLeft: =30
RadiusBottomRight: =30
RadiusTopLeft: =30
RadiusTopRight: =30
Required: =true
Size: =18
Width: =Parent.Width - 100
X: =50
Y: =50
- ctnBodyRight:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
LayoutMinHeight: =16
LayoutMinWidth: =16
Visible: =locIsSelectedItem
Children:
- lblTitle:
Control: ModernText@1.0.0
Properties:
FontWeight: =FontWeight.Semibold
Height: =120
Size: =18
Text: =galSearchResult.Selected.Title
VerticalAlign: =VerticalAlign.Bottom
Width: =Parent.Width - 100
X: =50
Y: =40
- lblDetails:
Control: ModernText@1.0.0
Properties:
Height: =420
PaddingTop: =20
Size: =18
Text: =galSearchResult.Selected.Details
VerticalAlign: =VerticalAlign.Top
Width: =Parent.Width - 100
X: =50
Y: =160
- btnCloseRightPane:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
FontColor: =RGBA(255, 0, 0, 1)
FontSize: =32
Icon: ="Dismiss"
IconStyle: ='ButtonCanvas.IconStyle'.Outline
Layout: ='ButtonCanvas.Layout'.IconOnly
OnSelect: |-
=UpdateContext({locIsSelectedItem: false})
Visible: =locIsSelectedItem
Width: =32
X: =620
Y: =16
- ctnFooter:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =16
LayoutMinWidth: =16
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
Children:
- lnkPower365Medium:
Control: ModernLink@1.0.0
Properties:
Align: =Align.Right
FillPortions: =1
LayoutMinHeight: =16
LayoutMinWidth: =16
PaddingRight: =30
Text: ="Designed by Power365Medium"
URL: ="https://power365medium.com/simple-search-app/"
コピーできたら、画面中央に表示されている空白キャンバスの上で右クリックします。
「貼り付け」を選択すると、検索画面が自動で構築されます。
不要になった画面 (Screen1)は削除しておくことをお勧めします。
保存・公開
構築したアプリを保存・公開して完了です。
また、必要に応じてテストをして動作を確認してください。
まとめ
今回の記事では、SharePointリストとPower Appsを利用してシンプルな検索アプリを構築しました。
複数キーワードでの検索も可能なので、社内用語検索やFAQ(よくある質問)検索などにお役立てください。
