Hi there! we are going to see how to create a pop-up screen with PowerApps draggable function without PCF control. As you can see below, I have a pop-up screen. I’m holding it and dragging it upward and downward.
Table of Contents
We will see how to build it. Stay tuned!
We have a table full of data. I can select data from the table and display it on the pop screen. I also have an edit button, which I’ll use to edit a particular line item in the pop-up screen.
Edit Button OnSelect - UpdateContext({lclSelectedItem: Table1.Selected, lclShowPopup:true}); 
So first, we need to create a pop-up screen. I’ll create the pop-up screen by inserting a container, and inside the container, I’ll place all my controls.
Creation of Pop-up Window:
Set the container property as below.
X = 0,
Y = 0,
Width - Parent.Width,
Height - Parent.Height,
background Color - RGBA(214, 214, 214, 0.3)
Visible - lclShowPopup
- I have a faded color here on the Container background. Inside this container, Now insert a rectangle. This is for the background of other controls. Set the rectangle property as below.
Name - rec_BG1
Width - 800
Height – 400
X – (Parent.Width - Self.Width)/2 - This needs to be set in the middle of the screen.
Y – (Parent.Height - Self.Height)/2
- We are going to insert another rectangle. We can just copy and paste the existing one, and then rename it as ” rec_BG2″. We’ll also change the Color to white.
X - rec_BG1.X
Y - rec_BG1.Y+50
Width - rec_BG1.Width
Height - rec_BG1.Height – 50
Color - RGBA(255, 255, 255, 1)
- We are going to edit the selected item, so we need a form here. insert a form, and it should be inside the container. Set the form’s DataSource property as same as my table.
Creation of Edit Form:
Set Form Property as below.
X - rec_BG2.X
Y - rec_BG2.Y
Width - rec_BG2.Width
Height - rec_BG2.Height - 50
- Inside the container, insert a button and rename it to btnSubmit. Place this button below the form.
Adding Buttons
Set the button Property as below.
Name - btnSubmit
X - rec_BG2.X+rec_BG2.Width - Self.Width - 10
Y - rec_BG2.Y+rec_BG2.Height - Self.Height – 10
Text - Submit
OnSelect - SubmitForm(Form2)
On the left-hand side, We need another button for cancelling the Pop-up. Just copy and paste the same button, then rename it to Cancel.
Set the copied button property as below.
Text – Cancel
Name - btnCancel
X - btnSubmit.X - Self.Width - 10
OnSelect - UpdateContext({lclShowPopup:false})
On the OnSelect event of the Edit button, we need to initialize a few more variables. Add the following code to the Edit button:
UpdateContext(
{
rec_X: (Parent.Width - rec_BG1.Width) / 2,
rec_Y: (Parent.Height - rec_BG1.Height) / 2,
lclLayout: Layout.Horizontal
}
);
- For the Rectangle background 1 we need to change the X and Y property to the variables.
- Now we are going to insert a slider Control. We need to place it exactly between the two rectangles and name it Slider_BG.
Set the Slider Property as below.
X – 0,
Y – 0,
Width - Parent.Width
Height - Parent.Height
Default - If(lclLayout = Layout.Horizontal,rec_X,Parent.Height - rec_Y)
Layout – lclLayout
Max - If(lclLayout = Layout.Horizontal,Parent.Width,Parent.Height)
Min – 0
ShowValue – False
RailFill - RGBA(0, 0, 0, 0)
RailThickness - 10000 (Important)
All the colors to Transparent - RGBA(0, 0, 0, 0)
- Now, we will insert a Timer Control. Set timer properties as below.
Duration – 0
Repeat – true
AutoStart - true
AutoPause – true
OnTimerEnd - Switch(
lclLayout,
Layout.Horizontal,
UpdateContext({rec_X: Slider_BG.Value}),
Layout.Vertical,
UpdateContext({rec_Y: Parent.Height - Slider_BG.Value})
);
If(
lclLayout = Layout.Horizontal,
UpdateContext({lclLayout: Layout.Vertical}),
UpdateContext({lclLayout: Layout.Horizontal})
);
Now Play the app and see if you can see PowerApps draggable the Pop-up screen. Thanks for spending time. Feel free to provide your comments.
