Displaying modal dialog box on click of button after validating data entered by user under form fields
Hi,
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.
Thanks,
Gaurav Saini
Accepted Solution
Pegasystems Inc.
IN
>>> Displaying modal dialog box on click of button after validating data entered by user under form fields
- Would it make sense to validate the data on tab-out?
- performing refresh section + invoking activity to apply Page-Set-Messages?
- we could either invoke the validation activity on last mandatory input for performance concern instead of doing refresh section on every field
- otherwise having fields in individual sections and then included in the main section.
- So that refresh section is scoped or bounded to that particular field.
- performing refresh section + invoking activity to apply Page-Set-Messages?
- if Page-set-Messages is not the use case & only need to show pop-up suggesting user to correct flagged fields.
- hide the default flow action buttons
- set a boolean property to true when error exists
- configure two buttons with visible when using the boolean property
- when error exists
- show the button configured with local action in modal window
- when there is no error
- show the button configured with finish assignment.
- hide the default flow action buttons
Please share your thoughts/comments, Thank you!
psahukaru
GovCIO
US
Hi Gaurav,
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
Thanks,
Ravi Kumar.
Infosys
US
Thanks Ravi for your response.
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.
Greenfield AG
DE
One way that you might try is to use javascript function on the click of a button that will call the activity, which will validate your fields and do the Show-Property with the status of validation back to javascript where you can show the modal window or submit the form ("doFormSubmit('pyActivity=FinishAssignment',this,'');) without it if needed. Instructions on calling the activity from javascript you can find here: https://pdn.pega.com/forums/java-activities/calling-activity-javascript-0
To pass the value back to javascript you'll need to do Show-Property in the activity, this will be the string that is sent as the responseText to javascript.
For showing modal with OK and Cancel you can just use confirm("Please, click something");
You may also have to hardcode the name of the page you want to check properties on in the activity or pass it as the param while calling it from javascript as the activity will not be called with your work object context from javscript (just trace it after the calling to see it). I remember having some troubles Embedded pages names to activity from javascript, but no trouble with passing "pyWorkPage".
If there's more "Pega Way" way to do this, I would like to know about it too.
Infosys
US
Thanks for your response.
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
Thanks for your response.
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
|
Event |
Action |
|
Click |
open rule or run activity and perform below logic:
|
|
Click |
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. |
|
Click |
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. |
Accepted Solution
Pegasystems Inc.
IN
>>> Displaying modal dialog box on click of button after validating data entered by user under form fields
- Would it make sense to validate the data on tab-out?
- performing refresh section + invoking activity to apply Page-Set-Messages?
- we could either invoke the validation activity on last mandatory input for performance concern instead of doing refresh section on every field
- otherwise having fields in individual sections and then included in the main section.
- So that refresh section is scoped or bounded to that particular field.
- performing refresh section + invoking activity to apply Page-Set-Messages?
- if Page-set-Messages is not the use case & only need to show pop-up suggesting user to correct flagged fields.
- hide the default flow action buttons
- set a boolean property to true when error exists
- configure two buttons with visible when using the boolean property
- when error exists
- show the button configured with local action in modal window
- when there is no error
- show the button configured with finish assignment.
- hide the default flow action buttons
Please share your thoughts/comments, Thank you!
psahukaru