Use Case: Triggering Multiple Operations

Overview

Let's recap. When you use Trigger on Click, you build a bridge between the Button and your triggered component. Every time your end-user clicks the button, your Trigger on Click component fire. The process is straight-forward and easy to use. But sometimes you might want one Button to trigger more than one component. Using a Button's Event ID, you can trigger as many components as you want from one button-click event.

What You'll Learn

In this article, you'll learn how to:

Triggering Multiple Components with One Button-Click

Ready to trigger multiple components with the click of a button? Below, you'll configure this functionality in a module. When you're done with your build, here's how it works in Express View: When your end-user visits your module, they see 2 fields: Username and Last4 Digits of SSN. They also see an I'm a New User button. When your end-user clicks I'm a New User, Unqork disables the Username and Last 4 Digits of SSN fields. When clicked, your end-user can no longer type in those fields. At the same time, 2 new input fields display: Name and Email Address.

This example shows that you can use one Event ID to trigger as many components as you want. For now, we'll keep it simple and trigger 2 Decisions.

Here's how the functionality looks in Express View:

And here's how your completed module looks in the Module Builder:

What You'll Need

For this configuration, you'll need:

  • 1 Panel component

  • 1 Button component

  • 2 Text Field components

  • 1 Protected Field component

  • 1 Email component

  • 2 Decisions components

Configure the Panel Component

This Panel acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto your canvas.
2. Enter panelEvent in the Property Name field. Leave the Title empty.
3. Click Save.

Configure the Button Component

Next, you'll configure the Button component. When clicked, this Button component triggers the Decisions components you'll add in a bit.

1. In the Module Builder, drag and drop a Button component onto your canvas.
2. Enter btnNewUser in the Property ID field.
3. Enter I'm a New User in the Label Text field.
4. Select Event from the Button Action Type.
5. Enter btnEventShowFields in the Event ID field.

6. Click Save.

Configure the First Text Field Component

This is your Username field. When your end-user clicks the I'm a New User button, Unqork disables this input field. You'll set up the disable function in one of your Decisions components.

1. In the Module Builder, drag and drop a Text Field component onto your canvas. Place it above the btnNewUser Button.
2. Enter userName in the Property ID field.
3. Enter Username in the Label Text field.
4. Click Save.

Configure the Protected Field Component

This is your Last 4 Digits of SSN field. When your end-user clicks the I'm a New User button, Unqork disables this input field.

1. In the Module Builder, drag and drop a Protected Field component onto your canvas. Place it in between the Username Text Field and the Button.
2. Enter ssnDigits in the Property ID field.
3. Enter Last 4 Digits of SSN in the Label Text field.
4. Click Save.

Configure the Second Text Field Component

This is your hidden Name field. When your end-user clicks the I'm a New User button, Unqork makes this field visible. You'll set up the visible function with a Decisions component in a bit.

1. In the Module Builder, drag and drop a Text Field component onto your canvas. Place it below the btnNewUser Button.
2. Enter name in the Property ID field.
3. Enter Name in the Label Text field.
4. Set the Hide Field toggle to ON.
5. Click Save.

Configure the Email Component

This is your hidden Email Address field. When your end-user clicks the I'm a New User button, Unqork makes this field visible.

1. In the Module Builder, drag and drop an Email component onto your canvas. Place it below the Name field you just added.
2. Enter emailAddress in the Property ID field.
3. Enter Email Address in the Label Text field.
4. Set the Hide Field toggle to ON.
5. Click Save.

Configure the First Decisions Component

You'll use 2 Decisions components in this configuration. This first Decisions component disables the Username and Last 4 Digits of SSN fields when your end-user clicks I'm a New User.

NOTE  You can place your Decisions components anywhere in your module. They stay behind-the-scenes, so your end-user never sees them. We've chosen to place our Decisions in between the first 2 input fields and the last 2 input fields.

1. In the Module Builder, drag and drop a Decisions component onto your canvas.
2. Enter ruleDisableFields in the Property ID and Canvas Label Text fields.
3. Set the Trigger Type to Watch.
4. In the Inputs table, enter the following:

Property ID

Type

buttonClick

exact

NOTE  buttonClick is a recognized Input in Unqork. buttonClick tells Unqork to look for any button-clicks in your module.

5. In the Outputs table, enter the following:

Property ID

Type

userName

disabled

ssnDigits

disabled
6. In the Micro Decisions table, enter the following:

buttonClick

userName_disabled

ssnDigits_disabled

btnEventShowFields

yes

yes

 

no

no

7. Click Save.

Configure the Second Decisions Component

This second Decision makes the Name and Email Address fields visible when your end-user clicks I'm a New User.

1. In the Module Builder, drag and drop a Decisions component onto your canvas.
2. Enter ruleShowFields in the Property ID and Canvas Label Text fields.
3. Set the Trigger Type to Watch.
4. In the Inputs table, enter the following:

Property ID

Type

buttonClick

exact
5. In the Outputs table, enter the following:

Property ID

Type

name

visible

emailAddress

visible
6. In the Micro Decisions table, enter the following:

btnNewUser

name_visible

emailAddress_visible

btnEventShowFields

yes

yes

 

no

no

7. Click Save.
8. Save your module.

Now, preview your module in Express View. You'll see the Username and Last 4 Digits of SSN fields. Once you click the I'm a New User button, Unqork disables those 2 fields. Also, 2 new fields display: Name and Email Address.

NOTE  In a real-life scenario, you'll add further configuration for a new user to submit their information. We've kept it simple in this example to show you the functionality of an Event ID.

Checking Your Event ID in the DevTools Console

Ready to see what happens in your browser when your end-user clicks the button? The DevTools Console shows you the behind-the-scenes of your completed module.

To open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

1. Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..
2. Right-click anywhere on your Express View page.
3. Click Inspect. By default, the DevTools panel opens on the right side of your page.

TIP  To open the Console in Google Chrome, you can use the Ctrl + Shift + J (Windows/Linux) or Option + Command + J (Mac OS) shortcut.

4. At the top of the DevTools panel, click the Console tab.

The Console tab is a live preview of your submission data. A blue arrow to the left of a blank row at the bottom of the Console's feed indicates the Console's command line. It's here that you can enter commands to get more data details.

For this example, you'll take action in your module and check for the Console Event ID. With the DevTools Console open in Express View, click the New User button. Then, you'll run the Angular command.

To run the Angular command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

1. At the prompt, enter the following Angular command: angular.element('.unqorkio-form').scope().submission
Copy 
angular.element('.unqorkio-form').scope().submission
2. Press Enter (Return). The submission object displays in the Console.
3. Click the solid drop-down arrow to the left of the response in your Console panel. The response starts with {data: {...}.
4. Expand the data section to display your submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. object.

TIP  Next time you open the DevTools Console, you can press the up arrow key on your keyboard to repopulate the Angular Command.

NOTE  The Angular command only displays the submission data entered before the command runs.

The response should look something like this:

Checking for an Event ID helps you when troubleshooting your application. If you see buttonClick and your Event ID in the Console, you'll know that the event registered in the browser.

Lab

You'll find the module showing how to use a Button Event ID to trigger more than one component here: https://training.unqork.io/#/form/5f6147d1cd1b7302210b8b89/edit.