Question
Optum
US
Last activity: 11 May 2016 8:45 EDT
How to Get Enter Key to click the Submit Button
Hello:
I am trying to configure a Text Field, so that when Enter is clicked, it simulates the 'Submit' button being clicked.
I have configured the Behavior as: Event: Keyboard-Enter Action : Refresh Section, Run Activity "Search".
However when I hit Enter in the field, it kicks off the Flow Action, instead of Refreshing the Screen and running the Activity.
When I look at Tracer, the first line is
pyActivity = SubmitModalFlowAction
What IS working, is configuring this same action on a Button.
For the button, I set the Onclick Behavior to Refresh the Section, and the Run the Activity "Search".
It works fine.
When I look at Tracer, the first line is
pyActivity = ReloadSection.
So, how do I get the ENTER action, to work correctly on a Text field, like it does on a Button?
Instead of calling FlowAction, it should be calling ReloadSection
Message was edited by: Lochan to add Category
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution
Hi Nicole,
That is correct. That rule is final and you cannot change it. However, what Sathish is suggesting is overriding the function itself, in a place like UserWorkForm, so that when the function is invoked naturally it will pick up your variation without the ENTER key event submitting the modal and swallowing your configuration.
If you need help with that, I will see if I can mock up a sample you can try out in UserWorkForm. That is, if Sathish or others don't get to it before me
GovCIO
US
Hi Nicole,
Based on our offline discussion, please try with that JS option by calling the custom JS function in your Textbox attribute.
Thanks,
Ravi Kumar.
Pegasystems Inc.
IN
Hello Nicole,
I tried configuring the same action-set on a text input control and it seems to be working fine. Could you please provide some more details regarding your non-working scenario like the focus position when you hits enter, flow type like is it in modal dialog or so.
A screenshot would be helpful in understanding the issue in more details.
Thanks!!
Optum
US
Hello Ajit:
Thank You for your Reply!
Below is a screenshot of where the action is needed.
It should happen when hitting enter on any of the fields. Right now, the Identification Number field is configured.
It is a Modal Flow, as you can see from the embedded screen.
Also, I am using Pega 6.2 Sp2
When I click enter, the second screenshot is what appears. It closes the Modal window. It should stay in the Modal, and execute the Search.
Updated: 3 May 2016 23:02 EDT
So currently the modal dialog is getting submitted when you hit enter on field. Is that the case ?
This might be expected. We even do the same for the flow action which is displayed as part of the action area(in the Perform harness). But there used to be a setting available in the pyActionArea section to avoid this Enter Key submission feature.
Basically we are listening to keypress event happening in the modal dialog and submitting the modal on Enter key press(PFB screen shot).
To prevent this behavior, you can override pega.ui.Doc.prototype.handleModaldlgKeyPress API in any custom script file and make necessary changes. FYI this API is part of pega_ui_modaldialog.js file.
Optum
US
Thank You, Sathish!! I am trying implementation of this code.
Good. Let me know, if you face any challenges.
Optum
US
Satish: Thank You for the Script.
I am configuring the script to be called, by configuring the control, and making selections, as follows:
That brings this up. But the only objects available in the Function Name are PROPERTIES. ???
Also, Pega will allow ANYTHING to be entered here. Even an object that does not exist.
Here, I have entered a JSP. I have created the JavaScript as a JSP.
I don't even think it is being called. I do not see it, in Tracer.
Optum
US
Okay, my screenshots did not come over, so I am trying again
Satish: Thank You for the Script.
I am configuring the script to be called, by configuring the control, and making selections, as follows:
Event = Keyboard-Enter.
However, it appears Pega is only looking for and accepting Properties?
I am trying to select the JSP I created, for the Function.
Actually there is no need to configure Run Script action. You just need to override the handleModaldlgKeyPress API and remove the code that is try to submit the modal.
Optum
US
Thank You, Satish. And at which point do I invoke the Function that overrides the API ?? I would assume when the behavior is encountered on the button, but that does not appear correct??
There is no need for you to invoke this method explicitly. This gets automatically invoked when user presses enter key when inside modal. Since now we have overridden this API and removed the logic to submit modal on enter key, this will be prevented.
Optum
US
Thank You Satish!! I got the change to work, by doing a Private Check Out of the file:
pega_ui_modaldialog.js.
However, this is Pega OOB. Also, it is final. So, I cannot save it as a New version of the Rule. For the entire Application and Users to access.
The change is only available in Private Check-Out.
So, I am curious as to how you were able to save the custom change to the Pega File??
Accepted Solution
Hi Nicole,
That is correct. That rule is final and you cannot change it. However, what Sathish is suggesting is overriding the function itself, in a place like UserWorkForm, so that when the function is invoked naturally it will pick up your variation without the ENTER key event submitting the modal and swallowing your configuration.
If you need help with that, I will see if I can mock up a sample you can try out in UserWorkForm. That is, if Sathish or others don't get to it before me
Optum
US
Hello Rett-
Thank you for your reply!! Yes, if you wouldn't mind doing that, I would appreciate it very much. Thanks!!
Hi Nicole,
Give this code a whirl. I did a proof of concept on my end and it disables the OOTB ENTER key submission behavior in the modal, and allows me my ENTER events to fire instead.
Put this custom script in your UserWorkForm and retest your modal scenario.
Hi Nicole,
Give this code a whirl. I did a proof of concept on my end and it disables the OOTB ENTER key submission behavior in the modal, and allows me my ENTER events to fire instead.
Put this custom script in your UserWorkForm and retest your modal scenario.
<script> pega.ui.Doc.prototype.handleModaldlgKeyPress = function(event){ if(pega.u.d.bModalDialogOpen){ var modaldialog = document.getElementById("modaldialog"); var srcObj = pega.util.Event.getTarget(event); var elemTagName = srcObj.tagName.toUpperCase(); /* START Disabling ENTER key event if (event.keyCode==13){ var controlType = null; if(srcObj.type){ controlType = srcObj.type.toUpperCase(); } if (elemTagName == 'TEXTAREA' || elemTagName == 'A' || elemTagName == 'SELECT' || elemTagName == 'BUTTON' || controlType == 'BUTTON' || controlType == 'SUBMIT' || srcObj.id == 'ModalButtonSubmit' || srcObj.id =='ModalButtonCancel' || typeof(srcObj.AutoComplete)!="undefined") { pega.util.Event.stopPropagation(event); return; } var buttonObj = pega.util.Dom.getElementsById("ModalButtonSubmit",modaldialog); if(buttonObj){ pega.util.Event.fireEvent(buttonObj[0],'click'); pega.util.Event.stopPropagation(event); pega.util.Event.preventDefault(event); } }else *END Disabling ENTER key event */ if (event.keyCode==27){ /* If the ESC key is pressed */ var buttonObj = pega.util.Dom.getElementsById("ModalButtonCancel",modaldialog); if(buttonObj){ pega.util.Event.fireEvent(buttonObj[0],'click'); pega.util.Event.stopPropagation(event); pega.util.Event.preventDefault(event); } } } } </script>
Optum
US
Thank You Rett! I will try this out!
Thanks!!
Optum
US
Thank You, Rett!! This works beautifully!! The ENTER Key is no longer executing the Flow Action, and closing the Modal Window.
Thank You so much, Awesome!
However, there is one additional piece that needs to happen with the ENTER key. It needs to execute the SEARCH, in the Modal Window.
Is there a piece of code I can add, and/or uncomment to allow the simulation of clicking the SEARCH button to happen, when the ENTER key is clicked??
You're welcome Nicole. Regarding your next request, I thought that this was taken care of by using the refresh section and run activity option?
All you would need to do is match the same event configuration that the search button invokes onclick.
Isn't that what you configured? Or did I read prior posts incorrectly?