Question
Apply JavaScript to Control Displayed in Overlay or Modal Dialog
Hello,
I've added Javascript files to the Perform harness, and I've included the class name on an autocomplete control where I want to reference the JS to perform some client side validation.
The validation works as expected if that property is rendered in a regular section/dynamic layout. However, the validation does not work if the section is rendered as an overlay or modal dialog - it doesn't pick up the JS referenced in the harness for these cases. The modal dialog is being launched via a local flow action in my example.
What's the best way to configure this so that the Javascript gets applied for client-side validation when the control is displayed in an overlay or modal window?
Thanks.
Here is a more detailed explanation with some screenshots.
I have a couple of Javascript files referenced in the Perform Harness.
On the control properties for a particular field in a section, I'm calling that Javascript function to perform some client side validation on the field.
When that section is rendered, the javascript is called and the validation occurs, as shown here:
When I render that same section through a local action and as a Modal Dialog (or overlay), it doesn't pick up the Javascript files associated with the Perform harness, as shown here:
I'm trying to figure out how to get the client side validation working, with the custom Javascript, within the modal dialog or overlay.
Can you provide more details around using the 'User Work Form" -and if you put the Javascript in UserWorkForm, how do you call that function with regard to a particular control/field?
Thank you.
Resave the UserWorkform rule into your application rule - by default it is empty
Use pega:static JSP server tags to include your Js file
<pega:static type="script" app="webwb"> <pega:file name="XXXX" /> </pega:static>
https://collaborate.pega.com/question/best-place-include-javascript-function
Thank you for the reply and input!
I added the JavaScript file references to the UserWorkForm HTML fragment, though I'm still not seeing the desired results.
As a recap, I've included references to two JS files in the Perform harness:
Then, I reference the class on the Autocomplete control:
The JS works as expected during a normal case flow - by flagging the error when an entry to an Autocomplete field does not match one of the source results:
I added the JS file references to the UserWorkForm:
When I launch the same form in a Modal window, it doesn't seem to pick up the JS to flag the error on the client side:
Am I missing something with regard to the UserWorkForm syntax - or should I be referencing the JS somewhere else to account for the modal/overlays?
Thanks.
Make sure your script is still being called in case of validating modaldialog elements. If not, try placing the script in 'UserWorkForm'. Ideally, the script should be executed if it's defined in the harness, in what context the modal-dialog is launched.
Post few screenshots so we understand your problem better.
-Shruthi