🎃

Power Apps portals で Web ページにカスタムしたテーブルを表示する(1/2)

2022/04/20に公開

Power Apps

powerappsportals

Power Pages

tech

Power Pages でも使えます。

Power Apps portals は素早く外部公開できるサイトを作成することができますが、設置できるコンポーネントはある程度決まったものとなります。
これが物足りないという場合にはカスタマイズとなるのですが、そのサンプルとして JavaScript と Web API や Liquid を使って Web ページに独自のテーブルを表示してみました。

まず今回は、Web ページで JavaScript を動作させるところまで作成し、次回、 Dataverse からデータを取得して表示するところを作成します。

完成イメージ

Grid.js を使ってテーブルを表示しています。

続きの記事

事前準備

作業に入る前に、本件で利用するポータルを作成し、外部への公開を制限する設定をしておきます。

ポータルを作成する

ポータルを一から作成に従って、ポータルを作成します。初回実行時は少し時間がかかるので注意してください。
以下のように表示できれば完了です。
使用しているポータルのバージョン : 9.4.3.40 ae284bfb-5be4-405b-84bc-7cf4998b2ba5

ポータルのコンテンツの外部への公開を制限するように変更

ポータルの作成が完了したら、作成したポータルの編集をクリックし、Studio を起動します。
(ホームを選択した状態で)すべてのユーザーが利用可能なページを OFF にします。
ロールの選択をクリックし、表示されるパネルで管理者をクリックします。
同期の構成をクリックします。

これで、コンテンツの外部への公開を制限します。

ポータルへの新規のユーザ登録を制限するように変更

作成したポータルの設定をクリックします。
認証設定から詳細設定をクリックします。
右上の歯車アイコンをクリックします。
登録を開くを OFF にして保存をクリックします。

これで、新規のユーザ登録を制限します。

自身のアカウントを管理者に設定

ポータル管理アプリをクリックします。
取引先担当者をクリックします。
自身のアカウントが表示されていることを確認し、Web ロールをクリックします。

※表示されていない場合は、一度 Azure Active Directory を使ってポータルにサインインしてみてください。
管理者をクリックします。
関連をクリックし、取引先担当者をクリックします。
既存の取引先担当者の追加から、先ほど確認した自身のアカウントを追加します。

これで、自身のアカウントが管理者扱いになり、すべてのページにアクセスできるようになります。

作業概要

Power Apps portals では、コンテンツスニペット、Web ページのコンテンツ、Web テンプレートにそれぞれ HTML 等を記述することができます。
これらを組み合わせて Web ページを構成します。
主な使い分けは以下(主観)です。

項目	使い方
コンテンツスニペット (Content Snippets)	サイト内で繰り返し利用する語句などを定義する
Web ページのコンテンツ (Web Pages の Content)	そのページだけで利用するものを定義する
Web テンプレート (Web Templates)	サイト内で繰り返し使用する画面レイアウトや、共通の処理を定義する

これらを、HTMLを持たないページテンプレート (Page Templates) というものに紐づけることで、使いまわせるページのテンプレートを作成することができます。
ページそのものは Web ページで定義され、これにページテンプレートを紐づけることでページを表現するような仕組みになっています。

今回は、Studio から編集できるメッセージ部分をWeb ページのコンテンツ、編集させたくない JavaScript 部分を Web テンプレートで作成します。

作業手順

Web テンプレート (JavaScript 部品)の作成

まず、JavaScript を動作させる部分のみを記載した Web テンプレートを作成します。

ポータル管理アプリから Web テンプレートをクリックし、新規をクリックします。
以下のように入力し、保存をクリックします。

項目	設定値
名前	CustomTableScript
Web サイト	{自身のポータルサイト}
ソース	以下に記載

ソースに入力する値

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
{% comment %} ライブラリの参照 {% endcomment %}

<style>
.my-btn-class {
  color: black;
}
.my-btn-class:focus,
.my-btn-class.focus {
  color: black;
}
</style>
{% comment %} 競合するスタイルの上書き {% endcomment %}

<script>
document.addEventListener('DOMContentLoaded', async () => {

  new gridjs.Grid({
    columns: ["Name", "EMail", 'Phone Number'],
    data: [
      ["Naoya", "naoya@example.com", "34567891234"],
      ["Taro", "taro@example.com", "45678901234"],
      ["Hanako", "hanako@example.com", "56789012345"]
    ],
    className: {
      paginationButton: "my-btn-class"
    },
    search: {
      enabled: true
    },
    sort: true,
    pagination: {
      enabled: true,
      limit: 2,
      summary: true
    },
    language: {
      "search": {
        "placeholder": "🔍 Search..."
      },
      "pagination": {
        "previous": "←",
        "next": "→",
        "showing": "😃 Displaying",
        "results": () => "Records"
      }
    }
  }).render(document.getElementById("gridWrapper"));

}, false);
</script>
{% comment %} テストデータでの Grid.js の実行 {% endcomment %}

※ Power Apps portals は Bootstrap 3.3.6 を使っているようですので、使用するライブラリによっては CSS が競合する場合があります。

Web テンプレートページの作成

次に、その部品を参照する、実際のページに近い Web テンプレートを作成します。

ポータル管理アプリから Web テンプレートをクリックし、新規をクリックします。
以下のように入力し、保存をクリックします。

項目	設定値
名前	CustomTablePage
Web サイト	{自身のポータルサイト}
ソース	以下に記載

ソースに入力する値

{% extends 'Layout 1 Column' %} {% comment %} デフォルトで存在する別の Web テンプレート をレイアウトとして使用 {% endcomment %}
{% block main %} {% comment %} レイアウトとして利用する Web テンプレート の block main 部分を以下で上書き {% endcomment %}
{% include "CustomTableScript" %} {% comment %} 作成した CustomTableScript を Web テンプレート を参照 {% endcomment %}
{% include 'Page Copy' %}
<div class="container" role="main">
  <div id="gridWrapper"></div>
</div>
{% endblock %}

ページテンプレートの作成

次に、できた Web テンプレートを紐づけるページテンプレートを作成します。

ポータル管理アプリから Web テンプレートをクリックし、新規をクリックします。
以下のように入力し、保存をクリックします。

項目	設定値
名前	CustomTablePageTemplate
Web サイト	{自身のポータルサイト}
種類	Web テンプレート
Web サイトのヘッダーとフッターの使用	✅

Web ページの作成

やっと、Web ページそのものを作成します。

ポータル管理アプリから Web ページをクリックし、新規をクリックします。
以下のように入力し、保存をクリックします。

※保存をクリック後、少し時間がかかる場合があります。

項目	設定値
名前	カスタムテーブルページ
Web サイト	{自身のポータルサイト}
親ページ	ホーム
部分 URL	customtable
ページテンプレート	CustomTablePageTemplate
公開状況	公開済み

Web ページのコンテンツを作成

ここからは、Power Apps portals Studio で作業していきます。

ポータルの編集をクリックし、Studio を起動します。
カスタムテーブルページをクリックします。
同期の構成をクリックします。

※初回表示時はエラーになっていることがありますが、同期の構成を選択してからのエラーでなければ問題ありません。
自由にコンテンツを作成します。

動作の確認

最後に動作を確認します。
Studio の状態では、JavaScript は動作しませんので、ご注意ください。

Web サイトの参照をクリックします。
作成したコンテンツと、その下に JavaScript の実行結果であるテーブルが表示されていれば完了です。

まとめ

まずは、JavaScript の実行までを記事にしました。まるで SharePoint のクラシック時代を思い出すようなカスタマイズ方法でした。
次回は Web API や、Liquid 使って Dataverse のテーブルにアクセスする部分を記事にします。
これを使えば、サインインしたユーザごとの権限の範囲のデータを自由に取得できるので、かなりリッチな画面を作成することができます。

Power Apps portals は外部の関係者を含めた業務を変えていくなど、いろんな用途で活用できると思いますので、ご興味あれば触ってみてください。