Introduction

So buttons in forms is quite useful but Aria Automation does not natively support them in their forms. To achieve this, I found a workaround using checkboxes as buttons concatenating two dropdown fields values together. Here in this article, we go through the setup, covering all the form configurations and the JavaScript structure to concatenate.

Problem Statement

I needed a way in my Aria Automation form to:

• Get user selections from two dropdowns (Service Entry Type and Service Entry Extra Properties).
• Join* the chosen values into Service Entry Type:Service Entry Extra Properties format.
• A growing list of unique concatenated values
• The checkbox will be our trigger, simulating a UIButton click, adding new Values.

Aria Automation does not directly allow for button use, so I created a workaround using a checkbox field (Add to List).

Solution Overview

The implementation consists of several key form elements and a backend JavaScript action:

1. Concatenating Dropdown Values

• Field: concatenateList
• Logic: Takes a value from Service Entry Type and Service Entry Extra Properties and concatenates them with a :

2. Binding the Service Entry List

• Field: bindService
• Logic: Positioned to Service Entrypoint list making the values held before still available.

3. Unchecking the Checkbox After Action Execution

• Field: uncheckApply
• Logic: An external action resets the Add to List checkbox.

4. Conditional Checkbox Behavior

• Field: Add to List
• Logic: Much like in the previous use cases, the conditional rule resets the checkbox whenever the external action is executed.

5. Updating the Service Entry List

• Field: Service Entry List
• Logic: In order to add a new value, called an external action to append new values without duplication.

6. User Experience Enhancement

• These could be validation checks to ensure users are not inadvertently adding blank or ill-formed entries.
• Giving visual feedback for a successful adding of a new entry
• Guiding the users through the process with tooltips.

JavaScript Action for Concatenation

Below is the JavaScript code used in the external action to update the Service Entry List dynamically:

// Check if we should add the new inputValue (based on the boolean input)
if (addNewValue === true) {
    // Check if existingValue is not available (i.e., it's the first run or no prior values)
    if (!existingValue || existingValue === "") {
        // If empty or undefined, directly set existingValue to inputValue
        existingValue = inputValue;
        System.log("Initial value added: " + inputValue);
    } else {
        // Split the existing value list by commas to get an array of values
        var valueList = existingValue.split(",");

        // Trim any whitespace from each entry
        for (var i = 0; i < valueList.length; i++) {
            valueList[i] = valueList[i].trim();
        }

        // Check if inputValue already exists in the list
        if (valueList.indexOf(inputValue) === -1) {
            // If the input value does not exist, add it to the list
            valueList.push(inputValue);
            System.log("New value added to the list: " + inputValue);
        } else {
            System.log("Input value already exists in the list: " + inputValue);
        }

        // Join the array back into a comma-separated string
        existingValue = valueList.join(", ");
    }
} else {
    // If addNewValue is false, do not add the new inputValue
    System.log("Addition of new value skipped as addNewValue is false.");
}

// Log the updated or unchanged list
System.log("Final List: " + existingValue);

// Return the updated or unchanged list
return existingValue;

JavaScript Action for Unchecking the Checkbox

The following JavaScript code ensures the checkbox (Add to List) is automatically unchecked after executing the action:

var shouldRefresh = true;
// Check conditions to determine if it should not refresh

try {
    // Existing logic
    if (addElement) {
        if (helpRefresh && helpRefresh.indexOf('true') > -1) {
            shouldRefresh = false;
        } else if (!helpRefresh) {
            // Handle missing helpRefresh field
            System.warn('Field helpRefresh is missing. Defaulting to refresh.');
        }
    }
} catch (error) {
    System.log('Error during workflow cancellation: ' + error.message);
}
System.log('Should Refresh: ' + shouldRefresh);
return shouldRefresh; // This could return the boolean indicating whether it should refresh

Benefits of This Approach

• No need for buttons: The checkbox us all you need for the action
• No need for buttons: The checkbox us all you need for the action
• It automates the update process: After each run, the checkbox is reset automatically.
• Enhance user experience: Visual feedback and validation streamline the process.

Conclusion

This blog reported easy workarounds to overcome the limitations of Aria Automation forms. This means that instead of updating everything on the front end, we can call changes for the back end using JavaScript to update a list or whether or not a checkbox is ticked.

This makes the process far more efficient and user-friendly — things like validation and clear instruction to users.

If you’re working with similar constraints in Aria Automation, I hope this guide makes your job a little easier!