function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Patrick DivinePatrick Divine 

"Click" the Next Button of a Flow Upon Enter Key Press

Hi all, my company has created a cloud flow embedded in a visualforce page that we use to capture employee clock in and clock outs. The flow is working great with the exception of employees having to use the mouse to manually click on the Next Button to pass between flow pages. This can take more time than we would like as for some projects he have to clock in perhaps 70 people within 10 minute time spans.

 

To solve this I would like to use the enter key to press the Next button. How can this be done?

 

I'm assuming this is simple javascript code placed in the visualforce page alongside the embedded flow, but to start with I have no idea how to locate the ID of the "Next" button.

 

Any help would be much appreciated!

 

Thank you.

 

 

 

ryanjuptonryanjupton

The question has been partially answered here: http://boards.developerforce.com/t5/Visualforce-Development/Handle-ENTER-event-key-press-in-visual-force-page/td-p/376835 I would imagine you would have to open the visualforce page in Firebug or something similar to find out the button name that Visual Workflow assigns to the button to have a complete solutions

Patrick DivinePatrick Divine

Thank you Ryan,

 

Below is some code that I got to work. 

 

 

Here The Code That Works:

<apex:page showheader="false" sidebar="false">

    <flow:interview name="Flow_Name" buttonLocation="bottom">
    </flow:interview>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />

<script type="text/javascript">


$(document).keypress(function(e) {
  if(e.which == 13) {
    // enter pressed

    (function ($) {
        $(document).ready(function () {
                $("input.FlowNextBtn").click();
                $("input.FlowFinishBtn").click();
        });
    })(jQuery.noConflict(true))
  }
});

</script>

    

</apex:page>

Curt D EnsignCurt D Ensign
I needed this same functionality. Thanks Patrick for posting. Worked like a charm!