Power Apps Portalをコーディングでカスタマイズする方法3種!!!

はじめに

この記事では代表的なローコードアプリの一つPower Apps、その中でも外部へ公開するWebサイトを作成することができるPower Apps Portalについて、コーディングでカスタマイズする方法を3つ紹介します。

せっかくのローコードアプリでがっつりコーディングをしてしまったら身も蓋もないですって?それは充分承知です。ですが、天下のMicrosoftさんもPower Apps Portalをただのローコードアプリで終わらせたくないのです。いざという時のために、すこし手の凝ったこともできる手段を用意してくれているので知っていて損はありません!!!

Power Apps Portal の関連記事はこちら↓

HTML、Javascript、CSS、Liquid Template Languageが書けるというところは3つとも同じです。なので自分が使ってみた感想をもとに使い分けも合わせて紹介できたらと思います。

1. ソースコードエディター

1つ目はソースコードエディターです。 サイト編集画面の右下にある小さな </>マークから開くことができます。 ここではページの外観をみながらコードを適用させる箇所(コンポーネント)を指定してコードを書くことができます。

ソースコードエディターの場所

Webサイトの参照からすぐにデザインや挙動を確認できるので、WYSIWYGに近い形でコードを書くことができます。

しかし一度にページのコード全体を見ることができないので、同じようなコードをたくさん書いてしまうおそれがあります。テスト程度に押さえておくのがいいかもしれません。

2. カスタム JavaScript / カスタムCSS

2つ目はカスタム JavaScriptです。 これはポータルサイトを作成すると自動でPower Appsのアプリ一覧に追加される「ポータル管理」からコンテンツ下の「Web ページ」>「編集したいページ」>「ローカライズされたコンテンツ」>「詳細」から確認することができます。(「全般」にはHTMLを編集する画面もあります)

ここではHTML、Javascript、CSSごとにはなりますがそのページで書いているコードをまとめて確認、編集することができます。

カスタムJavascript/CSSの編集画面

3. Web テンプレート

最後はWeb テンプレートです。 これも2つ目と同じ「ポータル管理」からコンテンツ下の「Webテンプレート」から確認することができます。

Web テンプレートはその名の通り、複数のページで使用するようなヘッダー、フッター、APIのコールのような処理をパーツとして作ることができます。

Webテンプレートの編集画面

テンプレートを使用するときは{% include 'Web Template' %}のようにLiquidで書くことができます。このように書くとテンプレートで書いている部分がそのままコードに埋め込まれます。またテンプレートからテンプレートを参照することも可能なので<div><script>のようなタグが入れ子になってしまわないように気をつけましょう。

最後に

この記事ではPower Apps ポータルについて、コーディングでカスタマイズする方法を3つ紹介しました。それぞれで自分の使用感から使いどころを書いてみましたが、とは言ってもローコードアプリです。あまり何も考えないで乱用するとコード管理が難しくなるので厳禁です。

用法・用量を守って正しくお使いください。