2018-12-26

For the second day of my Christmas series, we are going to build a simple dialog box. When designing an interface you occasionally want to explain the consequences of proceeding to the user and ask for confirmation using a dialog box. For example, this will delete all records relating to this user, do you want to continue?. You want the user to have the chance to press Cancel. Power Apps does come with a default message box or input dialog to perform this. So in this post, I will walk through designing a dialog box.

Pre-Requisites

I have started using the enhanced groups in Power Apps, which makes layout and interaction easier that was covered in my first post for Christmas.

Building the Dialog Box

The dialog box is made using two nested groups a label and two buttons. The complete group is only visible when the variable vvShowDialog is true.

  1. From the Insert ribbon, select Controls and select Group. If it isn’t there, go look at my enhanced groups post on turning on the feature.
    Change the properties of the group to the following

    Name Dialog
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height
    Fill RGBA(100,100,100,0.5)

    This group is the background to make the dialog the only thing that can be selected, this is known as modal.

  2. With the group Dialog selected insert another group. This will be the dialog box that will contain the message and the buttons. We will line the dialog box up to be in the centre of the screen.
    Change the properties of the group to the following

    Name DialogBox
    X (Parent.Width-DialogBox.Width)/2
    Y (Parent.Height-DialogBox.Height)/2
    Width 500 or whatever works for your app
    Height 300 or whatever works for your app
    Fill White
  3. With DialogBox group selected add a label and 2 buttons, rename and lay them out in the DialogBox group. Make one button the OK button and the Cancel button.Dialogs
  4. Change the OnSelect property of the Cancel button to change the vvShowDIalog variable to false using
    Set(vvShowDialog,false)
  5. Select the Dialog group and change the visible property to the following
    vvShowDialog

    The group will now not be visible.

Mechanics of using the Dialog Box

The dialog needs to show when an action is triggered. The easiest trigger to understand is a button being clicked so we will use that as our example in this post.

  1. Change the OnSelect of the button to the following
    // Dialog Message
    Set(
        vvDialogMsg,
        "This will create a new project." & Char(10) & Char(10) & "Do you want to continue?"
    );
    // Show Dialog
    Set(
        vvShowDialog,
        true
    )

    This will save the message text and show the dialog box.

  2. Change label in the DialogBox group to show the message by changing the Text to vvDialogMsg.
  3. Change the OK button’s OnSelect property to do the update required and the final line to change hide the dialog. Here is an example of some possible code.
    // Add Project
    Collect(
        ccProjects,
        {ProjectName: PrjNameTxt.Text}
    );
    // Reset input field
    Reset(PrjNameTxt);
    // Hide dialog box
    Set(vvShowDialog,false)

    You should now have a functioning dialog box.

    Finished dialog

Conclusion

This example just displays a message. This idea could be expanded to show a dialog with input fields to get values from a user. The dialog group needs to be at the front.

 

(Visited 417 times, 1 visits today)

About the author 

Laura Graham-Brown

SharePoint Trainer, Consultant and Agony Aunt

Leave a Reply

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

2 Free Ebooks: How to govern Microsoft teams 

Download your 2 free Microsoft Teams governance Ebooks and learn the steps necessary to create a bullet-proof governance strategy.