Concatenate Values from More than One Form Control and Display in a New Line

Comments

5 comments

  • Avatar
    Sahabuddin

    Hi Ryan,

    Formula control is designed to execute arithmetic operations and display the result in a single line. However, this requirement can be met by using custom JavaScript in the form. Below, you'll find the custom script along with steps and screenshots.

    • Include two form controls (e.g., TextBox1 & TextBox2) to input the values to be concatenated, one form control capable of displaying text in multiple lines (e.g., TextArea1), and one hidden form control to store the names of the controls whose values need to be concatenated.

    • Use the following custom script in the form to perform the operation and display the result in the multiline form control (e.g., TextArea1). Please feel free to modify the custom script as required.
    function concatMultipleFieldValueWithNewLine() {
      eFormHelper.getFieldValue({ fieldId: 'Hidden1' }, function (res) {
          var fieldData = res.data;
          var fieldIds = fieldData.match(/\${(.*?)\}/g);
          fieldIds.forEach(function (id) {
              eFormHelper.getFieldValue({ fieldId: id.replace('${', '').replace('}', '') }, function (response) {
                  fieldData = fieldData.replace(id, response.data);
              });
          });
          eFormHelper.setFieldValue({ fieldId: 'TextArea1', value: fieldData.replace('\\n', '\n') }, function () { });
      });
    }
    • Bind the change event for the controls whose values need to be concatenated (e.g., TextBox1 & TextBox2).

    • Set 'Default Value' as follows to Hidden form control

    Thanks

    1
    Comment actions Permalink
  • Avatar
    Ryan

    Hi Sahabuddin,

    This JavaScript did function. So I believe the purpose of the hidden form control is to use line break '\n' to concatenate the values first and then apply the JS to make the content appear on the text area control.

    One thing I did realize that did not work is if I use three text boxes, so using your example, my hidden control default value is: Test Box 1: ${TextBox1}\nTest Box 2: ${TextBox2}\nTest Box 3: ${TextBox3}

    In this case, the line break '\n' only seemed to work once but not again with the one between text box 2 & 3;

    Does this approach of adding line break in the default only work once? What if I need to concatenate multiple text boxes and with descriptors in front?

    Thank you!

    0
    Comment actions Permalink
  • Avatar
    Sahabuddin

    Hi Ryan,

    In this scenario, you would require slight modifications in the Custom JavaScript, while the remaining steps would remain the same as in the previous post. The script provided below is designed to function with multiple form fields, as required. Below, you'll find the custom script.

    function concatMultipleFieldValueWithNewLine() {
        eFormHelper.getFieldValue({ fieldId: 'Hidden1' }, function (res) {
            var fieldData = res.data;
            var fieldIds = fieldData.match(/\${(.*?)\}/g);
            fieldIds.forEach(function (id) {
                eFormHelper.getFieldValue({ fieldId: id.replace('${', '').replace('}', '') }, function (response) {
                    fieldData = fieldData.replace(id, response.data);
                });
          });
          eFormHelper.setFieldValue({ fieldId: 'TextArea1', value: fieldData.split('\\n').join( '\n') }, function () { });
        });
    }

     

    Thank you

    0
    Comment actions Permalink
  • Avatar
    Ryan

    Hi Sahabuddin,

    Yes this JavaScript did function. However since my use case required the Default Value to have more than just two or three text boxes concatenated, I've noticed that the Default Value in the Hidden form control has a maximum character limit and will not allow me enter any further once that is reached.

    Is there a character limit to that field? And is there any way to bypass that, as I do need to concatenate multiple fields;

    Thank you

    0
    Comment actions Permalink
  • Avatar
    Sahabuddin

    Hi Ryan,

    The DefaultValue field of the Hidden Form Control is limited to 255 characters, as per its design. However, to meet your requirements, you should utilize the Text Area control instead and in the Field Settings window, set the Visible Field value to false. 

    Additionally, modify the custom script by replacing 'Hidden1' with the internal Name of the newly dragged and dropped Text Area control.

    Thank you

    1
    Comment actions Permalink

Please sign in to leave a comment.