Alfresco 工作流表单 添加两个文本框值并自动在第三个文本框中显示总和
Alfresco workflow form Add two textbox values and display the sum in a third textbox automatically
我是 alfresco 的新手,我使用 kickstart 创建了工作流,我部署到 alfresco 共享中,它工作正常,在工作流形式中,我需要乘以两个文本框 values.I 希望乘法的结果出现在第三个文本框,只要在前两个文本框中输入值,就可以不按任何按钮吗?以及如何?
以下是根据第一个字段中的下拉值隐藏第二个字段的示例的一些片段。您有类似的要求,所以这应该有所帮助。
首先,编辑您的 share-config-custom.xml 表单配置以表明您的属性需要使用自定义表单控件。它看起来像这样:
<field id="sc:field2" label-id="prop.sc_field2" >
<control template="/com/someco/components/form/controls/dynamicField.ftl" >
<control-param name="maxLength">255</control-param>
</control>
</field>
在这种情况下,我将根据 sc:field1 的值动态隐藏 sc:field2。在您的情况下,您要处理三个字段——两个相乘,第三个显示结果。您可能只需要在第三个字段上使用自定义表单控件。它可以轻松地从其他两个字段中获取值。
现在创建自定义表单控件。在自定义表单控件上添加一些 JavaScript 绑定到您的两个字段的 onChange 事件以调用计算值的自定义函数。
在我的动态隐藏字段示例中,我使用 JQuery:
在我的自定义表单控件上做了类似的事情
<@markup id="js">
<@script type="text/javascript" src="${url.context}/res/jquery/jquery-1.6.2-min.js" group="form" />
</@>
<script type="text/javascript">//<![CDATA[
// grab the field1 dropdown element
var field1El = $("#template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_sc_field1");
// declare a function that knows how to show/hide the div
var toggleField2 = function(field1) {
if (field1 === "Show Field2") {
$("#field2").show();
} else {
$("#template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_sc_field2").val('');
$("#field2").hide();
}
}
// bind the field1 dropdown element's change event to a function that calls our toggle function
field1El.bind("change", function(e) {
var selected = $("option:selected", this);
var field2 = this.value;
toggleField2(field2);
});
// invoke the toggle function based on the current value of the dropdown before it is changed
// by the user, ie, when the form is first opened
toggleField2(field1El.find("option:selected").text());
//]]></script>
在你的情况下,你不是 showing/hiding 基于下拉值的字段,而是获取两个字段的值,将它们相乘,然后将它们设置在第三个字段中,但相同逻辑适用。每当这两个字段中的任何一个发生变化时,您都希望重新计算产品并将其存储在第三个字段中。
我是 alfresco 的新手,我使用 kickstart 创建了工作流,我部署到 alfresco 共享中,它工作正常,在工作流形式中,我需要乘以两个文本框 values.I 希望乘法的结果出现在第三个文本框,只要在前两个文本框中输入值,就可以不按任何按钮吗?以及如何?
以下是根据第一个字段中的下拉值隐藏第二个字段的示例的一些片段。您有类似的要求,所以这应该有所帮助。
首先,编辑您的 share-config-custom.xml 表单配置以表明您的属性需要使用自定义表单控件。它看起来像这样:
<field id="sc:field2" label-id="prop.sc_field2" >
<control template="/com/someco/components/form/controls/dynamicField.ftl" >
<control-param name="maxLength">255</control-param>
</control>
</field>
在这种情况下,我将根据 sc:field1 的值动态隐藏 sc:field2。在您的情况下,您要处理三个字段——两个相乘,第三个显示结果。您可能只需要在第三个字段上使用自定义表单控件。它可以轻松地从其他两个字段中获取值。
现在创建自定义表单控件。在自定义表单控件上添加一些 JavaScript 绑定到您的两个字段的 onChange 事件以调用计算值的自定义函数。
在我的动态隐藏字段示例中,我使用 JQuery:
在我的自定义表单控件上做了类似的事情<@markup id="js">
<@script type="text/javascript" src="${url.context}/res/jquery/jquery-1.6.2-min.js" group="form" />
</@>
<script type="text/javascript">//<![CDATA[
// grab the field1 dropdown element
var field1El = $("#template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_sc_field1");
// declare a function that knows how to show/hide the div
var toggleField2 = function(field1) {
if (field1 === "Show Field2") {
$("#field2").show();
} else {
$("#template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_sc_field2").val('');
$("#field2").hide();
}
}
// bind the field1 dropdown element's change event to a function that calls our toggle function
field1El.bind("change", function(e) {
var selected = $("option:selected", this);
var field2 = this.value;
toggleField2(field2);
});
// invoke the toggle function based on the current value of the dropdown before it is changed
// by the user, ie, when the form is first opened
toggleField2(field1El.find("option:selected").text());
//]]></script>
在你的情况下,你不是 showing/hiding 基于下拉值的字段,而是获取两个字段的值,将它们相乘,然后将它们设置在第三个字段中,但相同逻辑适用。每当这两个字段中的任何一个发生变化时,您都希望重新计算产品并将其存储在第三个字段中。