How to: Use the REGEXMATCH Regular Expression Formula

Estimated Reading Time:  8 minutes

Overview

While Unqork is a no-code platform, you can use external library formulas. Regular Expression (Regex) is one of these external library formulas. Regex An accordion is a type of menu that displays a list of headers stacked on top of one another. is a complex set of rules that control the patterns of strings as they're entered into a field. You can use Regex to control what the end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can enter into input fields on your application.

Regex is a character sequence that describes what pattern a string must follow. One of the most common places you'd find Regex is when signing up for a website. During the sign-up process, websites might prompt you to enter a password with specific characters and character count. If you enter a password that doesn't meet the specified criteria, you get an error response. This is all possible thanks to Regex. You can also use Regex to check the validity of end-user information. For example, ensuring that an email address entered is a valid email address.

One way to use Regex in Unqork is through Regex formulas, including REGEXMATCH. REGEXMATCH allows you to validate what end-users enter into fields. Doing so lets you use Regex in components like Calculators and Data Workflows. For example, let's say you ask for your end-user's email address at the start of an application. You only want the end-user to be able to proceed if they've entered a valid email address. To achieve this task, you use a Formula Data Workflow operator with a REGEXMATCH formula. If the end-user meets the criteria, a button on your module becomes clickable. If not, the button is disabled until they enter a valid email address.

What You'll Learn

In this article, you'll learn how to use the REGEXMATCH formula in a Data Workflow component to validate an end-user's email address.

What You Need

This use case uses:

• 1 Email component

• 1 Button component

• 1 Data Workflow  component

The Data Workflow in this use case uses:

• 1 Input operator

• 1 Formula operator

• 1 Branch Split operator

• 2 Create Value operators

• 1 Branch Merge operator

• 1 Output operator

Adding End-User Fields

Your end-user only interacts with two components in your application: an Email and a Button component. They'll use the Email component to hold their email address. Then, if they've entered a proper email address, they'll use the button to submit it.

NOTE  These components use example Property ID and Label Texts. In your use case, enter unique values for these fields.

Configure the Email Component

1.

In the Module Builder, drag and drop an Email component onto your canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter email.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Email.

Configure the Button Component

1.

Drag and drop a Button component onto your canvas, placing it below your  Email component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnSubmitEmail.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Submit Email.

4.

Set the Disable User Input The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process. toggle to (ON). This ensures that the end-user can't select the button before entering an email address.

Here's how these two components look in your module:

NOTE  While you can use the Regular Expression Pattern settings in the Email component to validate entries, this only tells the end-user if their email isn't valid. It wouldn't control the status of the button. To control the visibility of the button, use the Data Workflow to control the Regex.

Configuring REGEXMATCH in a Data Workflow

Configure the Data Workflow Component

The Data Workflow component filters the end-user's input using the Regex REGEXMATCH formula.

1.

Drag and drop a Data Workflow component onto your canvas, placing it above the  Button component.

2.

In the Property ID and Canvas Label Text fields, enter dwfCheckEmail.

3.

Save your Data Workflow.

Configure the Input Operator

To start your Data Workflow, use an Input operator to bring in data from your Email component.

Enter the following in the Input operator's Settings Window:

Setting	Value
Category	Input
Component	emailTo
Required	Yes
Source	Default

Configure the Formula Operator

Then, add a Formula operator with this expression:

=REGEXMATCH(A,'^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$')

You get this expression by using the REGEXMATCH syntax of REGEXMATCH(stringToCheck,regularExpression). But your formula replaces stringToCheck with A. This grabs data from the operator's input port. Then, replace regularExpression with the email validation Regex.

Enter the following in the Formula operator's Settings Window:

Setting	Value
Category	Formula Value
Label	REGEXMATCH
Formula/Expression	=REGEXMATCH(A,'^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$')

Link the operators according to the following image:

To show you what this accomplishes, we'll look at the DevTools Console. First, here's what you'd see if you entered a valid email address:

And here's what you'd see if you entered an invalid email address:

NOTE  If you're building along, your use case is not yet finished. So, you won't see this in your DevTools Console yet. These images are only for demonstration purposes.

Adding Paths to Your Data Workflow

Next, you must create two paths for your Data Workflow to follow. Either the email address meets the requirements, or it doesn't. So, you need a pathway for Yes (meets criteria) and a pathway for No (doesn't meet criteria). Use a Branch Split operator to create these paths with the condition of A. This condition sends a value of True from your Formula through the Branch Split operator's upper output port. The Branch Split also takes a value of False from your Formula and send it through its lower output port. From there, you'll use a Create Value operator in each path to create the Yes and No values.

Configure the Branch Split Operator

Enter the following in the Branch Split operator's Settings Window:

Setting	Value
Category	Branch Start
Label	Yes or No Split
Do Not Sanitize Formula	Yes ()
Condition	A

Configure the First Create Value Operator

Enter the following in the first Create Value operator's Settings Window:

Setting	Value
Category	Create Value
Label	No Value
Expression/Value	='no'

Configure the Second Create Value Operator

Enter the following in the second Create Value operator's Settings Window:

Setting	Value
Category	Create Value
Label	Yes Value
Expression/Value	='yes'

Link the operators according to the following image:

These Yes and No values are what it takes to disable or enable a component using an Output operator. So, now you'll tie your work together.

Merging Your Data Workflow Paths

Your data only travels down one of your two pathways, but both pathways must end in the same place. The only difference will be their result. So, to lead both pathways to the same place, you'll add a Branch Merge operator. Then, you'll connect this to an Output operator linked to your Button component. This Output operator then enables or disables your button based on the data passed to it. If your Output operator receives a value of Yes (invalid email address), it disables the button. If your Output operator receives a value of No (valid email address), it enables the button.

Configure the First Branch Merge Operator

Enter the following in the first Branch Merge operator's Settings Window:

Setting	Value
Category	Branch End
Label	Yes or No Merge

Configure the Second Branch Merge Operator

Enter the following in the second Branch Merge operator's Settings Window:

Setting	Value
Category	Branch End
Label	Yes or No Merge

Configure the Output Operator

Enter the following in the Output operator's Settings Window:

Setting	Value
Category	Output
Component	btnSubmitEmail
Action	Disabled

Link the operator's according to the following image:

Updating the Data Workflow Trigger Type

The only step left is setting your Data Workflow to have a Trigger Type of Watch. Remember, the goal of this use case is to enable or disable the button dynamically based on end-user input. So, setting your Data Workflow to Watch lets it update your Button's status as your end-user types. With that finished, here's how your use case works in Express View:

Resources

• Learn more about Module Builder Formulas and Libraries.

• Learn more about using Regex in Unqork.

• Learn more about using Lodash in Unqork.