DX station

【第三回】 Power Apps ポータルのカスタマイズ

佐藤

みなさん、こんにちは。佐藤です。
本シリーズ過去2回では Power Apps ポータルでどのような情報を発信できるのか、そしてポータルアプリをどのように作成するのかについて紹介しました。
【第一回】Power Apps ポータルとは
【第二回】Power Apps ポータルを始めよう
Power Apps ポータルについてのシリーズ第三回目となる今回は、Power Apps ポータルのカスタマイズ方法について簡単に紹介します。




製品・サービスに関するお問い合わせ・資料請求はこちら



1. 本シリーズの内容

本シリーズは全3回に分けて Power Apps ポータルに関する内容をご紹介していきます。

【第一回】Power Apps ポータルとは

  • Power Apps ポータルとは
  • Power Apps ポータルの利用シーン
  • デモポータルを作ってみた
  • Power Apps ポータルの利点と注意点

【第二回】 Power Apps ポータルを始めよう

  • Power Apps ポータルの構想
  • Power Apps ポータルの作成手順
  • ポータルアプリの種類
  • 「一から作成したポータル」のデフォルト機能

【第三回】 Power Apps ポータルのカスタマイズ



製品・サービスに関するお問い合わせ・資料請求はこちら



2. Power Apps ポータルのカスタマイズツール

Power Apps ポータルをカスタマイズするツールとして主に以下の2つがあります。

Power Apps ポータル studio

主に Web ページの画面デザインを中心に、感覚的な操作でカスタマイズできるツールです。
Power Apps 画面のポータルアプリから、ポータルアプリを選択して「編集」ボタンをクリックすることで開くことができます。

操作例>
  • 背景画像の変更
  • タイトルや説明文の挿入
  • 一覧(ビュー)の追加・削除
  • Web ページの追加
  • アクセス権の設定

Power Apps ポータル studio画面


ポータル管理アプリ

ポータル管理アプリには、Power Apps ポータル studio で設定した内容も含めて、サイトの設定情報がすべて格納されています。
Power Apps ポータル studio でできないような素敵なデザインにしたい場合や、標準にない機能や制御を実装したい場合はコーディングが必要になります。その際はこちらのポータル管理アプリにて、HTML や CSS、JavaScript に加え Liquid というテンプレート言語を使用して修正していきます。

ポータルアプリ画面


製品・サービスに関するお問い合わせ・資料請求はこちら



3. デザインのカスタマイズ

Power Apps ポータル studio で画面をカスタマイズする方法を、いくつか紹介したいと思います。


●タイトルの編集

画面上に表示された文字を直接書き換えることができます。
同様に、サブタイトルや説明文なども直接修正できます。
タイトルの編集

●ビュー(一覧)の表示

「一覧取得」コンポーネントを追加します。
表示するビューについては、右側に表示される詳細設定画面で指定します。
同様の方法で、フォーム(画面)や画像、テキストについても画面に追加していくことができます。
ビュー(一覧)の表示

●背景画像の変更

背景画像の変更には、まず背景として使用する画像を Web ファイルとして登録します。
ポータル管理の Web ファイルから、画像の基本情報の登録と画像ファイルのアップロードを行います。
背景として使用する画像の登録
その後、Power Apps ポータル studio を開き、theme.css の背景画像ファイル名を書き換えます。
背景画像の変更


紹介したタイトルの編集、ビュー(一覧)の表示、背景画像の変更を行い、以下のようなホーム画面にカスタマイズしました。
カスタマイズしたポータルサイトのホーム画面
ホーム画面下部の「商品カテゴリ」部分は、画像リンクを挿入してさらにカスタマイズを加えており、ローコードの記載が必要になるなど少し難易度が上がります。
また、他ページについてもグラフを表示したりアンケートを配置したりとカスタマイズしています。
もしご紹介した以上のカスタマイズしてみたい、作ってみたいけどちょっと難しそう、などのご相談があれば、是非お問合せください。


製品・サービスに関するお問い合わせ・資料請求はこちら



4. Power Apps ポータルのアクセス許可

Power Apps ポータルでは、ログインしているユーザーの種類(Web ロール)によって、アクセスできる Web ページやアクセスできるデータを制御することができます。
デフォルトでは以下の3種類の Web ロールが用意されており、ポータルサイトを利用するユーザーの区分に合わせて Web ロールを追加・修正してアクセス権を設定していきます。

  • 管理者
  • 匿名ユーザー(サインインしていないユーザー)
  • 認証されたユーザー(サインインしたユーザー)

アクセス権は「Web ページ毎のアクセス許可」と「テーブル毎のアクセス許可」の2種類で指定可能で、どちらも Power Apps ポータル studio から設定できます。


Web ページ毎のアクセス許可

Web ロールによって、アクセスできる Web ページを制御する方法について記載します。
Web ページを選択時に表示される詳細設定画面の「アクセス許可」メニューで設定します。
デフォルトでは「すべてのユーザーが利用可能なページ」が ON になっており、アクセスしたユーザーが誰でも閲覧可能な状態になっています。これを OFF にすると、利用可能なロールを選択するメニューが表示され、閲覧できるユーザーの種類を制限することができます。
ホーム画面以外の Web ページはホーム画面を親とする親子関係が設定されており、子ページ側で「親ページのアクセス許可を継承する」設定が可能です。

Web ページ毎のアクセス許可


テーブル毎のアクセス許可

Web ロールによって、アクセスできるデータを制御する方法について記載します。
Power Apps ポータル studio の設定ボタンから開く「テーブルのアクセス許可」画面で設定します。
各テーブルへのアクセスの種類と特権、ロールを指定することで、テーブルのアクセス権限を指定します。

表示するビューとフォームの作成


製品・サービスに関するお問い合わせ・資料請求はこちら



5. まとめ

シリーズ第三回目の今回は、Power Apps ポータルのカスタマイズ方法について簡単な操作を紹介しました。
Power Apps ポータル studio でほとんどのサイトデザインをカスタマイズすることができるので、HTML や CSS の知識がなくても「簡単にサイトを作成できる」というちょっとした感動を共感いただけていれば嬉しいです。

今回触れなかった、サイトの動作設定やセキュリティ制御など、実際に運用するサイトの作成にはまだまだ考慮いただく事項があると思います。

導入したいけれど自社だけでは難しい!という場合は、是非お問合せください。



製品・サービスに関するお問い合わせ・資料請求はこちら



関連ページ

「Microsoft Dynamics 365 導入支援サービス」はこちら
「Microsoft Dynamics 365 導入支援サービス」お問い合わせ・資料請求はこちら
「DX Sales for Microsoft Teams」はこちら
「DX Sales for Microsoft Teams」お問い合わせ・資料請求はこちら
Dynamics 365 Sales を導入する - 第 1 回 Introduction
【第一回】 Power Apps ポータルとは
【第二回】 Power Apps ポータルを始めよう

お問い合わせ

製品・サービスに関するお問い合わせはお気軽にご相談ください。

ピックアップ

セミナー情報
クラウドエンジニアブログ
clouXion
メールマガジン登録