Select Page

Life is all about priorities and even so in the life of Microsoft. I am sure they have a ‘do-or-delay’ discussion in every meeting where they review releases for their awesome new platform, PowerApps. At the time of writing this blog, it seems like messagebox, dialogbox, error and warning prompts have not quite made it to the top of the priority list yet, and these cannot yet be achieved through native PowerApps functionality. This means that you either have to have a warning or confirmation prompt next to every field or action button which can become quite messy quickly, or you can make use of a single popup per screen to handle messages to the user.

The goal is to create a messagebox that can be used for multiple messages, prompts or warnings. This function has to be easily reusable without having to jump into the guts of it every time you want to make a change to logic, rules or actions.

Below is an example of what we are going to build during this article.

powerapps-messagebox

Step 1. Create a button

First we need to simulate an environment and there is no place better to start than with a button. This button will trigger changing the local variable that will be used to change the color of a shape. We will change the Text for the button to “Turn On\Off”, and use the OnSelect function to update the var_shapestatus variable to true or false. Note that the exclamation before the variable value will just switch the current value. If the current value is false (or blank), it will change it to true, and vica versa.
Turn On\Off Button: OnSelect=Set( var_shapestatus , !var_shapestatus )
Turn On\Off Button: Text=”Turn On\Off”

 

Step 2. Create a shape

Now let’s create the shape that has to respond to the value of var_shapestatus. The idea is that we want to manipulate the fill color for this shape with a button. Create a circle icon and you will see that it turn grey immediately if you have not pressed the button yet. (Or maybe you have, we just can’t be sure)
Shape: Fill=If( var_shapestatus , Yellow , DimGrey )

 

Step 3. Preview

Click on F5 to preview the app (or click on the play button at the top of the screen) to simulate the app during runtime. Now click on the button which should make the shape turn yellow. This is strangely satisfying and I am yet to meet a person who can click this button only once.

 

Step 4. Build business rule

Now imagine you want to evaluate a condition before allowing someone to change the color of the shape. Let’s say that we would like to add a checkbox that would represent maintenance mode for the shape, that prevents the shape form being turned on at this time. We can easily add a checkbox control, rename it to shape_maintenance, and use some descriptive words in the text.

 

Step 5. Update button

We now need to update the button to first check the radio control before updating the variable. If the shape_maintenance.Value is equal to true, nothing will be executed.
Turn On\Off Button: OnSelect=If( shape_maintenance.Value , “” , Set( var_shapestatus, !var_shapestatus ))

 

The Problem: You can now hit F5 and test the button with the checkbox control selected and unselected. This works well, but here is the kicker and the reason for this article. We have to tell the poor person hitting the button why it is not working. What we did not want to do, is to have a label next to every value and control informing users of what is going on. This might be an option for basic applications, but in some instances where you are dealing with a large number of fields, complex workflow, and business logic, this might soon start to look like a chemical waste accident.  You also might need a way for the user to acknowledge the message, before he or she tries the action again which will require hidden buttons and logic created for every action, field or action that you want to validate.

The following solution has served us well on projects and hope that it will do the same for you!

Step 6. Write messages to collection

First, let’s update the button to not fail silently, but to create an error message that the user can see. We prefer to populate a collection with the detail that should be used for the messagebox. It is better to use Collect than ClearCollect as you might be doing multiple checks on the button click, and present the user with one Messagebox displaying all the messages.
Turn On\Off Button: OnSelect=If( shape_maintenance.Value , Collect(RunTimeMessages,{Type:”Warning”,Message:”The shape cannot be turned on because it is currently in maintenance mode”,source:”ActionButton”}) , Set( var_shapestatus, !var_shapestatus ))

 

Step 7. View collection

To test that the above change has the desired effect (and to populate the collection with some data which will make your life much easier during the Gallery construction steps), hit F5 to preview the app, select the maintenance checkbox and click the Turn On\Off Button. Nothing should happen and the shape should not change fill color. In the background, something did happen though, and the RunTimeMessages collection was populated with one entry for each time you hit the Turn on\Off button. (We will disable the button at a later step if it finds an entry in the RunTimeMessages Collection which has a source as itself.) To view the entry in the collection, go to View\Collections which will show all the collections defined by the App. The RunTimeMssages Collection can be seen with all the columns of data that we passed to it.

 

 

Step 8. Add gallery

In order to display the information in the collection, we can add a gallery that will be used as the messagebox. Add a blank flexible height gallery and size and position it to where you would like the popup to be. It is not critical to rename it as nothing will be calling it, but it is a good practice to give it a descriptive name like PopupGallery.
PopupGallery: Items=RunTimeMessages
PopupGallery: Fill=RGBA(248, 248, 248, 1)

 

 

Step 9. Edit gallery

Make sure that you click on edit gallery before adding content, otherwise, the content will not be added to the gallery and cause some rapid hair loss. You can click on the top section of the Gallery, or on the pencil icon if you are not too sure where to click.

 

Step 10. Add text to gallery

Add a text label and set the following to display the messages from the RunTimeMessages collection. Seeing that have data in our collection already, we will see an entry in the popup immediately.
Text Label: Text=ThisItem.Message
Text Label: AutoHeight=true

 

Step 11. Clear gallery

Now we need to create a way for the user to clear the entire message box. There are various icons or methods that can be used for this, but let’s start with the normal X icon. Create an X icon to the top right of the gallery. Make sure that the gallery is no longer editable, otherwise the X will be placed on every item in the gallery which is not what we want right now. To make sure that the Gallery is not in edit mode at the time of adding the X icon, click on another control or in the while space of the canvas before adding the X icon. You can now drag the X icon to the top of the Gallery.
Icon X: OnSelect=Clear(RunTimeMessages)

 

Step 12. Preview gallery

To test the Gallery, hit the F5 key to enter preview mode. Select the maintenance checkbox in the app, and attempt to click on the Turn On\Off button. The message should now show up in the messagebox, and you can clear it by clicking on the X icon. If you unselect the maintenance mode checkbox control, the button should change the fill of the shape again. We will change the visible property of the Popup Gallery later on, to completely hide the gallery if the RunTimeMessages collection is empty.

Step 13. Add icons and buttons to gallery items

From the test on previous step, make sure that there is a message currently displayed in the Popup so that it is easier to see where the text label is positioned. Also make sure that the Gallery is in edit mode before adding the following items.
Warning icon: Visible=ThisItem.Type=”Warning”

 

Information Icon on top of Warning Icon: Visible=ThisItem.Type=”Information” (As soon as you enter the visible formula, the icon will disappear as the current item is not of this type.)

 

Yes Button for confirmation prompts:
Text=”Yes”
OnSelect=<We will populate this during a later step>
Visible=ThisItem.Type=”Input_YesNo” (As soon as you enter the visible formula, the icon will disappear as the current item is not of this type.)

 

No Button for confirmation prompts:
Text=”No”
OnSelect=Remove(RunTimeMessages,ThisItem)
Visible=ThisItem.Type=”Input_YesNo” (As soon as you enter the visible formula, the icon will disappear as the current item is not of this type.)

 

Step 14. Hide gallery

We can now hide the Gallery and the X that clears the RunTimeMessages of there are no messages available.
PopupGallery: Visible=!IsEmpty(RunTimeMessages
X Icon: Visible=!IsEmpty(RunTimeMessages

Step 15. Disable button while messagebox is active

We can now disable the Turn On\Off button if there is a message that was generated by the button currently being displayed in the popup. This prevents the user from repeatedly clicking on the same button causing the same message in the Popup.
Turn On\Off Button: DisplayMode=If(IsEmpty(Filter(RunTimeMessages,source=”ActionButton”)),DisplayMode.Edit,DisplayMode.View)

 

Step 16. Create user confirmation

If we wanted the user to confirm that the action from the button should be executed, the same messagebox can be used. As an example, let’s say that to turn the shape yellow uses an insane amount of electricity and we would like to confirm that the user did not hit the Turn On\Off button by accident. First we would need to change the following on the Turn On\Off button. By replacing the Set( var_shapestatus, !var_shapestatus ) action, we will now pass a message to the Popup which will require the user to click on yes or no before executing the action.
Turn On\Off Button: OnSelect=If( shape_maintenance.Value , Collect(RunTimeMessages,{Type:”Warning”,Message:”The shape can not be turned on because it is currently in maintenance mode.”,source:”ActionButton”}) , Collect(RunTimeMessages,{Type:”Input_YesNo”,Message:”Are you sure you would like to change the fill of the shape. This might have some significant electricity and cost impact.”,source:”ActionButton”}))

 

Step 17. Create action on gallery confirmation

We have removed the Set( var_shapestatus, !var_shapestatus ) action from the Turn On\Off Button during the previous step and requested confirmation for this action from the messagebox. We can now use a switch statement on the Yes button in the messagebox to determine which control the confirmation request came from, and which action to perform accordingly.
YesButton: OnSelect=Switch(ThisItem.source,”ActionButton”,Set( var_shapestatus, !var_shapestatus ));Remove(RunTimeMessages,ThisItem)

 

Step 18. Disable screen while messagebox is active

During Step 15 we disabled the Turn On\Off button if a message that it generated is currently displayed in the messagebox. Depending on the application, we can also choose the grey out the entire screen to prevent the user from clicking on anything until the popup is acknowledged or cleared. This can be done by adding a rectangle icon that covers the entire screen. The fill property should be changed to a color of choice but if you want to give the rectangle a level of transparency, you have to use the RGBA function to define the color as the last property of this function allows you to set this. In the below example I have renamed the rectangle to ScreenCover which is not really important as nothing will be referencing it, but it will make it easier to find if you have lots of elements and icons on the screen.
ScreenCover Icon: Fill=RGBA(101,101,101,70%)
ScreenCover Icon: Visible=!IsEmpty(RunTimeMessages)

 

Step 19. Move gallery to front

You will notice in Step 18 that the ScreenCover icon is on top of the screen explorer list. This gives you a clue that it is on top, and that you will not be able to click on the popup actions while the Screen Cover is displayed. To resolve this, we need to bring the Gallery to the Front of the page by click on the Reorder option under the Home tab. You will also need to do this for the X icon that we are using to clear the Gallery because according to PowerApps, the X Icon is not really part of the Gallery. You can group the X Icon and the Gallery together though, but that is another coffee for another day.

 

Below is what you should now see, a fully actionable message or popup box.

messagebox-powerapps

 

Various options exist for personalizing the message box, but the above should give you a good foundation to work from.

 

Other considerations:
  1. Instead of using an icon with an X to clear the messages, you can also add an ok button on the gallery item to clear the current message.
  2. If many actions exist on the “Yes” confirmation prompt, or you would like to re-use the actions from other controls, a timer control can be called from the “Yes” confirmation with a countdown, that contains the switch statement with actions in “OnTimerEnd”
  3. Other than basic formatting options you can also consider using rules to store logic, and not hard code rules into actions. Please see the article on how rules can be used for this. https://dvh.ukuvuma.co.za/2017/10/31/powerapps-storing-business-logic-in-rules/