Power Apps コンポーネントを活用して、開発効率を上げよう！（自作メッセージボックス）基礎編

# はじめに
Power Appsの作成に慣れてくると、自分の中でも**お決まりのメソッドが確立されていきます。**
そのような中で、**「これ毎回作るのだるいなあ」** と思うものはありませんか？

今回は、**メッセージボックス**を`コンポーネント`として作成し、使いまわしていこう！
という`初心者`向けの記事を書きます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/5f94483d-2913-9b88-7207-519662806377.png)

# コンポーネントとは
ズバリ、**Power Appsで再利用可能な部品**です。

1. テキストボックス、ボタンといった複数のコントロールをまとめて、**アプリの中で何度も使用可能**
1. カスタムプロパティで入出力を制御可能、これによって一度作成したコンポーネントでも下記のようなことができる
    - 値を入力してコンポーネント内部の値を変更する
    - コンポーネントで値を処理をして出力
1. コンポーネント ライブラリに登録することで、別のアプリケーション作成時にも再利用！

**Power Appsでガンガン開発！内製化促進！** という状況にうってつけの機能です！

**そもそも業務改善がしたくて始めたのに、開発がキツい・・・** となっては、元も子もないので、繰り返し同じものを作っている場合は、ぜひとも活用したいものです。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-component

## さっそくメッセージボックスを作ってみる
`VBA`を書きまくっていて、メッセージボックスは必ずユーザーに求められたこと、
鮮明に覚えています。

まずは、ファーストステップで簡単な`メッセージボックス`を作ります。

**[Notify](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-showerror)** があるのですが、デカデカとわかりやすいものが好まれますよね・・。

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

挙動は、こんな感じです。

![マイビデオ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/2bed85de-4c36-467f-561a-309ce15fa67c.gif)


:::note info
今回の記事の中では、前述した`コンポーネント ライブラリ`には触れません。
ステップバイステップで記事を分けて、応用を考えていこうと思います！
:::
 
## 1. お絵描き
`ツリービュー`で`コンポーネント`を選択、`+ 新しいコンポーネント`

こちらから、のびのびとコンポーネントを構築します。
まずは、絵（メッセージボックス）から描いていきましょう。

コンポーネント自体の`幅(Width)`、`高さ(Height)`を、
`App.ActiveScreen`を参照して設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/6d3df297-f5de-0dfd-4a21-ae825b359794.png)

```plaintext:コンポーネントの幅
App.ActiveScreen.Width
```

```plaintext:コンポーネントの高さ
App.ActiveScreen.Height
```

アプリと同様に、どんどん要素を追加していきます。
階層構造は、このようになります。

- **MsgDialogContainer（メッセージボックスの箱）**
    - MsgBoxHeader（ヘッダー）
        - MsgBoxTitle（メッセージボックスのタイトル）
        - DialogCancelIcon（キャンセルボタン）
    - MsgBoxBody（ボディ）
        - MsgBoxPrompt（メッセージ）
    - MsgBoxFooter（フッター）
        - galButtons（ボタンを`ギャラリー`で設定）
            - DialogButtons（ボタン）
- **ModalBackground（なんちゃってモーダルウィンドウ）**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/277a9663-6aaa-2d3f-bb28-04cb91718a1d.png)

::: note info
上から前に重なっていくレイヤーです
:::

## 2. `カスタムプロパティ`を付与!!
コンポーネントの特徴で、入出力をコントロールすることができます。

メッセージボックスを、コンポーネントの外から制御するために、
下記のプロパティを追加してください。

|入出力|プロパティ名|データ型|内容|
|---|---|---|---|
|入力|MsgTitle|テキスト|メッセージボックスのタイトル(今回の説明では割愛)|
|入力|**MsgPrompt**|テキスト|**メッセージボックスのメッセージ**|
|入力|ButtonsInfomation|テーブル|ボタンの文字をコントロール(今回の説明では割愛)|
|出力|**DialogVisible**|ブール値|**メッセージボックスの表示・非表示を制御**|

メッセージボックスを、開いたり閉じたりするために、変数を使います。

1. コンポーネントであるメッセージボックスの`OnReset`に下記を設定。

    ```plaintext:OnReset
    Set(cmpVisible,true);
    ```


1. ボタン`DialogButtons`の`OnSelect`に下記を設定
    ```plaintext:OnSelect
    Set(cmpVisible,!cmpVisible);
    ```

1. カスタムプロパティ`DialogVisible`を追加し、出力値に`cmpVisible`を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/7790dc00-6a67-513b-bd01-7c8f718bf235.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/fd9457a6-0f1c-b489-72cc-1f3bb51642a2.png)


## 3. `メッセージボックス`のテスト!!

作成した`コンポーネント`は、**カスタム**に追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/919a7b1f-05a1-4689-909c-76469f1cfde5.png)

試しに追加すると、コンポーネントのプロパティにより、`Width`、`Height`が画面全体に拡張してしまいます。
そこで、変数を活用します。

画面上の表示ボタンに、一旦下記の変数の設定をさせます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/d917b0cc-5803-df4b-3b88-c7aadeb91215.png)

```plaintext:OnSelect
Reset(MsgBox1);
Set(varVisible,true);
Set(varMsgBody,TextInput1.Text);
```

まずは、`カスタム コンポーネント`の`Visible` を
```Visible
And(varVisible,Self.DialogVisible)
```

これにより、出力される`Self.DialogVisible`(メッセージボックスの出力値 false)により
`Visible = false`となります！

## 4. 値をコンポーネントに渡す！

上記の`OnSelect`の中で`Set(varMsgBody,TextInput1.Text);`と書いています。
変数に、テキスト入力の値を格納しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/6b5788d3-e09a-4900-ffd5-e1309e515ec7.png)

メッセージボックスの`カスタム プロパティ`に`MsgPrompt`を`入力`で追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/345c4b42-a40e-4dcb-07a5-408e2774bc15.png)

これにより、メッセージボックスのコンポーネントの値を変更することができます！

# おわりに

`コンポーネント` ファーストステップでQiitaに挙げてみました！

内容のレベルを上げていきましょう！

:::note
著者も現在進行形で作りながら記事を書いてみています🐟💦
:::

それでは、**良いPower Lifeを！**