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

事前準備

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

ポータルを作成する

• ポータルを一から作成 に従って、ポータルを作成します。初回実行時は少し時間がかかるので注意してください。

• 以下のように表示できれば完了です。
  

• 使用しているポータルのバージョン : 9.4.3.40 ae284bfb-5be4-405b-84bc-7cf4998b2ba5

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

• ポータルの作成が完了したら、作成したポータルの 編集 をクリックし、Studio を起動します。
  

• (ホームを選択した状態で)すべてのユーザーが利用可能なページ を OFF にします。
  

• ロールの選択 をクリックし、表示されるパネルで 管理者 をクリックします。
  

• 同期の構成 をクリックします。
  

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

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

• 作成したポータルの 設定 をクリックします。
  

• 認証設定から 詳細設定 をクリックします。
  

• 右上の 歯車アイコン をクリックします。
  

• 登録を開く を OFF にして 保存 をクリックします。
  

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

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

• ポータル管理アプリ をクリックします。
  

• 取引先担当者 をクリックします。
  

• 自身のアカウントが表示されていることを確認し、Web ロールをクリックします。
  
  ※表示されていない場合は、一度 Azure Active Directory を使ってポータルにサインインしてみてください。

• 管理者 をクリックします。
  

• 関連をクリックし、取引先担当者をクリックします。
  

• 既存の取引先担当者の追加から、先ほど確認した自身のアカウントを追加します。
  

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

作業概要

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

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

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

作業手順

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

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

• ポータル管理アプリ から 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", "[email protected]", "34567891234"],
      ["Taro", "[email protected]", "45678901234"],
      ["Hanako", "[email protected]", "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 テンプレート をクリックし、新規 をクリックします。
  

• 以下のように入力し、保存 をクリックします。
  

{% 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 テンプレート をクリックし、新規 をクリックします。
  

• 以下のように入力し、保存 をクリックします。
  

Web ページ の作成

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

• ポータル管理アプリ から Web ページ をクリックし、新規 をクリックします。
  

• 以下のように入力し、保存 をクリックします。
  
  ※保存をクリック後、少し時間がかかる場合があります。

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

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

• ポータルの 編集 をクリックし、Studio を起動します。
  

• カスタムテーブルページ をクリックします。
  

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

• 自由にコンテンツを作成します。
  

動作の確認

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

• Web サイトの参照 をクリックします。
  

• 作成したコンテンツと、その下に JavaScript の実行結果であるテーブルが表示されていれば完了です。
  

まとめ

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

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