Power Apps – How to create a responsive popup message box

Introduction:

We will learn how to create a popup box when a button is clicked. Additionally, we will make this responsive (size automatically adjusts on different devices).

Step 1:

Insert a horizontal container named Container1. Change the following properties:

X property

0

Y property

0

Height property

Parent.Height

Width property

Parent.Width

LayoutJustifyContent property

LayoutJustifyContent.Center

LayoutAlignItems property

LayoutAlignItems.Center

Fill property

RGBA(214, 221, 224, 0.5)

Step 2:

Insert a vertical container inside Container1 and name it Container2. Change the following properties:

FillPortions property

0

AlignInContainer property

AlignInContainer.SetByContainer

Height property

325

Width property

If(Screen1.Size= ScreenSize.Small,300, 500)

DropShadow property

DropShadow.Regular

Fill property

RGBA(255, 255, 255, 1)

Step 3:

Insert a horizontal container inside Container2 and name it Container3. Change the following properties:

FillPortions property

0

Height property

50

PaddingLeft property

20

PaddingRight property

20

DropShadow property

DropShadow.None

Step 4:

Insert a horizontal container inside Container2 and name it Container4. Change the following properties:

FillPortions property

0

Height property

200

LayoutGap property

25

LayoutOverflowY property

LayoutOverflow.Scroll

DropShadow property

DropShadow.None

PaddingTop property

20

PaddingLeft property

20

PaddingRight property

20

Step 5:

Insert a horizontal container inside Container2 and name it Container5. Change the following properties:

FillPortions property

0

Height property

75

LayoutJustifyContent property

LayoutJustifyContent.End

LayoutGap property

15

DropShadow property

DropShadow.Light

PaddingTop property

20

PaddingRight property

25

Review:

Your tree view should look like the one in the image provided.

Step 6:

Insert a label inside Container3 and name it Label1. Change the following properties:

Text property

"Popup Title"

Height property

Parent.Height

Width property

If(Screen1.Size = ScreenSize.Small,235,435)

Step 7:

Insert an icon (cancel icon) inside Container3 and name it Icon1. Change the following properties:

Icon property

Icon.Cancel

Height property

Parent.Height

Width property

25

OnSelect property

UpdateContext({varShowPopup:false});

Step 8:

Insert an icon (information) inside Container4 and name it Icon2. Change the following properties:

Icon property

Icon.Information

Height property

40

Height property

40

DisplayMode property

DisplayMode.View

Step 9:

Insert a label inside Container4 and name it Label2. Change the following properties:

Text property

"Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Cras in urna faucibus, euismod 
massa vel, suscipit tellus. Curabitur a faucibus 
purus. Integer neque dolor."

Width property

If(Screen1.Size = ScreenSize.Small,200,400)

AutoHeight property

true

Step 10:

Insert a button (modern) inside Container5 and name it Button1. Change the following properties:

Text property

"Cancel"

OnSelect property

UpdateContext({varShowPopup:false});

Appearance property

'ButtonCanvas.Appearance'.Secondary

Step 11:

Insert a button (modern) inside Container5 and name it Button2. Change the following properties:

Text property

"Ok"

OnSelect property

UpdateContext({varShowPopup:false});

Appearance property

'ButtonCanvas.Appearance'.Primary

Step 12:

From the Tree View, select Container1. Change the following properties:

Visible property

varShowPopup

All of the control in the canvas should now be invisible for now.

Step 13:

On the canvas, insert a button (modern) named Button3. Change the following properties:

Text property

"Show Popup"

OnSelect property

UpdateContext({varShowPopup:true});

Step 14:

Send Button3 to the very back by doing the following:

1. Click the ellipsis of Button3 in Tree View
2. Click ‘Reorder’
3. Click ‘Send to back’