Native Dialog Control is a Power Apps PCF control designed specifically for Custom Pages in Model-driven apps. By leveraging the Navigation API, it enables the use of native model-driven dialogs to enhance user interaction. Currently, the following dialog types are supported:
- Alert
- Confirmation
- Error
- Navigate to the Releases section of this repository and download the managed solution.
- Import the downloaded managed solution into your Power Apps environment.
- Ensure that the 'code components' feature is enabled in your environment settings.
Once installed, you can utilize the control in your Model-driven app custom pages to invoke native dialog functionalities.
-
Adding the Control to a Screen: Include the control on the desired screen. Note that the control itself doesn't possess any UI elements.
-
Selecting the
Dialog Type
: Choose among the available types: Alert Dialog, Confirm Dialog, or Error Dialog. -
Setting Key Properties: Each dialog type requires certain properties to be set:
Alert Dialog:
Text
: The main text displayed on the dialog.Confirm Button Label
: Label text of the dialog's single button.
Confirm Dialog:
Title
: The main title of the dialog.Subtitle
: The subtitle of the dialog.Text
: The main text displayed on the dialog.Confirm Button Label
: The button text for the confirmation button.Cancel Button Label
: The button text for the cancel button.
Error Dialog:
Text
: The main text displayed on the dialog.
General Properties for All Dialogs:
Dialog Height
: The dialog height in pixels.Dialog Width
: The dialog width in pixels.Visible
: Used to control the visibility of the native dialog.
Configuring Dialog Visibility: To toggle the visibility of the dialog control, use a Boolean (true/false) type variable. For instance:
To open the dialog, use the following Power Fx formula in an action formula elsewhere in your app (like the OnSelect
property of a button):
UpdateContext({ showHideDialog: true })
To close the dialog, set the OnChange property of the dialog to:
UpdateContext({ showHideDialog: false })
Assign the variable to the Visible
property of the dialog:
showHideDialog
Configuring Button Actions
For dialog button actions, use the OnChange
property of the dialog. By leveraging the If()
or Switch()
functions, you can define actions based on the Self.eventValue
text value. Depending on the action, you might also want to close the dialog post completion. For instance:
The eventValue
can either be close
or confirm
. The value confirm
is returned when the confirm button is selected in the confirm dialog. For all other cases, the value is close
.
If( Self.eventValue = "close",
Notify("Email Sent")
);
UpdateContext({ showHideDialog: false })
This ensures the dialog closes after the desired action is executed.
We welcome contributions from the community. If you'd like to contribute:
- Fork this repository.
- Create your feature branch:
git checkout -b feature/your-feature-name
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin feature/your-feature-name
- Create a new Pull Request against this repository.
Please ensure that your code adheres to the established standards and that all tests pass before submitting a Pull Request.
This project is licensed under the MIT License - see the LICENSE.md file for details.
For a visual demonstration of how the Native Dialog Control works in action, check out the GIF below:
- PowerThomas - Initial work - GitHub Profile
Special thanks to:
- My colleague Jeroen van Knotsenburg for his invaluable assistance and guidance in creating my first PCF project.