+ Start a Discussion
ksadler1982ksadler1982 

Rename button on Flow in Visualforce

 

We are looking to use Flow embedded into a public SF site but would like to have the finish button say "Submit" instead of Next, or Finish.  This is to submit case information, but have the ability to control additional logic via Flow Designer.

 

Is this possible to do within VisualForce?

 

 

Jeff KranzJeff Kranz

Hi there!

 

This can be done by inserting the following jquery into the visualforce page that calls the flow:

 

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

<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
                $("input.FlowNextBtn").attr("value","Submit");
        });
    })(jQuery.noConflict(true))
</script>

One caveat here is that I haven't figured out how to control this "per screen".  Meaning this will change the Next/Finish button to Submit for all screens on the flow.

 

Let me know how it goes!

Jeff KranzJeff Kranz
On second thought- you could probably control this "per page" by wrapping the &lt;script&gt; tag with an <apex:outputpanel rendered="{!myBooleanVar}"> tag, and then calling the flow via apex controller, which would set myBooleanVar to true or false depending on whether or not you want the jquery script running. Not sure if it would render in time to actually alter the value before the flow page renders, but if that is your need it is worth a shot!
ksadler1982ksadler1982

Thank you very much for the reply!  If we decide to go this route, I will let you know how this pans out.

 

 

RajaramRajaram
This is great! thanks for posting the sample JS!
DemiraliDemirali

Worked like a charm. Thanks!! 

DemiraliDemirali

I did it like this for turkish customization. 

 

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

<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("input.FlowFinishBtn").attr("value","Son");
});
})(jQuery.noConflict(true))
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />

<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("input.FlowNextBtn").attr("value","Sonraki");
});
})(jQuery.noConflict(true))
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />

<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("input.FlowPreviousBtn").attr("value","Önceki");
});
})(jQuery.noConflict(true))
</script>