Process Activity Routing Based on Buttons Instead of Select Box

Introduction

In many form-based workflows, the decision for the next action is often made using a select box. However, a design with individual buttons can offer a more intuitive and user-friendly interface for some users. This approach can be particularly effective if users are accustomed to systems with similar designs.

How does it work?

This script replaces a select box with individual buttons for each option. When a button is clicked, it sets the value of the hidden select box and triggers the form submission. This method improves user experience by providing clear, actionable options directly.

Steps to Implement:

1. Find the name of the select box you want to replace with buttons. Below, watch the screenshot to identify the correct element name.
   

2. Insert the following code into the Custom HTML section of your form. Update the selectBoxName variable with the name of your select box.
   
   Code:
   

   <div id="dialog" title="" style="display:none;">
       <label>Remarks</label><br/>
       <textarea id="remark_copy"></textarea>
   </div>
   <script type="text/javascript">
   var selectBoxName = "status";
   var remarkName = "remarks";
   $(function(){
       $(FormUtil.getField(selectBoxName)).parent().hide();
       $(FormUtil.getField(selectBoxName)).closest(".form-section:not(.ui-sortable)").hide();
       $(FormUtil.getField(selectBoxName)).children().each(function(){
           if($(this).attr("value") != ""){
               var cssClass = $(".form-button:last").attr("class");
               var button = "<div class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).attr("value") + "</button></div>";
               $(".form-button:last").after(button);
           }
       });
   });
   function completeWithVariable(obj){
       if ($(obj).val() === "Rejected" || $(obj).val() === "Clarification Required") {
           $(FormUtil.getField(selectBoxName)).val($(obj).val());
           $( "#dialog" ).attr("title", $(obj).val());
           $( "#dialog" ).find("label.label").attr("style", "text-align:left;color:#000;");
           $( "#dialog" ).dialog({
                 resizable: false,
                 height: "auto",
                 width: 600,
                 modal: true,
                 open: function () {
                       $('#remark_copy').richtext({mode : '', height : '200'});
                 },
                 buttons: {
                   "Submit": function() {
                     var value = tinyMCE.editors["remark_copy"].getContent();
                     tinyMCE.editors[FormUtil.getField(remarkName).attr("id")].setContent(value);
                     $("#assignmentComplete").trigger("click");
                     $( this ).dialog( "close" );
                   },
                   Cancel: function() {
                     $( this ).dialog( "close" );
                   }
                 }
           });
           setTimeout(function(){$.unblockUI();}, 20);
       } else {
           $(FormUtil.getField(selectBoxName)).val($(obj).val());
           $("#assignmentComplete").trigger("click");
       }
   }
   
   </script>
   <style type="text/css">
       input#assignmentComplete{
           display: none;
       }
   </style>

Download sample app