在典型的表单活动设计中，下一步的行为往往是使用表单域中的一个字段来确定的。我们可以在下面的截图中看到这样的例子。

图1：使用生成流程 - 审批流程审批表  

通过使用一些客户端脚本，我们可以改变从选择框到单个按钮的决策方式，如下面的截图所示。

图2：决策按钮

这个设计可能更适合于以前使用过类似设计的系统的某些用户群。

为了实现这个设计，我们需要首先获取选择框的“名称”。请看下面的截图。

图3：识别元素名称

创建一个  自定义HTML到你想要的形式，并粘贴在下面的代码。将第2行更改为选择框的名称。

<script type="text/javascript">
var selectBoxName = "approval_request_approval_action_status";
$(function(){
	$(FormUtil.getField(selectBoxName)).parent().hide();
	$(FormUtil.getField(selectBoxName)).children().each(function(){
		if($(this).attr("value") != ""){
			var cssClass = $(".form-button:last").attr("class");
			var button = "<div type=\"button\" 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){
	$(FormUtil.getField(selectBoxName)).val($(obj).val());
	$("#assignmentComplete").trigger("click");
}
</script>
<style type="text/css">
    input#assignmentComplete{
        display: none;
    }
</style>
  • No labels