How to create a confirm message box component in Canvas PowerApps

Some times we need to send a confirmation message to the user after certain action taken.

We’ll build a component to be able to reuse it in the entire application, if the appilcation contain many screens and similar events using a component will help us in the app maintenance.

We’ll build a simple Confirmation message box component
Follow these steps:
– Go to https://make.powerapps.com/
– Create a new Canvas App
– Add new Data(I’ll use SQL SERVER table)
– Add a Gallery control (Costomize it as you like)
– Link your Data to the gallery’s Items property
Here and example:

Heroes Screen

We won’t cover Gallery’s properties on this post, But I’m setting the items property as Filter(Heroes,status=1)because I don’t want to delete the Hero, we’ll just update the status in SQL.
Now, it’ll be easy to slip a click on Trash icon and no longer see it, isn’t it?.

Now Hands on Create the Component

First we need to ensure in Settings that the following features are turned on:
– Components

– Enhanced component properties

Now add a new component and rename it as you wish, I’ll set it as ConfirmComponent

Add some 3 properties to your component

Configure them as:
– name: QuestionText
Property Type: Input
Data Type: Text
– name : OnSelectedYes
Property Type: Behavior
Return data Type: Text
– name: OnSelectedCancel
Property Type: Behavior
Return data Type: Text

Let’s create a simple Component Layout, Add 1 Label and 2 Buttons, here how I did it. You can design it as complex you like.

Now add the following function to the controls added:
Label control – set property Text with this Function:
Coalesce(ConfirmComponent.QuestionText,"Are you sure?")

Button Yes – set property OnSelect with this Function:
ConfirmComponent.OnSelectedYes()

Button No – set property OnSelect with this Function:
ConfirmComponent.OnSelectedCancel()

We are done! now Let’s add it to our Screen.

Using the component

Add your component Insert>Custom>ConfirmComponent

Before editing the component properties add this code function to the Trash Icon in the OnSelect property

UpdateContext({locShowConfirmComponent:false});
UpdateContext({locShowConfirmComponent:true})

Now notice that my component is named ConfirmComponent_2, place in the center or where you want it to be displayed, now set the following properties of the component:
– OnSelectedYes: (here place any logic you need to perform, in my case the logic to update record for changing the status to 0, logic delete) …and once you place all your code finally copy this
UpdateContext({locShowConfirmComponent:false});
e.g.:

Patch(
Heroes,
galHeroes.Selected,
{status: 0}
);
UpdateContext({locShowConfirmComponent:false});

– OnSelectedCancel: UpdateContext({locShowConfirmComponent:false});
– Visible: locShowConfirmComponent
– QuestionText: by default it shows «Are you sure?». Set something meaningful.
Concatenate("Do you want to delete ",galHeroes.Selected.name,"?")

Well done 🤗, now lets try it…

Video