Utilizing Buttons for Custom Actions

There will be situations where you want users to enter data but do not want it manipulated or massaged automatically. In such cases, you can utilize a button that the user can press that will initiate the action.

Here's a few pieces of information you'll need in order to continue.

Labels - These are found on the 'Data' tab of the Text and Button Components
Property ID - This field is located on the 'API' tab of the Text and Button Components
Rules
- Button Component - Rules are entered on the Display tab in the 'Button Custom Logic" area
- Text Component - Rules are entered on the 'Data' tab under the Calculated Value section and in the JavaScript value

Step-by-step guide - Simple Concatenation on Button-click

In the first example, we will simply concatenate two fields into a third

Drag 3 Text Components onto your form.
1. The first will need a Label of "First Name" and a Property ID of "FirstName"
2. The second will need a Label of "Last Name" and a Property ID of "LastName"
3. The last will need a Label of "Full Name" with a Property ID of "FullName"
Drag a Button Component onto your form. Provide a Label of "Generate Full Name" with a Property ID of "GenerateFullName" and, on the 'Display' tab, change the 'Action' to "Custom".
With all your controls in place, you can know begin writing your rule. This rule will be contained within the Button Component.
First you will want to create variables for each piece of data. This includes one each for the First Name, Last Name, and Full Name fields.
1. ```
var First;
var Last;
var Full;
```
You now want to populate the First Name and Last Name variables with data from their respective fields, but only if data exists.
1. ```
if (data.FirstName)
First = data.FirstName;
```
2. ```
if (data.LastName)
Last = data.LastName;
```
You can now merge the two data points together into the variable for Full Name. You will only want to do this when data exists in BOTH the "FirstName" and "LastName' Components.
1. ```
if (data.FirstName && data.LastName)
Full = First + ' ' + Last;
```
Finally, you will need to take the data in the Full Name variable and insert it into the "FullName" Component.
1. ```
data.FullName = Full;
```

Complete rule

var First; //First Name variable
var Last; //Last Name variable
var Full; // Full Name variable

if (data.FirstName) //Checks for data in the "FirstName" Component
First = data.FirstName; //Inserts data from the FirstName Component into the First Name variable

if (data.LastName) //Checks for data in the "LastName" Component
Last = data.LastName; //Inserts data from the LastName Component into the Last Name variable

if (data.FirstName && data.LastName) //Checks for data in both the "FirstName" and "LastName" Components
Full = First + ' ' + Last;

data.FullName = Full; //Inserts data from the Full Name variable into the "FullName" Component

Downloadable Form

Simple Concatenation on Button-click.json

Step-by-step guide - Concatenation with Data Manipulation

In the next example, you will see not only how to concatenate multiple Components, but also how to manipulate data triggered by a Button-click. Specifically, you will see how to generate a user ID, in the format of first initial-last name.

Part 1 - Components

Drag 4 Text Components onto your form.
1. The first will need a Label of "First Name" and a Property ID of "FirstName"
2. The second will need a Label of "Last Name" and a Property ID of "LastName"
3. The third will need a Label of "Last Name First" with a Property ID of "LastNameFirst"
4. The last will need a Label of "User ID" with a Property ID of "UserID"
Drag a Button Component onto your form. Provide a Label of "Generate User ID" with a Property ID of "GenerateUserID" and, on the 'Display' tab, change the 'Action' to "Custom".

Part 2 - First Name Last Rule

With all your controls in place, you can know begin writing your rules. The first rule will be contained within the First Name Last Component.
First you will want to create variables for each piece of data. This includes one each for the First Name, Last Name, and Full Name fields.
1. ```
var First;
var Last;
var LNF;
```
You now want to populate the First Name and Last Name variables with data from their respective fields, but only if data exists.
1. ```
if (data.FirstName)
First = data.FirstName;
```
2. ```
if (data.LastName)
Last = data.LastName;
```
You can now merge the two data points together into the variable for Last Name First. You will only want to do this when data exists in BOTH the "FirstName" and "LastName' Components.
1. ```
if (data.FirstName && data.LastName)
LNF = Last + ', ' + First;
```
Finally, you will need to take the data in the First Name Last variable and insert it into the "LastNameLast" Component.
1. ```
value = LNF;
```

Complete rule:

//variables
var First;
var Last;
var LNF;

//Checks for data in First Name Component and sets First Name variable
if (data.FirstName)
First = data.FirstName;

//Checks for data in Last Name Component and sets Last Name variable
if (data.LastName)
Last = data.LastName;

//Checks for data in the First and Last Name Components and sets Last Name First variable
if (data.FirstName && data.LastName)
LNF = Last + ', ' + First;

//Sets Last Name First Component to Last Name First variable
value = LNF;

Part 3 - Generated User ID on Button Click

This rule will be contained within the 'Generate User ID' Button Component.
Once again, you will start by creating variables for each piece of data. This includes one each for the First Name, Last Name, First Name Initial, and Full Name fields.
1. ```
var First;
var Last;
var FI;
var UID;
```
You now want to populate the First Name and Last Name variables with data from their respective fields, but only if data exists.
1. ```
if (data.FirstName)
First = data.FirstName;
```
2. ```
if (data.LastName)
Last = data.LastName;
```
Isolating the First name's initial requires the substring() function.
This function allows you to select only a portion of a character string which in this case is just the first letter of the First Name Component.
1. ```
FirstInitial = FirstName.substring(0,1);
```
You now have all the pieces needed to create the UserID
1. ```
UID = FirstInitial + LastName;
```
Finally, set the field to the User ID variable you just populated
1. ```
data.UserID = UID;
```

Complete Rule

//variables
var UID;
var FirstName;
var FirstInitial;
var LastName;

LastName = data.LastName.toLowerCase(); //Make Last Name lowercase
FirstName = data.FirstName.toLowerCase(); //Make First Name Lowercase
FirstInitial = FirstName.substring(0,1); //Get Initial for First Name
UID = FirstInitial + LastName; //Concatenate First Initial and Last Name

data.UserID = UID; //Set User ID field to concatenation

Downloadable Form

Concatenation with Data Manipulation.json

Step-by-step guide - Simple Concatenation on Button-click

Complete rule

Downloadable Form

Step-by-step guide - Concatenation with Data Manipulation

Part 1 - Components

Part 2 - First Name Last Rule

Complete rule:

Part 3 - Generated User ID on Button Click

Complete Rule

Downloadable Form

Related articles