Question

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

**Moderation Team has archived post**

This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.

Correct Answer
May 9, 2016 - 2:49pm

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

Comments

Keep up to date on this post and subscribe to comments

April 26, 2016 - 2:55pm

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.

April 27, 2016 - 5:41am

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!!

May 3, 2016 - 4:19pm
Response to AjitKumar17

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.

May 3, 2016 - 10:49pm
Response to NicoleW1571

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.

May 4, 2016 - 2:33am
Response to NicoleW1571

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.

snap4.JPG

May 4, 2016 - 9:07am
Response to SathishSenthil

Thank You, Sathish!! I am trying implementation of this code.

May 4, 2016 - 9:56am
Response to NicoleW1571

Good. Let me know, if you face any challenges.

May 4, 2016 - 1:38pm
Response to SathishSenthil

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.

May 5, 2016 - 8:01am
Response to SathishSenthil

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.

Only select Property.jpg

May 7, 2016 - 12:24pm
Response to NicoleW1571

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.

May 9, 2016 - 9:38am
Response to SathishSenthil

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??

May 9, 2016 - 10:41am
Response to NicoleW1571

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.

May 9, 2016 - 1:04pm
Response to SathishSenthil

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??

May 9, 2016 - 2:49pm
Response to NicoleW1571

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

May 9, 2016 - 3:00pm
Response to RettanahHean

Hello Rett-

Thank you for your reply!! Yes, if you wouldn't mind doing that, I would appreciate it very much. Thanks!!

May 9, 2016 - 3:25pm
Response to NicoleW1571

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>

May 9, 2016 - 3:41pm
Response to RettanahHean

Thank You Rett! I will try this out!

Thanks!!

May 10, 2016 - 12:37pm
Response to RettanahHean

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??

May 11, 2016 - 8:45am
Response to NicoleW1571

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?

May 9, 2016 - 8:55pm
Response to RettanahHean