Power PagesとDataverseを使ったサイト構築方法について、基本的なページ作成や手順をまとめてみました。
簡易的なカスタマーサポートサイトを構築する想定で手順をまとめています。
サイト構築の流れ
- サポートサイトで使うテーブルの作成
- サイトの作成
- ページの追加
- フォームの作成/追加
- リストの作成/追加
- 各種コンポーネントの追加
作成するサイトに実装する機能
- お問い合わせフォーム
- FAQページ
サポートサイトで使うテーブルの作成
サポートサイトに実装したい「お問い合わせフォーム」、「FAQページ」のためにテーブルを２つ用意しておきます。
作成するテーブル
- お問い合わせフォームのデータを格納するテーブル
- FAQを格納しておくテーブル
お問い合わせフォームのデータを格納するテーブルを作る
お問い合わせフォームで受け付けたデータを格納するテーブルを作成します。
テーブルに追加したい列
- レコードID
- 名前（お問い合わせした人の名前）
- メールアドレス（回答の返信先）
- カテゴリ（お問い合わせのカテゴリ）
- タイトル
- 内容
この他には会社名、電話番号なども想定できますが、今回は簡易的に以上の６項目を列として作成します。
1. テーブルの作成
・Power Apps ( https://make.powerapps.com/ ) を開き、画面右上の「環境」がPower Pagesを使いたい環境になっていることを確認し、画面左側の一覧から「テーブル」をクリックします。
・画面上部の[新しいテーブル]をクリックします。
・「高度なプロパティを設定する」をクリックします。
・新しいテーブル作成画面が表示されたら、表示名に「お問い合わせ」と入力します。
※複数形の名前は自動入力されます。
・「高度なオプション」をクリックし、スキーマ名に「contact」と入力し、「プライマリ列」をクリックします。
・プライマリ列の表示名に「レコードID」と入力します。
・「高度なオプション」をクリックします。
・スキーマ名に「record_id」と入力し、列の要件「必要なビジネス」を選択します。
・「保存」をクリックします。
2. テーブルに列を追加
・テーブルの詳細画面が表示されたら、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：名前
[データの種類]：１行テキスト
[必須]：必要なビジネス
[スキーマ名]：contact_name
※「高度なオプション」をクリックすると表示されます。
入力と選択が完了したら、「保存」をクリックします。
同じ手順でメールアドレスの列を追加していきます。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：メールアドレス
[データの種類]：１行テキスト
[書式]：電子メール
[必須]：必要なビジネス
[スキーマ名]：contact_mail
入力と選択が完了したら、「保存」をクリックします。
同じ手順でカテゴリ列を追加していきます。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：カテゴリ
[データの種類]：選択肢
[グローバルな選択肢と同期しますか？]：はい
[必須]：必要なビジネス
[スキーマ名]：contact_category
[この選択肢を同期する相手]：＋新しい選択
[表示名]：お問い合わせカテゴリ
[選択肢]：
・製品
・故障・修理
・その他
[名前]：contact_category_list
[既定の選択肢]：なし
入力と選択が完了したら、「保存」をクリックします。
同じ手順でタイトル列を追加していきます。
・テーブルの詳細画面、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：タイトル
[データの種類]：１行テキスト
[必須]：必要なビジネス
[スキーマ名]：contact_title
※「高度なオプション」をクリックすると表示されます。
入力と選択が完了したら、「保存」をクリックします。
同じ手順で内容列を追加していきます。
・テーブルの詳細画面、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：内容
[データの種類]：複数行テキスト
[必須]：必要なビジネス
[スキーマ名]：contact_contents
※「高度なオプション」をクリックすると表示されます。
入力と選択が完了したら、「保存」をクリックします。
3. 列の編集
・作成したテーブル「お問い合わせ」の詳細画面を開き、「レコードID」を選択し「列の編集」をクリックします。
・列の設定を以下のように変更します。
[データの種類]：オートナンバー
[接頭辞]：contact
[最小桁数]：3
[シード値]：１
・選択、入力が完了したら「保存」をクリックします。
FAQを格納しておくテーブルを作る
FAQデータを格納しておくテーブルを作成します。
テーブルに追加したい列
- レコードID
- カテゴリ（FAQのカテゴリ）
- タイトル
- 内容
1. テーブルの作成
・Power Apps ( https://make.powerapps.com/ ) を開き、画面右上の「環境」がPower Pagesを使いたい環境になっていることを確認し、画面左側の一覧から「テーブル」をクリックします。
・画面上部の[新しいテーブル]をクリックします。
・「高度なプロパティを設定する」をクリックします。
・新しいテーブル作成画面が表示されたら、表示名に「FAQ」と入力します。
※複数形の名前は自動入力されます。
・「高度なオプション」をクリックし、スキーマ名に「faq」と入力し、「プライマリ列」をクリックします。
・プライマリ列の表示名に「レコードID」と入力します。
・「高度なオプション」をクリックします。
・スキーマ名に「record_id」と入力し、列の操作「必要なビジネス」を選択します。
・「保存」をクリックします。
2. テーブルに列を追加
・テーブルの詳細画面が表示されたら、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：カテゴリ
[データの種類]：選択肢
[グローバルな選択肢と同期しますか？]：はい
[必須]：必要なビジネス
[スキーマ名]：faq_category
[この選択肢を同期する相手]：＋新しい選択
[表示名]：FAQカテゴリ
[選択肢]：
・製品
・故障・修理
・その他
[名前]：faq_category_list
[既定の選択肢]：なし
入力と選択が完了したら、「保存」をクリックします。
同じ手順でタイトル列を追加していきます。
・テーブルの詳細画面、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：タイトル
[データの種類]：１行テキスト
[必須]：必要なビジネス
[スキーマ名]：faq_title
※「高度なオプション」をクリックすると表示されます。
入力と選択が完了したら、「保存」をクリックします。
同じ手順で内容列を追加していきます。
・テーブルの詳細画面、画面左上の「＋新規」、「列」の順にクリックします。
・新しい列の画面の各項目を以下のように設定します。
[表示名]：内容
[データの種類]：複数行テキスト
[必須]：必要なビジネス
[スキーマ名]：faq_contents
※「高度なオプション」をクリックすると表示されます。
入力と選択が完了したら、「保存」をクリックします。
3. 列の編集
・作成したテーブル「お問い合わせ」の詳細画面を開き、「レコードID」を選択し「列の編集」をクリックします。
・列の設定を以下のように変更します。
データの種類：オートナンバー
[接頭辞]：faq
[最小桁数]：3
[シード値]：１
・選択、入力が完了したら「保存」をクリックします。
サポートサイトの作成
事前準備が完了したら、Power Pagesを使いサポートサイトを作成します。
サイト構築の流れ
- サイトの作成・ページの追加
- お問い合わせフォームの作成/追加
- リストの作成/追加
1. サイトの作成・ページの作成
・Power pages ( https://make.powerpages.microsoft.com/ ) を開き、画面中央から「最初から始める」をクリックします。
・[サイトの名前を作成してください]の入力欄に「Support Site」と入力します。
・「完了」をクリックします。
※Webアドレスを作成するの部分は、サイトURLになるため、必要に応じて変更を行ってください。
・サイトの準備が完了したら、「編集」をクリックします。
・画面左上の「＋ページ」をクリックします。
・ページ名を「お問い合わせ」、レイアウトを「空白から開始」となるように入力と選択し、
「追加」をクリックします。
・「お問い合わせ」ページ作成後、もう一度画面左上の「＋ページ」をクリックします。
・ページ名を「FAQ」、レイアウトを「空白から開始」となるように入力と選択し、
「追加」をクリックします。
2. お問い合わせ用フォームの作成
・画面左側一覧にある「データ」をクリックします。
・画面左上の検索欄に「お問い合わせ」と入力し、その他のテーブルに表示される「お問い合わせ」をクリックします。
・「フォーム」タブを選択し、「＋フォームの新規作成」をクリックします。
・フォーム名「お問い合わせ用フォーム」と入力し、「作成」をクリックします。
・「＋フィールドの追加」を選択し、左側のテーブル列一覧から表示する列をクリックし以下のように追加します。
※フォームに項目が追加されるとテーブル列一覧から表示が消えます。
[名前]
[メールアドレス]
[カテゴリ]
[タイトル]
[内容]
・デフォルトで表示されている[レコードID]、[所有者]はそれぞれ選択した後、「非表示」をクリックしフォームに表示されないようにします。
・列追加の完了後、「保存して公開」をクリックします。
3. お問い合わせ用フォームの実装
・画面左側一覧にある「ページ」をクリックします。
・「お問い合わせ」を選択し、このセクションに追加する～箇所の「フォーム」をクリックします。
・「＋フォームの新規作成」をクリックします。
・フォームの追加画面で必要事項の追加をしていきます。
[テーブルを選択する]：お問い合わせ
[フォームを選択する]：お問い合わせ用フォーム
[選択したフォームのコピーに名前を付ける]：お問い合わせ用フォーム
※選択したフォームの～は自動入力されます。
・「データ」タブを開き、このフォームのデータ「新しいレコードを作成します」を選択し、「OK」をクリックします。
・「アクセス許可」をクリックします。
・「＋新しいアクセス許可」をクリックします。
・新しいテーブルのアクセス許可として、以下の内容を入力、選択を行います。
[名前]：お問い合わせフォームのアクセス許可
[テーブル]：お問い合わせ
[アクセスの種類]：グローバルアクセス
[アクセス許可]：作成
[ロール]：匿名ユーザー・管理者・認証されたユーザー（３つすべて選択）
入力、選択が完了したら「保存」をクリックします。
※確認画面が表示されたら、もう一度「保存」をクリックします。
4. FAQ一覧表示用のビュー作成
・画面左側一覧にある「データ」をクリックします。
・画面左上の検索欄に「FAQ」と入力し、その他のテーブルに表示される「FAQ」をクリックします。
・「ビュー」タブを選択し、「＋ビューの新規作成」をクリックします。
・ビュー名「FAQ一覧表示用のビュー」と入力し、「作成」をクリックします。
・「＋列の追加」を選択し、左側のテーブル列一覧から表示する列をクリックし以下のように追加します。
※ビューに項目が追加されるとテーブル列一覧から表示が消えます。
[レコードID]
[タイトル]
[カテゴリ]
・列追加の完了後、「保存して公開」をクリックします。
5. FAQ一覧表示用のリストの実装
・「FAQ」を選択し、このセクションに追加する～箇所の「リスト」をクリックします。
・「＋新しいリスト」をクリックします。
・ビューの追加画面で必要事項の追加をしていきます。
[テーブルを選択する]：FAQ
[データビューを選択する]：FAQ一覧表示用のビュー
[リストに名前を指定する]：FAQ一覧表示用のビュー
※リストに名前を～は自動入力されます。
・「その他のオプション」タブを選択し、ページ当たりのレコード数「10」と入力したら「完了」をクリックします。
6. FAQ詳細表示用フォームの作成
・画面左側一覧にある「データ」をクリックします。
・画面左側から「FAQ」を開き、「フォーム」タブを選択、「＋フォームの新規作成」をクリックします。
・フォーム名「FAQ詳細表示用のフォーム」と入力し、「作成」をクリックします。
・「＋フィールドの追加」を選択し、左側のテーブル列一覧から表示する列をクリックし以下のように追加します。
※フォームに項目が追加されるとテーブル列一覧から表示が消えます。
[タイトル]
[カテゴリ]
[内容]
・デフォルトで表示されている[レコードID]、[所有者]はそれぞれ選択した後、「非表示」をクリックしフォームに表示されないようにします。
・列追加の完了後、「保存して公開」をクリックします。
7. FAQ詳細表示用ページ作成とフォームの実装
・「ページ」タブをクリックします。
・「FAQ」の左側「・・・」をクリックし、「新しいサブページを追加します」を選択します。
・ページの追加画面が表示されたら、ページ名「FAQ詳細」、メインナビゲーションにページを追加するのチェックを外し、空白から開始を選択したあと「追加」をクリックします。
・「FAQ」ページを選択し、「リストの編集」をクリックします。
・リストの設定画面の「アクション」タブを選択し、詳細の表示を有効化した後、以下のように設定を行います。
[対象の種類]：Webページ
[Webページ]：FAQ詳細
[表示ラベル]：ビュー
入力が完了したら、「完了」をクリックします。
・「FAQ詳細」ページを選択し、このセクションに追加する～箇所の「フォーム」をクリックします。
・「＋フォームの新規作成」をクリックします。
・「フォーム」タブを開き、以下の内容を入力・選択します。
[テーブルを選択する]：FAQ
[フォームを選択する]：FAQ詳細表示用のフォーム
[選択したフォームのコピーに名前を付ける]：FAQ詳細表示用のフォーム
※選択したフォームの～は自動入力されます。
・「データ」タブを開き、このフォームのデータ「読み取り専用である」を選択し、「OK」をクリックします。
・「アクセス許可」をクリックします。
・「＋新しいアクセス許可」をクリックします。
・新しいテーブルのアクセス許可として、以下の内容を入力、選択します。
[名前]：FAQ詳細表示用フォームのアクセス許可
[テーブル]：FAQ
[アクセスの種類]：グローバルアクセス
[アクセス許可]：読み取り
[ロール]：匿名ユーザー・管理者・認証されたユーザー（３つすべて選択）
入力、選択が完了したら「保存」をクリックします。
※確認画面が表示されたら、もう一度「保存」をクリックします。
8. サイトのヘッダー編集、コンポーネントを追加し外観を整える
これまでの手順では、サイトの機能的な部分を追加してきましたが、
サイトに追加してきたページ、「ホーム」「お問い合わせ」「FAQ」について外観部分の編集を行っていきます。
内容
・ヘッダーの編集
・テキストの追加（タイトルやページ紹介文）
・ボタンの追加
サイトヘッダーのタイトルを編集する
・「サイトヘッダーの編集」をクリックします。
※ヘッダー部分にカーソルを当てると表示されます。
・サイトのタイトルに「カスタマーサポートサイト」と入力を行い、サイトヘッダーの編集画面を閉じます。
※変更は即時反映されます。
「ホーム」ページにタイトルと背景を設定する
タイトルの設定
・「ホーム」を選択し、このセクションに追加する～箇所の「テキスト」をクリックします。
・テキストボックスに「カスタマーサポートサイト」と入力します。
・段落となっている部分をクリックし、「見出し１」を選択します。
・タイトルの文字配置から「中央揃え」を選択します。
・「設計」アイコンをクリックし、背景色のスライドバーを一番右側までスライドさせます。
※スライドバー右側の「0」が「100」になります。
・背景色の右側の赤枠箇所をクリックすることでタイトルの背景色を変更することができます。
例では白を選択します。
背景の設定
・「バックグラウンドの編集」をクリックし、「画像」「画像の追加」の順に選択します。
※赤丸の箇所をクリックすると「バックグラウンドの編集」が表示されます。
・「画像のアップロード」をクリックします。
※画像選択画面が開かれるため、PCに保存されている好きな画像を選択してください。
・アップロードした画像を選択し、「OK」をクリックします。
ボタンの設置
・「＋セクションの追加」をクリックし、「２列」を選択します。
・コンポーネントの追加から「ボタン」をクリックします。
・ボタンのラベルのテキストボックスに「お問い合わせフォーム」と入力し、「ページへのリンク」を選択、「お問い合わせ」ページを選択し「ＯＫ」をクリックします。
・「位置を合わせる」アイコンをクリックし、「中央揃え」を選択します。
・コンポーネントの追加から「ボタン」をクリックします。
・ボタンのラベルのテキストボックスに「FAQはこちら」と入力し、「ページへのリンク」を選択、「FAQ」ページを選択し「ＯＫ」をクリックします。
・「位置を合わせる」アイコンをクリックし、「中央揃え」を選択します。
「お問い合わせ」ページにタイトルと説明文を追加する
「タイトルの追加」
・「お問い合わせ」ページを開き、「＋セクションの追加」をクリック、「１列」を選択します。
・このセクションに追加する～箇所の「テキスト」をクリックします。
・表示されたテキストボックスに「お問い合わせフォーム」と入力します。
・「段落」と表示されている箇所をクリックし、「見出し１」を選択します。
説明文の追加
・「＋」アイコンをクリックし、「テキスト」を選択します。
※「＋」アイコンは先ほど追加した、テキストボックスをクリックすると表示されます。
・表示されたテキストボックスに「製品についてのご質問や修理などについては、
こちらの入力フォームよりお問い合わせください。」と入力します。
「FAQ」ページにタイトルと説明文を追加する
「タイトルの追加」
・「FAQ」ページを開き、「＋セクションの追加」をクリック、「１列」を選択します。
・このセクションに追加する～箇所の「テキスト」をクリックします。
・表示されたテキストボックスに「FAQ」と入力します。
・「段落」と表示されている箇所をクリックし、「見出し１」を選択します。
説明文の追加
・「＋」アイコンをクリックし、「テキスト」を選択します。
※「＋」アイコンは先ほど追加した、テキストボックスをクリックすると表示されます。
・表示されたテキストボックスに「よくある質問やお問い合わせについては、
こちらをご確認ください。」と入力します。
サンプルデータの作成
FAQのサンプルデータをFAQテーブルに追加します。
・Power Apps（https://make.powerapps.com/）を開き、テーブルをクリックし「FAQ」を選択します。
・「編集」をクリックします。
・新規レコードとして、以下の内容を入力してください。
[カテゴリ]：製品
[タイトル]：製品〇〇について
[内容]：製品〇〇の製造完了しており、入荷の予定はございません。
※レコードIDはオートナンバーに設定変更したため、レコード追加時に自動で採番されます。
作成したサイトの確認
サイトのプレビュー表示
・Power Pages（https://make.powerpages.microsoft.com/）を開き、作成したサイトの「プレビュー」をクリックします。
・「デスクトップ」をクリックします。
「FAQ」ページを確認
・「FAQはこちら」をクリックします。
※文字色は手順通りに行われているとグレーになっています。
・先ほど登録したサンプルデータのレコードが表示されていることが確認できたら、レコードIDをクリックします。
・レコードの詳細内容が表示されていることが確認できたら完了です。
「お問い合わせ」ページの確認
・サイトタイトルをクリックし、ホームに戻ります。
・「お問い合わせフォーム」をクリックします。
・お問い合わせフォームが表示されたら、各項目の入力を行い画面下部にある「送信」をクリックします。
・送信完了の表示がされたら、Power Apps（https://make.powerapps.com/）を開きます。
・「テーブル」を開き、「お問い合わせ」をクリックします。
・先ほど送信した内容が登録されていたら完了です。
基本的なポータルサイトの構築完了
以上の手順で、Dataverseのテーブル作成～ポータルサイト構築までが完了しました。
この記事では、一からサイトを作りましたが、テンプレートを利用することでよりスピード感のある構築が可能になります。
また、他のPower Platform製品を活用し、新着のお問い合わせを受け付けたら担当者にメールで知らせたり、Power Appsのモデル駆動型アプリと連携させるといった使い方もできます。