Displaying modal dialog box on click of button after validating data entered by user under form fields
In my application there is a requirement to display a modal dialog box containing an alert message with Ok and Cancel button. This modal dialog box is to be displayed on click of a button in form which has some form fields like text fields, dropdowns, checkboxes etc.
On click of button the value under two dropdown fields (under form) need to be validated and if the validation fails then only modal dialog box is to be displayed. If modal dialog box is displayed, then on click of Ok the form needs to be submitted to server for further processing but if user clicks cancel then nothing should happen and modal dialog box should close.
I'm new to Pega, pardon me if I'm not using Pega jargons for controls or fields.
I was reading the documentation and found that Pega supports AJAX. AJAX can be used for user interface events such as Visible When. I further found that user interface events can be used to automatically trigger actions like launching a model dialog.
Please suggest if I'm looking in the right direction or else how this requirement can be achieved.
Follow the below steps fro creating Modal Dialog window approach in Pega. In fact, we did follow the same in our app. We have the similar kind of requirement to launch the popup with Ok, Cancel. No customization is needed. Fully OOTB code used for this approach.
1) Create a layout with a button in a new section or existing section from your app.
2) From "pxButton" control for the above, add "Local Action" in the click event by using Config control.
3) Create a flow action or use existing flow action with "Open in Modal Dialog" checkbox checked.
4) Have 2 buttons (Ok, Cancel) in any of the sections from the above mentioned flow action.
5) Use "pzModalButton" for Ok button with Config -> Caption:Ok, Id:ModalButtonSubmit, Action:Submit
6) Use "pzModalButton" for Cancel button with Config -> Caption:Cancel, Id:ModalButtonCancel, Action:Cancel
In my requirement, I have to display the modal dialog box on click of a button only if the validation (which validates the value in two dropdown to check for right combination) fails. If the validation succeeds then I don't need to show modal dialog box and need to submit form.
For showing modal with OK and Cancel you can just use confirm("Please, click something");
If there's more "Pega Way" way to do this, I would like to know about it too.
Can below approach also work. Please share your thoughts
A hidden field (pxHidden) will be kept on harness. This hidden field is to be used to decide whether we need to display modal dialog box on click of button.
A change event will be registered for second dropdown. This event will have an action which will be mapped to a rule or activity to set the value of hidden property as true or false based on business logic. The logic will decide whether we need to present an alert message to the user.
Create a dynamic layout whose visibility is mapped to another Boolean property which is having default value as false. For this dynamic layout define a load event with action as Local Action. The Local Action is to open a modal dialog box with Ok and Cancel button. Since the default value of Boolean property mapped to visibility of this dynamic layout is false, it won’t be displayed until the Boolean property is set to true.
Below events and actions are to be defined on the button in the below order
open rule or run activity and perform below logic:
Check value of hidden field (pxHidden).
If it is true, then set value of Boolean property to true which is mapped to dynamic layout.
post value - to be defined/configured only if previous action is not able to trigger change event for dynamic layout. Based on outcome of this it can be decided if Refresh When rule needs to be defined for dynamic layout.
open rule or run activity or perform action to complete form only if hidden field value is false.
This is to ensure that when the hidden field is true the button will not proceed further for submitting the changes. That responsibility will pass on to modal dialog.