Decisions Component

Estimated Reading Time:  18 minutes

Overview

The Decisions component is an event component for logic-based in/then scenarios. For example, if your end-user selects radio button A, then show field B. Or, if your end-user types value X, then display pop-up Y.

Three inputs drive the Decisions component:

  • Input component: What drives the action. Any component works here, including Buttons, Radio Buttons, or Text Fields. The Decisions references the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the input component.

  • Output component: What reacts to the action. Again, any component works, including Panels and Field-Groups containing multiple components. The Decisions references the Property ID of the output component.

  • Decisions component: The Decision itself. You can configure the interaction between the inputs and outputs using Micro Decisions. You can set the input and output behavior by selecting the Type for each. The Micro Decisions table is where you'll set if/then rules using your defined inputs and outputs. Inputs display in the left columns of the Micro Decisions table. The column headers match the Input components' Property IDs. Outputs display in the right columns and are named using a concatenation of their ID and Type.

Here are some real-world examples of when to use a Decisions component:

  • Displaying a Country of Citizenship field after your end-user answers that they're not a U.S. citizen.

  • Showing state-specific question labels, based on your end-user's selected state of residence.

  • Adjusting a maximum loan amount based on your end-user's calculated credit score.

  • Displaying a field with the click of a button.

You can find the Decisions component in the Data & Events Processing group to the left of the Module Editor.

What You'll Learn

After completing this article, you’ll know when to use a Decisions component, how to configure its settings, and how to use it in a module.

About the Configuration Window

General

A static image displaying the Decisions component configuration window.

Setting

Description

Property ID

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

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Toggle Button set to On (ON)/Toggle Button set to Off. (OFF)

The component is active and visible 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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View. While active, other components and processes can reference your component.

Setting the toggle to Toggle Off icon (OFF) makes your component inactive. Other components and processes cannot reference your component while it's inactive.

By default, the Active toggle is set to Toggle On Icon (ON).

Notes Notes icon

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Display Icon Display

Select this tab to manage your component's display settings.
Actions Icon Actions

Select this tab to manage your component's actions settings.

Validation Icon Validation

Select this tab to manage your component's validation settings.

Advanced Icon Advanced

Select this tab to manage your component's advanced settings.

Permissions Icon Permissions

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component.

Field Tag Icon Field Tags

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Shortcuts Icon Shortcuts

Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:

  • Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

  • Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

  • Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

  • Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

  • Enter (Return): When tabbing to a Tooltip Icon (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

  • Drop-down menus: When you Tab to a settings drop-down, use the keyboard's Up-Arrow Icon (up)/ Down-Arrow icon (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Documentation IconDocumentation

Select this tab to access the component documentation in Unqork's In-Product Help.

Cancel

Click this button to undo any unsaved configuration changes and return to the canvas.

Save & Close

Click this button to save all settings as configured and return to the canvas.

Display Panel

A static image dispaying the Decisions component's Display settings.
(click to expand image)

Setting

Description

Canvas Label Text

A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the Module Editor.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

NOTE  For Decisions, it's best practice to use the same value for Canvas Label Text as your Property ID: ruleXxx.

Actions Panel

A static image dispaying the Decisions component's Actions settings.
(click to expand image)

Setting

Description

Trigger Type

This setting provides the following options:

  • Manual:  The component fires when triggered by another component. For example, using a Button component or Initializer component to trigger the Plug-In component. By default, the Manual Trigger Type is selected.
  • Watch: The component fires when there's any action taken on the input component(s) listed in the Inputs table. Actions include entering a new value, editing, or overwriting a saved value. If there are multiple inputs, use the Required setting to specify what inputs must be present before firing.

Execution Type

When executing a rule, the Decisions component runs through each Micro Decision (top to bottom) to set the output. For clarity, assume that you have six configured Micro Decisions. The third and fifth Micro Decisions fulfill the Decision conditions to determine a match.

The following Execution Types set the Decision's behavior:

  • First: This is the default Execution Type. When you choose First, the Decision runs through the Micro Decisions only acting on the first Micro Decision that matches. Based on the earlier example, the match is on the third Micro Decision.

  • Last: When you choose Last, the Decision runs through the Micro Decisions only acting on the last Micro Decision that matches. Based on the earlier example, the match is on the fifth Micro Decision.

  • Merge: When you choose Merge, the Decision runs through the Micro Decisions and concatenates new values as a comma-separated list. This behavior only works with multiple Micro Decisions with Output types of value.

Inputs

Setting

Description

Property ID

The Property ID column is where you enter inputs that your logic component references. Examples of supported inputs include:

  • The Property ID of another component in the module. For example, a component that acts as a trigger, as an input for a Micro Decision, or referenced in a formula.

NOTE  When using a Trigger Type of Watch, enter all inputs the component must watch for in the Property ID column.

TIP  You can use dot notation In Unqork, Dot Notation accesses the properties of an object. The object's name comes before the period, and the property comes after. For example, to reference just the City from an Address Search component, you would enter "address.city". to reference values nested under a Property ID in the 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..

  • Values that aren't the Property ID of a component in the module, but are still present in the submission object. For example, the currentUser object contains information about the end-user.

    Native values generated by the Unqork Designer Platform. For example, buttonClick, which Unqork creates following button-click events.

Alias

To simplify the configuration, give each component an alias. An easy approach is to assign each component a different letter of the alphabet (for example: A, B, C).

Type

The following input types are available for your selection:

  • Exact: With this input type, your logic component watches for an exact value. Use this when you have a finite number of responses. Typical components used with this input type include Radio Buttons, Dropdowns, or a Text Field recording Social Security numbers.
  • Range: Used where the input includes a range of numeric values (such as 1 to 15 or 3% to 40%). Typical examples include ages, coverage amounts, and so on.
  • Contains: Used where the name contains a phrase. This input type works well on strings. An example is a button click that carries dynamic prefixes or suffixes.

Required

Set an input to Required when it must have a value before triggering the Decision.

Silent

"Silent" stands for "Silent Watcher". If Silent is selected and the Trigger Type is set to Watch, the Decisions component won't trigger if that input's value changes. This setting lets you use the input data as a Micro Decision without triggering the component if that data changes.

NOTE  Silent only functions when the Trigger Type is set to Watch. It won't function if the Trigger Type is set to Manual.

Outputs

Setting

Description

Property ID

For your logic component to recognize an output, you must enter the destination component's Property ID(s) here.

The Property ID entered must match the Property ID used in the output component. Remember, use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Type

The following output types are available for your selection:

  • Clear: Clears the output component's data from the submission. A common use of this value is to set the input of "all else" (denoted by a blank column A), then set clear to yes. This output type makes sure no bad data sends.

  • ComponentReferenceKey: Lets you update any settings on an Advanced Datagrid component.

  • Content: Sets the value inside an HTML Element and Content component.

  • Currency: Sets the currency when the output is a Number component.

  • CustomClass: Changes the CSS class of an element.

  • Disabled: Sets the component as disabled and read-only. This output type utilizes two values: yes/no. In The Micro Decisions table, the _disabled column maps under what conditions you want the component disabled (yes) or enabled (no). Again, the field becomes disabled after the Decision triggers.

  • Duration: Sets the duration for a Timer component.

  • DynamicRefresh: Triggers the specified panel to refresh its existing content with the provided component definitions (component JSON). The specified Panel component must have Dynamic Refresh enabled.

  • Editable: This setting is similar to Disabled, but is specific to Grid components.

  • Hidden: Sets a front-end component either visible or hidden, with possible values of yes or no.

  • Label: Changes the label on a field. For example, the same question may be worded differently depending on the state your end-user is in. You'd use this feature to alter the phrasing depending on their state selection.

  • Message: An error message displays under the output field. For example, let's say an applicant must be 18 years or older for their application to be successful. Using an age-related error message, you can set the message to say, "Must be 18 years or older to apply." In the Micro Decisions table, the _message column must map to the message.

  • Minimum/Maximum: Sets the lowest or highest value your end-user can enter into a field. If your end-user enters an amount that falls short of the minimum or exceeds the maximum, an error returns.

  • Multi: The most powerful output value. Use this for asynchronous data configuration decisions. Using this setting, and where both input and output components match, you can set up multiple Micro Decisions.

  • Navigation: Configures a navigation move for a Navigation component.

  • Page: The selected URL opens and displays in the same tab. The page uses an HREF to a URL in the same tab. In the Micro Decisions table, the _page column maps to the URL.

  • PageOpen: The selected URL opens and displays in a new tab. The page uses an HREF with Target=blank. In the Micro Decisions table, the _pageOpen column maps to the URL.

  • Pattern: Defines the component's regular expression. This setting is useful for text fields.

  • PopError: Creates a pop-up error message. In the Micro Decisions table, the _popError column maps to the content of your pop-up error message.

  • PopMessage: Creates a pop-up containing a message. In the Micro Decisions table, the _popMessage column maps to the content of your pop-up message.

  • Prefix/Suffix: Applies a prefix or suffix to the output component.

  • ReadOnlyView: Sets a component as read-only, but doesn't apply the disabled styling. This output type uses two values: yes/no. In the Micro Decisions table, the _readOnlyView column maps under what conditions you want the component set to read-only (yes) or read/write (no). The field becomes read-only after the Decision triggers

  • Required: Sets the component as required or not required. This output type uses two values: yes/no. In the Micro Decisions table, the _required column maps under what conditions you want the component required (yes) or not required (no). The field becomes required after the Decision triggers.

  • RequiredandVisible: Combines the Required and Visible operations, setting both at the same time.

  • Reset: Resets the output component to default settings (settings present before user interaction).

  • SelectValues: Defines options available in a Dropdown and Multi-Select Dropdown component. This is similar to how to use the component ReferenceKey Trigger Type.

  • Steps: This setting is specific to the Number component and lets you set up steppers and a number range.

  • Title: Changes the title of a Panel.

  • Trigger: Triggers components, such as Initializers. In the Micro Decisions table, the _trigger column maps to GO.

  • Validate: Tells the output component to validate the data entered into it.

  • Value: Takes the value entered in the Micro Decisions table and pushes it to the output component.

  • Visible: Sets the component as visible or hidden in Express View. This output type uses two values: yes/no. In the Micro Decisions table, the _visible column maps under what conditions you want the component visible (yes) or hidden (no).

NOTE   The following output types are not supported or referenced above: Steps, Focus, Pattern, Content, and Clicked. Additionally, not all components support every output type. For example, setting a Prefix/Suffix output for a Radio Buttons component has no effect.

Micro Decisions

Setting

Description

Input Values

Shows a column for each input component. The component's Property ID serves as the header for the column. Using the firstrow, enter the trigger value the logic component uses when triggering the output.

NOTE  By default, Date Input components store dates in ISO 8601 format with a timestamp of midnight UTC. For example, 2020-11-13T00:00:00Z. When referencing input values from a Date Input component, you must also use ISO 8601 format. The exception is when the Date Input component has Store Date Only enabled, in which case the date stores without a timestamp.

TIP  A blank value/nothing in the Input column acts as a catch-all for any Input values not otherwise defined.

Output Values

Shows a column for each output component. A concatenation of the component's Property ID and the Type serves as the header for each column. Using first row onward, define the behavior based on the Type. For example, _visible: yes/no.

Validation Panel

A static image dispaying the Decisions component's Validation settings.
(click to expand image)

Unit Testing

The Unit Testing tool lets you test that your Decisions component works as expected. Enter the data you want to test in the Input table and the results of the test show in the Output table. This is a good way to catch logic errors early.

To get started, click Create Test to create a new test.

A static image of the Decisions Component's Unit Testing settings.

Setting

Description

Up Arrow Close/Down Arrow icon  Open Unit Testing

Collapses or opens the Unit Testing panel.

Refresh Fields

Updates all Input fields to reflect changes on the canvas.

Run All Tests

Runs all added tests with the Input values entered.

···

Additional Unit Testing settings.

Duplicate Icon Duplicate

Makes a copy of an existing test.

Trashcan icon Delete Test

Removes an existing test.

Run Test

Runs the test with the Input values entered.
Input Table

Use this table to enter the information you want to test. If you have multiple inputs and want to skip testing certain inputs, leave the Value column blank.

Input

Automatically populates all components listed in the Decisions component’s Inputs table.

Label

Automatically populates the label of the connected Input component.

Value

Enter example data in this column that you want to test.

NOTE  If you enter a JSON value with a syntax error (such as a missing bracket), the cell turns yellow, indicating an error scenario.

JSON

Select this checkbox when you enter a Value that's written in JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.. This can be an object, array, number, or Boolean (true/false) value.

Output Table

This table displays the results of your test.

Output

Automatically populates all components listed in the Decisions component's Outputs table.

Label

Automatically populates with the label of your connected Output component.

Expected

Enter the outcome you expect from the test you run. You can use this to compare the expected result with the actual result.

NOTE  This column is optional. If you leave it blank, the cell turns red when the unit test runs.

Actual

The result from the test you ran.

JSON

Select this checkbox when your result must display in JSON. This can be an array, string, or object.

After you create a unit test, test the decisions. The Unit Testing feature populates the Input, Label, and Output fields based on the configuration of your Decisions component. You only need to complete the Value and Expected fields. When you click Run Test, you can confirm the Expected results match the Actual results.

TIP  To learn more about the Testing Tool, view our Unqork Testing Tool article.

Advanced Panel

A static image dispaying the Decisions component's Advanced settings.
(click to expand image)

Setting

Description

Set Execution

Select if and what is executed when this component triggers.

Disable Execution

If Disable Execution is set to Toggle Button set to On (ON), the logic tied to this component does not execute. Use this to keep the component's settings, but to disable the operations it performs.

By default, Disable Execution is set to Toggle Button set to Off. (OFF).

Execute All Child Decisions

When set to Toggle Button set to On (ON), triggers all child Decisions associated with this Decisions component.

By default, Execute All Child Decisions is set to Toggle Button set to Off. (OFF).

Execute Decisions From Last To First

Reverses the trigger order of child decisions. When set to Toggle Button set to On (ON), child decisions trigger from last to first.

Set Debounce

The number of milliseconds that pass before the form loads this component. For larger modules, increasing the debounce value prevents the Decisions component from triggering before all components load in.

TIP  To learn about all of this component's settings, view our Decisions Component article in the Document Hub.

Adding a Decisions Component

In this scenario, you'll show a follow-up question when an end-user answers No to "Are you a citizen of the United States?" These instructions assume that you have an open module saved with a title.

In this configuration, you need the following components:

Configure the Radio Buttons Component

This component asks the end-user if they're a citizen of the United States. If the end-user answers Yes, this is the end of the process. If the end-user answers No, the process continues. This Radio Button is the input for your Decisions component's if/then rule.

1. Drag and drop a Radio Buttons icon Radio Buttons 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 citizenCheck.
3. In the Label Text field, enter Are you a citizen of the United States?.
4. Click Data Icon Data.
5. Complete the Values table as follows:
  Option Label Value to Store in Submission Data

1

Yes

yes

2

No

no

A static image displaying the Radio Button component configuration window, the Data panel is selected and the Values data table is filled out with Yes and No values.

6. From the component's configuration window, click Actions Icon Actions.
7. In the Trigger field, enter ruleCitizen. You'll set up this component in a later step.

A static image displaying the Radio component's configuration window, the Actions panel is selected, and the Trigger field is set to ruleCitizen.

8. Click Save & Close.

Configure the Text Field Component

This component stays hidden until the end-user answers No to the question. After selecting No, the Text Field displays, and the end-user can add their country of citizenship. This Text Field is the output for your Decisions component's if/then rule.

1. Drag and drop a  Text Field component onto your canvas, placing it below the citizenCheck Radio Buttons icon Radio Buttons 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 whatCountry.
3. In the Label Text field, enter If no, what country?.
4. Under Default State Options, set Hide Field to Toggle Button set to On (ON).

A static image dislaying the Text Field component's configuration window. The Display panel is selected and the Deault State Options section is shown. The Hide Field setting is toggled to ON.

5. Click Save & Close.

Configure the Decisions Component

Your Decisions component holds the logic behind your if/then rule. In this example, if the end-user selects No in the Radio Buttons component, then the Text Field component displays.

1. Drag and drop a Decisions Component icon Decisions component onto your canvas, placing it below the whatCountry  Text Field 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. and the Canvas Label Text fields, enter ruleCitizen.
3. Click Actions Icon Actions.
4. Complete the Inputs table as follows:
  Property ID Alias Type

1

areYouACitizen

 

exact

NOTE  Setting an output Type of exact lets you use exact values in the Micro Decisions table. Exact is a good option because there are only two possible values from the Radio Buttons component: yes and no.

5. Complete the Outputs table as follows:
  Property ID

Type

1

whatCountry

visible

NOTE  Setting an output Type of visible lets you hide or display the field referenced in the Property ID column. So, your Text Field displays or hides based on the end-user's Radio Buttons selection. You'll set this up in the Micro Decisions table.

6. Complete the Micro Decisions table as follows:
  Input Values Output Values
  citizenCheck whatCountry_visible

1

no

yes

2

 

no

A static image displaying the Decisions component's Actions settings, the Microdecisions table is highlighted and filled out.

7. Click Save & Close.
8. Save your module.

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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View, and test it out:

Resources