Skip to content

Commit ddad9e7

Browse files
author
Thomas van der Waard
committed
2 parents bd42a3d + 89440da commit ddad9e7

1 file changed

Lines changed: 101 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# Native Dialog Control
2+
3+
## Description
4+
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:
5+
- Alert
6+
- Confirmation
7+
- Error
8+
9+
## Installation
10+
11+
1. Navigate to the Releases section of this repository and download the managed solution.
12+
2. Import the downloaded managed solution into your Power Apps environment.
13+
3. Ensure that the 'code components' feature is enabled in your environment settings.
14+
15+
## Usage
16+
17+
Once installed, you can utilize the control in your Model-driven app custom pages to invoke native dialog functionalities.
18+
19+
### Setup
20+
21+
1. **Adding the Control to a Screen**: Include the control on the desired screen. Note that the control itself doesn't possess any UI elements.
22+
2. **Selecting the Dialog Type**: Choose among the available types: Alert Dialog, Confirm Dialog, or Error Dialog.
23+
3. **Setting Key Properties**: Each dialog type requires certain properties to be set:
24+
25+
**Alert Dialog**:
26+
- `Text`: The main text displayed on the dialog.
27+
- `ConfirmButtonLabel`: Label text of the dialog's single button.
28+
29+
**Confirm Dialog**:
30+
- `Title`: The main title of the dialog.
31+
- `Subtitle`: The subtitle of the dialog.
32+
- `Text`: The main text displayed on the dialog.
33+
- `ConfirmButtonLabel`: The button text for the confirmation button.
34+
- `CancelButtonLabel`: The button text for the cancel button.
35+
36+
**Error Dialog**:
37+
- `Text`: The main text displayed on the dialog.
38+
39+
**General Properties for All Dialogs**:
40+
- `Height`: The dialog height in pixels.
41+
- `Width`: The dialog width in pixels.
42+
- `Visible`: Used to control the visibility of the native dialog.
43+
44+
### Behavior Configuration
45+
46+
**Configuring Dialog Visibility**:
47+
To toggle the visibility of the dialog control, use a Boolean (true/false) type variable. For instance:
48+
49+
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):
50+
```Power Apps
51+
UpdateContext({ showHideDialog: true })
52+
```
53+
54+
To **close** the dialog, set the OnChange property of the dialog to:
55+
```Power Apps
56+
UpdateContext({ showHideDialog: false })
57+
```
58+
59+
Assign the variable to the `Visible` property of the dialog:
60+
```Power Apps
61+
showHideDialog
62+
```
63+
64+
**Configuring Button Actions**
65+
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:
66+
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`.
67+
```Power Apps
68+
If( Self.eventValue = "close",
69+
Notify("Email Sent")
70+
);
71+
UpdateContext({ showHideDialog: false })
72+
```
73+
This ensures the dialog closes after the desired action is executed.
74+
75+
## Contribution
76+
77+
We welcome contributions from the community. If you'd like to contribute:
78+
1. Fork this repository.
79+
2. Create your feature branch: `git checkout -b feature/your-feature-name`
80+
3. Commit your changes: `git commit -m 'Add some feature'`
81+
4. Push to the branch: `git push origin feature/your-feature-name`
82+
5. Create a new Pull Request against this repository.
83+
84+
Please ensure that your code adheres to the established standards and that all tests pass before submitting a Pull Request.
85+
86+
## License
87+
A license for thos project will be added soon.
88+
//This project is licensed under the [Your License Here] - see the LICENSE.md file for details. *(Please specify your license)*
89+
90+
## Screenshots
91+
92+
Screenshots showcasing the functionality and UI of the control will be added soon. Stay tuned!
93+
94+
## Authors
95+
96+
- **PowerThomas** - *Initial work* - [GitHub Profile]([(https://github.com/PowerThomas])
97+
98+
## Acknowledgements
99+
100+
Special thanks to:
101+
- My colleague Jeroen van Knotsenburg for his invaluable assistance and guidance in creating my first PCF project.

0 commit comments

Comments
 (0)