PowerApps | 簡単なログインフォームを作成する

今回は簡単なログインフォームを作成します。

画面イメージ

下図のような構成とします。

・ログイン画面からIDとパスワードを入力

・エラー時はログイン画面の上側に「ERROR」のポップアップ表示

・ログイン成功時はトップ画面に遷移

・ログアウト時はログイン画面に遷移

では作っていきます。

ユーザデータの作成

今回はOneDrive上にエクセルファイルを設けておき、そこにID、パスワード情報を記録します。

テーブル名：Book_Users

PowerAppsのコネクタ設定

先ほど作成したUserListのコネクタを設定します。

データソースを選択し、先ほど作成した「Book_Users」テーブルのコネクタを作成します。

PowerAppsの画面作成：ログイン画面

画面名：ログイン画面

OnVisibleプロパティ

初期表示時やログアウト時に値が残っていないように、初期化を行います。

Reset(TextInput_ID);
Reset(TextInput_PW);
Set(Global_ID,Blank());

ログインボタンのOnSelectプロパティ

クリック時に認証を行うようにします。

OnSelectプロパティに以下のコードを記載します。

If(
    IsEmpty(Filter(Book_Users,UID=TextInput_ID.Text And PW=TextInput_PW.Text)),
    Notify("ERROR：システム管理者へお問い合わせください",NotificationType.Error)
    ,(
        Set(Global_ID,TextInput_ID.Text) And Navigate(トップ画面)
     )
)

Filter

Book_Usersテーブルに対して、UIDとPWが一致するレコードを検索します。

戻り値はテーブル形式です。

learn.microsoft.com

 

1 User

4 Pockets

Power Apps の Filter、Search、LookUp 関数 (動画を含む) - Power Platform

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-filter-lookup

Power Apps の Filter 関数、Search 関数および LookUp 関数の構文と例を含む参照情報。

IsEmpty

テーブルが空か空ではないかを判定します。RowCountが0の判定と同等です。

learn.microsoft.com

 

1 User

Power Apps での Blank、Coalesce、IsBlank、および IsEmpty 関数 - Power Platform

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-isblank-isempty

Power Apps での Blank、Coalesce、IsBlank、および IsEmpty 関数の構文と例を含む参照情報。

Notify

画面上部にポップアップを表示します。

魅せるIT編集部

2022.10.19

PowerApps | バナー通知（ポップアップ）の設定

https://miseruit.com/2022/10/19/post-3619

今回は「バナー通知」の設定方法を検証します。画面イメージイメージを見れば、何を指しているのかが分かりやすいと思います。アプリケーションの画面上部に表示されているバナーのことです。Notify関数の使い方このバナーを制御するには、Notify()関数を用います。コード関数の引数は以下の通りです。Notify( Message ] )１）Message – 必須。 表示したいメッセージを記載します。２）NotificationType – 省略可能。 メッセージの種類を指定します。 既定は NotificationType.Information です。３）Timeout – 省略可能。 通知を自動...

If()

今回は「UIDとPWで検索した結果が空か否か」に対して

　True（空）：Book_UsersテーブルにレコードがなければErrorのポップアップ

　False（空ではない）：Global_IDという変数にIDをセットし、トップ画面に遷移

といった制御を行います。

PowerAppsの画面作成：トップ画面

画面名：トップ画面

Label_UserIDへの表示

ログイン成功時に、ログインしているUserのIDを表示します。

Textプロパティに以下のコードを記載します。

"Login User： " & Global_ID

Button_LogoutのOnSelectプロパティ

トップページに戻るためのコードを記載します。

Navigate(ログイン画面)

まとめ

以上で簡単なログインフォームを作成することができます。

ではまた！