PowerApps でConnpass簡易受付アプリを作る #04

昨年2018年12月22日に開催された「Power BI 勉強会#11」で利用していた、PowerAppsで作成したConnpass簡易受付アプリの作り方をStep by Stepで紹介していきます。第4回目は、完結編です！受付の処理と、細々したトコを作成してアプリ全体を完成させます。
# 前回まで
[＃01](https://qiita.com/yamad365/items/9b005f58bb9db32a75d9)
[＃02](https://qiita.com/yamad365/items/c0ece19ab5919b934a0e)
[＃03](https://qiita.com/yamad365/items/3ae906aba9f746faa3a3)

# 受付処理の作成
前回までに作成したギャラリーコントロールに対して、受付の処理を実装します。具体的には、データソースのExcelにある［出欠ステータス］に対して受付時間（システム時間）を更新します。

1. 不要なアイコンを削除
”＞”アイコンは不要なので削除しましょう。ギャラリーコントロールの一番上にある行の対象を選択してDelキー押下です。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/215892/17e8f59d-ae68-850c-8beb-0b17e1e7bae3.png)

2. 受付ボタンの配置
続けて、ギャラリーコントロールの一番上にある行へボタンを追加します。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/215892/db717da1-611a-515d-4523-1b7d8f141b44.png)
［Text］プロパティに対して、下記を設定します。いま選択している行のアイテムが受付されてない場合は”受付”、済みの場合”済”を表示するようにしています。

    ```Button.Text
    If(IsBlank(ThisItem.出欠ステータス),"受付","済")
    ```

3. 受付ボタン押下時の実装（受付実施）
続けて、データソースを更新する処理を実装します。
![03.png](https://qiita-image-store.s3.amazonaws.com/0/215892/d1731967-2c58-7901-fbcd-116991381939.png)
ボタンの［OnSelect］イベントへ、下記を設定します。押下した対象の"出欠ステータス"をシステム時間で更新します。これで、出欠ステータスに値が設定されるため”受付した＝列がブランクではない＝出席”という判定が可能になります。

    ```Button.Onselect
   Patch(UserList,LookUp(UserList,受付番号=ThisItem.受付番号),{出欠ステータス:Now()})
    ```

■参考URL
[PowerApps の Patch 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-patch)

4. 受付済みの場合、受付ボタンの色を変える
受付の未・済を識別しやすくするため”済”の場合、ボタンの背景色を変更しておきます。色を変えると視覚的に認識しやすくなります。こういう細かな配慮で使い勝手が向上するので、個人的によくコレ系の手当を実施してます。
![04.png](https://qiita-image-store.s3.amazonaws.com/0/215892/23040261-e415-7cc2-f6d4-997caee93bb5.png)

ボタンの［Fill］プロパティへ下記を設定します。

```Button.Fill
If(IsBlank(ThisItem.出欠ステータス), RGBA(56, 96, 178, 1),RGBA(0,0,0,1))
```

### 受付処理の動作イメージ
上記までの段階で、動作させるとこんな感じです。受付を実施した対象のデータが、ちゃんと更新されていることが把握できるかと思います。
![mv01.gif](https://qiita-image-store.s3.amazonaws.com/0/215892/cc82ae23-dfe0-4b9d-b9ae-a37f93d0552d.gif)

# 受付ミスの回避策を実装
操作ミスなどで、本人とは異なる人を受け付けてしまう場合も考えられます。なので、その際の受付キャンセル処理を実装しておきます。Excelを直接更新しても良いのですが、そんなのメンドクサイですよね。

1. 受付キャンセル用のアイコンを設定
ボタンの横に［ゴミ箱］アイコンを使いします。赤などの目立つ色へ変更した後で、キャンセル処理を実装します。
![05.png](https://qiita-image-store.s3.amazonaws.com/0/215892/501beee7-2f3d-55ab-ad43-19140c988b88.png)
アイコンの［OnSelect］イベントへ下記を設定します。受付ボタンとロジック的には同様で、更新する値がブランク（””）になっているダケです。

    ```icon.OnSelect
    Patch(UserList,LookUp(UserList,受付番号=ThisItem.受付番号),{出欠ステータス:""})
    ```


2. アイコンの表示・非表示を制御
ボタンが”済”＝受付済み以外は、ゴミ箱アイコンを表示する必要がありません。ですので、受付済み以外のアイコンは非表示にしちゃいましょう。
![06.png](https://qiita-image-store.s3.amazonaws.com/0/215892/8991d765-74b5-0170-4a40-8a22cf474c81.png)
アイコンの［Visible］プロパティへ下記を設定します。

    ```icon.Visible
    Not(IsBlank(ThisItem.出欠ステータス))
    ```

### 受付キャンセルの動作イメージ
上記までの段階で、動作させるとこんな感じ。前回はシステム時間で更新していましたが、今回はそれを初期化（ブランク）にしていることが把握できるかと。
![mv02.gif](https://qiita-image-store.s3.amazonaws.com/0/215892/f694f777-c38c-3b08-2efb-0a2974d2472d.gif)

これで、簡易受付アプリとしては運用可能なレベルに達したと思います。実際、この連載の元ネタになったアプリを作成した際は、ここまで実装するのに約１時間程度だったと記憶しております。（しかも、呑み会が終わった後のホテルで実装したｗ）
 
# チョッと便利にする１：検索条件の初期化
一応は完成しているモノの、もう少し便利にしてあげた方が利用者は嬉しいんじゃないかな？と思った箇所があるので、そこを手当していきます。つまり、オマケ。でも、あると嬉しい（ハズ）の機能って感じの”検索条件を初期化する処理”です。

1. 検索条件初期化ボタンの配置
検索用テキスト入力コントロールたちの右側にボタンを追加。［Text］プロパティを”検索条件初期化”などに変更します。そして、本題の初期化用ロジックを実装します。
![07.png](https://qiita-image-store.s3.amazonaws.com/0/215892/b9afd8d5-ad59-caa1-9a2c-26605d3360e2.png)
ボタンの［OnSelect］イベントへ下記を設定します。

    ```Button.OnSelect
    UpdateContext({isReset:true})
    ````

2. 検索条件のリセット処理を実装
”受付番号”テキスト入力コントロールを選択し、初期化処理を設定していきます。
![08.png](https://qiita-image-store.s3.amazonaws.com/0/215892/41e61b3d-ecf8-975e-4cc5-1e44a9e49676.png)
該当コントロールの［Reset］プロパティへ下記を設定します。

    ```TextInput.Reset
    isReset
    ```

3. 検索条件のリセット解除を実装
ずーっとリセット用のフラグがON（True）だと気持ち悪いですよね。なので、検索条件が再入力されたらフラグをOFF（False）にする処理を実装しておきます。
![09.png](https://qiita-image-store.s3.amazonaws.com/0/215892/9fdbfc50-0558-9dce-fb0e-a53fc797aaee.png)
該当コントロールの［OnChange］イベントへ下記を設定します。

    ```TextInput.Onchange
    UpdateContext({isReset:false})
    ```

4. もう１つのテキスト入力コントロールにも設定実施
”ユーザー名”テキスト入力コントロールにも上記の設定を実施します。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/215892/3dc3575e-6e62-0c29-bb54-0c4c9811b227.png)

C#などのプログラム言語経験者だと、初期化ボタンを押下した際のイベント内に、初期化する対象のコントロールへのアプローチを記載することが多いかと思います。PowerAppsは、そのような書き方ができません。そのため、初期化をする際にはResetプロパティに対してTrueの値を与えてやる、という動作を実装する必要があります。ここら辺は、他開発言語経験者だとハマるポイントかと思います。

# チョッと便利にする２：受付済み数/総数の表示
「今、何名きてる？」って受付してると言われますよね。たぶん。その際、いちいち数を数えるなんてナンセンス！と思ったので、人数を表示しちゃいます。

検索条件初期化ボタンの右側にラベルを追加。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/215892/f6fec6d1-76c9-514f-0718-00254b701791.png)
追加したラベルの［Text］プロパティに対して下記を設定します。

```Label.Text
"受付/総数：" & CountIf(
    UserList,
    Not(IsBlank(出欠ステータス))
) & "/" & CountRows(UserList.出欠ステータス)
```

出欠ステータスがブランク（””）ではない＝受付済み、と単純にデータソースの総数をカウントしているだけですね。これがあれば、1発で「今、何人？」が把握できます。

# 完成形の動作イメージ
ここまでの実装結果を実行したイメージはこんな感じです。
![mv03.gif](https://qiita-image-store.s3.amazonaws.com/0/215892/f7dd1e60-9b52-a36a-08f1-5eb1177329f1.gif)

これで、受付番号、またはユーザー名で検索することで、申し込み者の確認と受付処理が実施可能になりました。ここまでの手順をトレースしてくだされば、おそらくアプリが作成できていると思います。念のため、ダウンロードも用意しておきますので、ご自由にお使いください。

■ダウンロード先
[サンプルデータ](https://1drv.ms/x/s!AtsRqPS7HCvIhRTCG7s3CKHj5frk)
[エクスポート済みアプリ](https://1drv.ms/u/s!AtsRqPS7HCvIhRWd55_--bYD6ZAd)

# 諸注意
PowerApps経験者の方はお気づきかもしれないですが、いくつか注意点があります。

- 提供サンプルデータ、アプリのご利用は自己責任でお願いいたします
    - 一応言っておくスタイルです
- データソースがExcelのため、複数ユーザーからの平行利用ができません
    - 複数ユーザーによる同時利用がしたい場合は、CDM等を検討ください
- データソース元であるODfBのExcelを直接開くとアプリから更新できなくなります
    - 排他になります。しょうがないね

# まとめ
アプリを作るより、この連載を書く時間のが長かったよ！( ﾟДﾟ)

不明点等ありましたら、DM等でお問い合わせください。なお、対応はベストエフォートになります。ご理解お願いします。

[＜＜前回＃03](https://qiita.com/yamad365/items/3ae906aba9f746faa3a3)