【Power Apps】コピペで簡単！おしゃれなポップアップ（ダイアログ）のサンプル

今回の記事では、Power Appsでおしゃれなポップアップ（ダイアログ）を実装していきます。
コピペで簡単に実装することができるため、ぜひご自身のアプリに活用いただければと思います。

実現したいこと
実装方法
1. ポップアップ表示ボタンの実装
2. ポップアップの実装
仕組み
まとめ

実現したいこと

完成イメージは次の通りです。

左上の「ポップアップ表示」ボタンを押すと、おしゃれなポップアップが表示される！

実装方法

今回は2024年8月に一般提供が開始された「コードビュー機能」を使っていきます。
プレビュー機能にはなりますが、他者が作ったコントロールを簡単に自環境に導入できます。

コードビューでアプリの機能を理解する (プレビュー) - Power Apps

キャンバスアプリのコードビューでアプリの機能を理解します。

ポップアップ表示ボタンの実装

まずは下のYAMLコードをコピーします。（1行目右端のコピーボタンをご利用ください）

- btnDisplayPopup:
    Control: Classic/Button
    Properties:
      OnSelect: |-
        =// ポップアップを表示する処理
        UpdateContext({locPopupVisible: true})
        // © 2024 Power 365 Medium, Hiromaru
      Text: ="ポップアップ表示"
      BorderColor: =Self.Fill
      BorderThickness: =0
      Color: =Color.White
      Fill: =ColorValue("#1976D2")
      FocusedBorderColor: =ColorFade(Self.Fill, -20%)
      FocusedBorderThickness: =2
      Height: =60
      HoverBorderColor: =Self.HoverFill
      HoverColor: =Color.White
      HoverFill: =ColorFade(Self.Fill, -10%)
      PaddingBottom: =0
      PaddingLeft: =0
      PaddingRight: =0
      PaddingTop: =0
      PressedBorderColor: =ColorFade(Self.Fill, -30%)
      PressedColor: =Self.Color
      PressedFill: =ColorFade(Self.Fill, -20%)
      RadiusBottomLeft: =Self.Height / 2
      RadiusBottomRight: =Self.RadiusBottomLeft
      RadiusTopLeft: =Self.RadiusBottomLeft
      RadiusTopRight: =Self.RadiusBottomLeft
      Size: =16
      Width: =240
      X: =40
      Y: =40

コピーができたら、編集画面のスクリーン上で 右クリック > 貼り付け > コードを貼り付ける(プレビュー)を選択します。

すると、ポップアップ表示ボタンが画面に表示されました。

ポップアップの実装

ポップアップ表示ボタンが実装できたため、次はポップアップ本体を実装していきます。

こちらも同様に、下のYAMLコードをコピーします。（1行目右端のコピーボタンをご利用ください）

- ctnPopup:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      Height: =Parent.Height
      Visible: |
        =// 「ポップアップ表示」ボタンを押すとtrue、「OK」または「キャンセル」ボタンを押すとfalseが設定される
        locPopupVisible
      Width: =Parent.Width
    Children:
    - shpPopupBackground:
        Control: Rectangle
        Properties:
          Fill: =RGBA(30, 30, 30, 0.5)
          Height: =Parent.Height
          Width: =Parent.Width
    - ctnPopupCard:
        Control: GroupContainer
        Variant: manualLayoutContainer
        Properties:
          DropShadow: =DropShadow.Regular
          Fill: =Color.White
          Height: =576
          RadiusBottomLeft: =20
          RadiusBottomRight: =20
          RadiusTopLeft: =20
          RadiusTopRight: =20
          Width: =455
          X: =456
          Y: =96
        Children:
        - lblPopupTitle:
            Control: Label
            Properties:
              Text: ="ポップアップタイトル"
              Align: =Align.Center
              FontWeight: =FontWeight.Bold
              Height: =54
              Size: =20
              Width: =397
              X: =29
              Y: =133
        - lblPopupDetails:
            Control: Label
            Properties:
              Text: |-
                ="ここにポップアップの説明が入ります。
                説明の長さによってポップアップの高さや幅を調整して利用してください。"
              Align: =Align.Center
              FontWeight: =FontWeight.Semibold
              Height: =179
              LineHeight: =1.4
              Size: =16
              Width: =397
              X: =29
              Y: =187
        - btnOK:
            Control: Classic/Button
            Properties:
              OnSelect: |-
                =// この下にOKボタンを押した時の処理が入ります

                // ポップアップを非表示にする処理
                UpdateContext({locPopupVisible: false})
                // © 2025 Power 365 Medium, Hiromaru
              Text: ="OK"
              BorderColor: =Self.Fill
              BorderThickness: =0
              Color: =Color.White
              Fill: =ColorValue("#1976D2")
              FocusedBorderColor: =ColorFade(Self.Fill, -20%)
              FocusedBorderThickness: =2
              Height: =60
              HoverBorderColor: =Self.HoverFill
              HoverColor: =Self.Color
              HoverFill: =ColorFade(Self.Fill, -10%)
              PaddingBottom: =0
              PaddingLeft: =0
              PaddingRight: =0
              PaddingTop: =0
              PressedBorderColor: =ColorFade(Self.Fill, -30%)
              PressedColor: =Self.Color
              PressedFill: =ColorFade(Self.Fill, -20%)
              RadiusBottomLeft: =Self.Height / 2
              RadiusBottomRight: =Self.RadiusBottomLeft
              RadiusTopLeft: =Self.RadiusBottomLeft
              RadiusTopRight: =Self.RadiusBottomLeft
              Size: =16
              Width: =240
              X: =107
              Y: =387
        - btnCancel:
            Control: Classic/Button
            Properties:
              OnSelect: |-
                =// この下にキャンセルボタンを押した時の処理が入ります

                // ポップアップを非表示にする処理
                UpdateContext({locPopupVisible: false})
              Text: ="キャンセル"
              BorderColor: =ColorValue("#EF5350")
              Color: =Self.BorderColor
              Fill: =Color.White
              FocusedBorderColor: =Self.Color
              FocusedBorderThickness: =3
              Height: =60
              HoverBorderColor: =Self.BorderColor
              HoverColor: =Self.Color
              HoverFill: =ColorFade(Self.Fill, -5%)
              PaddingBottom: =0
              PaddingLeft: =0
              PaddingRight: =0
              PaddingTop: =0
              PressedBorderColor: =ColorFade(Self.Color, -10%)
              PressedColor: =Self.Color
              PressedFill: =ColorFade(Self.Fill, -10%)
              RadiusBottomLeft: =Self.Height / 2
              RadiusBottomRight: =Self.RadiusBottomLeft
              RadiusTopLeft: =Self.RadiusBottomLeft
              RadiusTopRight: =Self.RadiusBottomLeft
              Size: =16
              Width: =240
              X: =108
              Y: =470
        - icoInfo:
            Control: Classic/Icon
            Variant: Information
            Properties:
              Color: =ColorValue("#1976D2")
              Icon: =Icon.Information
              X: =196
              Y: =48

コピーができたら、編集画面のスクリーン上で 右クリック > 貼り付け > コードを貼り付ける(プレビュー)を選択します。