Alfresco workflow form Add two textbox values and display the sum in a third textbox automatically

Question

I am new to alfresco i have create workflow using kickstart i deploy into alfresco share it is working fine ,In workflow form i need multiply two text-box values.I want the result of multiply to appear in the 3rd textbox,as soon as enter the values in the first two textboxes,without pressing any button is possible ? and how ?

What kind of workflow is this? Why do you want to multiply values in the form? — , Apr 21 '16 at 12:12
You need define your own controls and map them to the form properties in the share-config-custom.xml. In these controls use javascript for any actions with your textboxes. — M.Diachenko, Apr 21 '16 at 17:28
Its price calculation workflow may i know how set properties in share-config-custom.xml can you suggest any reference and example — JohnPaul, Apr 22 '16 at 03:32

score 1 · Accepted Answer · answered Apr 21 '16 at 18:15

Here are some snippets from an example that hides a second field based on the dropdown value in the first field. You have a similar requirement so this should help.

First, edit your share-config-custom.xml form config to indicate that your properties need to use custom form controls. It would look something like this:

           <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>

In this case I'm going to dynamically hide sc:field2 based on the value of sc:field1. In your case you have three fields you are dealing with--the two that are being multiplied and the third that shows the result. You probably only need a custom form control on the third field. It can grab the values from the other two fields easily.

Now create the custom form control. On the custom form control add some JavaScript that binds to the onChange event of your two fields to call a custom function that computes the value.

In my dynamic hidden field example, I do something similar on my custom form control using 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>

In your case, you aren't showing/hiding a field based on a dropdown value, but instead are grabbing the value of two fields, multiplying them, and setting them in the third field, but the same logic applies. Anytime either of the two fields change you want to recompute the product and store it in the third field.

Alfresco workflow form Add two textbox values and display the sum in a third textbox automatically

1 Answers1