Concat

The CONCAT function is used to combine (concatenate) two or more string values into a single string. It is commonly applied in scenarios where multiple text inputs or variable values need to be merged into a unified string output.

• value1, value2, … , valueN – These are the string values, elements, attributes, or system variables that you want to concatenate.
• The function returns a single string formed by combining all the input values in sequence.

Use Case

On an application page, there are two input fields:

• First Name
• Last Name

When the user enters values in both fields and clicks the SUBMIT button, the application combines both inputs and displays the Full Name using the CONCAT function.

Concept

The application page contains the following fields and button:

• First Name input field
• Last Name input field
• Full Name input field (display field)
• Concat button

When the user enters values in the First Name and Last Name fields and clicks the Concat button, the application combines the two values into the Full Name field using the CONCAT function.

Configuring a Task Group

You have to configure a task in the task group. This task will concatenate the values entered in the First Name and Last Name input fields and display the result in the Full Name field. The task will use the CONCAT function to merge the values, which aligns with the logic defined in the business rule.

To configure a task group:

1. On the vDesigner module’s dashboard, put the mouse pointer on the left panel to expand it.

2. In the left panel, click Task Groups to display the Task Groups page.
3. On the Task Groups page, either click Create Task Group to create a new task group or double-click the name (for example, Concat_FL) of the existing task group to open the <<task group name >> page.

Note:- To know more about creating a new task group, click here.

4. On the <<task group name >> page, in the Task tab, search the Copy Data task and drag it to the execution panel.

5. Under Copy Data, in the Copy Data box, click the application tree icon () to display the Copy Data panel on the right.
6. In the first input field under Copy From, scroll right through different tabs and then click the Functions tab.
7. In the search box, Type concat and select the function.

8. After selecting the Concat function, select string 1, again scroll right through different tabs, and then click the Element tab.
9. Now type and search the reference name of the First Name input field (for example, InputField_First) and select it.

10. Similarly, select string 2, scroll right through different tabs, and then click the Element tab.
11. Now type and search the reference name of the Last Name input field (for example, InputField_Last) and select it.

Note: You can concatenate additional strings by clicking the plus (+) icon to add more string fields, allowing multiple values to be combined into a single field.

12. Under Copy To, Select Element Tab.
13. Now type and search the reference name of the Full Name input field (for example, InputField_Full) and select it.

14. Then click Select and Save, located in the bottom right corner,  to configure the Concat Function in the Copy Data task.

Linking Task Group to Concat Button

After configuring the Concat function within the Copy Data task and adding it to a task group (for example, Concat_FL), the task group must be linked to the Concat button.

Once the Concat_FL task group is linked to the Concat button, clicking the button will execute the task group, combining the values from the First Name and Last Name input fields into the Full Name field.

• When the user enters values in both the First Name and Last Name fields and clicks the Concat button:
  The concatenated result will be displayed in the Full Name field.
• If either the First Name or Last Name field is empty, the Full Name field will display only the entered value(s), or an empty result if both fields are left blank.

To Link the Task Group to the Concat Button:

1. On the related application page in the vDesigner module’s dashboard, locate the Concat button to link it to the Concat_FL task group.
2. Click the Concat button to open its property panel.

3. In the Button panel, click the Events icon () to display the list of events.

4. In the list of events, locate the onClick event.
5. To the right of the onClick event, click the plus icon ( ) to open the Event Configuration page.
6. On the Event Configuration page, in the Task Group panel, search for the task group (for example, Concat_FL).
7. Once you find the task group (for example, Concat_FL), drag it to the Execution panel.

8. The Execution panel displays the task or tasks that you configured within the task group.

9. In the right panel, click Save to complete linking the task group to the Concat button.

The End Result (Concat Function)

Case 1: – If the end user enters values in the First Name and Last Name input fields and then clicks the Concat button, the Concat() function will combine the values from both fields. As a result, the application will display the concatenated full name in the Full Name field.

Case 2: – If the end user leaves either the First Name or Last Name input field empty and clicks the Concat button, the Concat() function will still concatenate the available values. If one of the fields is empty, the Full Name field will display only the value from the non-empty field.

NOTE: This section describes linking the task group to the onClick event of the Concat button. This approach triggers the Concat() function when the user clicks the button.

Alternatively, if you want the concatenation to happen as soon as the user completes filling in either the First Name or Last Name field, you can link the task group to the onCompletion event of those input fields. In this case, the Concat() function will update the Full Name field immediately after the user finishes entering a value in First Name or Last Name.