Power Apps PortalでLiquidを利用する#Power Platform リレー

こんにちは、日高です。最近Power Apps Portalを使用してアプリ開発をする機会がありその時の知見を書いていこうと思います。

Power Apps Portalについて

Power Apps PortalはMicrosoftが提供しているPower Platformの中の1サービスです。Power PlatformにはPower Appsというサービスもありますが、名前が似ているだけで別物なので注意してください。

Liquidについて

Power Apps Portalは基本的にLiquidとjavascriptとDataverseのリストやフォームを使用してサイトを作成します。Liquidはテンプレート言語でhtmlの拡張(?)のようなものになります。(ここら辺詳しくないので、この理解であってるのか微妙です)

具体的にLiquidを使用すると以下のタグを使用することができます。

変数タグ

Liquidを使用することで変数を定義できます。この変数はサイト生成時にjavascriptに変換されるので、Dataverseのデータを変数として割り当てて、javascriptで制御する、ってこともできます。

制御フロー タグ

いわゆる条件分岐です。

先程説明した変数タグで定義した変数等を条件に使って制御することができます。

イテレーション タグ

いわゆる繰り返しやループ処理です。

配列をループで回して表示したり、Dataverseのテーブルを表示したりすることができます。

テンプレート タグ

テンプレートの出力を制御するタグたちです。

fetchxmlを使用するとDataverseに対してクエリを実行できます。Power Apps Portalを使うにあたって結構便利だったのですが、fetchxmlの説明に関しては長くなりそうなのでまた別の記事で書こうと思ってます。

Dataverse エンティティ タグ

fetchxmlを使用するとDataverseに対してクエリを実行できると上で書いたのですが、Dataverseのデータを表示するにはfetchxmlを使用せずとも基本的には事足りる場合が多いです。

一つ一つ説明すると長くなってしまうので割愛します。

また、PowerBIに関しては使っていないのでよくわかりません。

使用例について

最後にLiquidの使用例を何個か紹介して終わろうと思います。

フォームを作成する

<div>
  {% entityform name: 'ほげほげフォーム' %}
</div>

名前指定でフォームを追加しています。フォームはポータル管理→コンテンツ→基本フォームで作成できます。

名前には作成したフォームの名前を入れる必要があります。

requestのパラメータにhogeが存在していたらhtml要素を表示する

{%if request.params.hoge %}
<div>
  huga
</div>
{% endif %}

request.paramsからrequestのパラメータを取得できます。

Dataverseのレコードをテーブルとして表示する

<div class="col-md-12 columnBlockLayout">
  {% entitylist id:page.adx_entitylist.id %}
  {% entityview %}
  {{entityview}}
  <table class="table" style="width: 80vw;">
    <thead>
      <tr>
        <th style="border-bottom: none;">
          テーブル名
        </th>
      </tr>
    </thead>
    <tbody>
      {% for record in entityview.records -%}
      <tr>
        <td style="width: 50%;">
          <p>
            {{ record['col_name'] }}
          </p>
        </td>
        <td style="text-align: center;">
          <a class="btn btn-default" href="/hoge?itemid={{ record.id }}">移動</a>
        </td>
      </tr>
      {% endfor -%}
    </tbody>
  </table>
  {% endentityview %}
  {% endentitylist %}
</div>

id指定でリストを指定しています。

リストはフォームと同様にポータル管理→コンテンツ→リストから作成できます。

終わりに

Liquidを使用するとPower Apps Portal上でできることが広がります。

もしPower Apps Portalを使用する際は参考にしてみてください!

FIXER Inc. 日高 諒久
  • FIXER Inc. 日高 諒久
  • 入社1年目、いろいろ勉強中。最近はvue.js、Nuxt、Azure Communication Services、power apps portalとかをよく触ってます。