Button Component
Overview
The Button component adds an interactive, clickable element to your module. Buttons allow 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.s to perform actions and make choices with a single button-click. As a creator Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform., you can use Buttons to set custom actions or process flows based on your end-user's choices.
You'll find the component under the Secondary Fields group to the left of the Module Builder.
About the Configuration Window
To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
Field Text
|
Setting |
Description |
|---|---|
|
Label Text |
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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. |
Default State Options
|
Setting |
Description |
|---|---|
|
Disable User Input |
Stops the end-user from using the button. Your end-user sees the display as grayed out and the button as unclickable. By default, the Disable Button toggle is set to (OFF). |
|
Hide Field |
Displays or hides the Button from view. Setting the Hide Button toggle to ON hides the Button in Express View. Setting the toggle back to (OFF) unhides the Button. The component will always remain visible in the Module Builder. By default, the Hide Button toggle is set to (OFF). |
Formatting
|
Setting |
Description |
|---|---|
|
Button Style |
Sets the visual appearance of the Button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button's appearance and does not effect its function. |
|
Button Width |
A choice chip showing the following options:
|
|
Restrict to Single Click |
When set to (ON), the Button becomes disabled after one click. This feature helps end-users avoid triggering the Button's action more than once (or button-mashing). If you need to re-enable a disabled button, you can do so using a logic component. To re-enable, set up a logic component, like an Initializer, to send a disabled value of no to your Button component. This can be helpful if the action your Button triggers fails. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Restrict to Single Click option applies to every button-click, whether you create a submission or not. By default, the Restrict to Single Click toggle is set to (OFF). |
Fixed: The Button's width adjusts based on the length of its Label Text.Actions Panel
Triggers
|
Setting |
Description |
|---|---|
|
Element Type |
This setting provides the following options:
Custom navigation buttons only display on the module they're added to. If your workflow has several Screen/Task nodes, you need to add custom navigation buttons to each module linked to a Screen/Task node. Or, you can add custom navigation buttons to select pages of your workflow. When adding custom navigation Buttons to a workflow, disable the default navigation buttons. This avoids displaying two sets of navigation buttons. Set the Hide Express Navigation Buttons toggle to (ON) for the Screen/Task node linked to your module. |
|
Action Type |
The Action Type setting varies based on the chosen Element Type. See the Action Type Triggers (Module) or Action Type Triggers (Workflow) tables for additional information and available triggers. |
|
Post Trigger |
The Property ID of the component that triggers after all the outputs are set. |
Action Type Triggers (Module)
Action Type Triggers for module include Save, Save Draft, Event, Validate, and Reset. Each Module Action Type contains a unique set of trigger options.
|
Setting |
Description |
|---|---|
|
Save |
Saves, validates, and creates a submission to the database. Triggers include:
|
|
Save Draft |
Saves and creates a submission to the database but doesn't validate the page's information. Triggers include:
|
|
Event |
Trigger an event by specifying a Property ID in a Trigger field. Or, lets you create an Event ID to reference in another component to trigger that component on button-click. Triggers include:
|
|
Validate |
Validates the information on the page but doesn't create a submission. Triggers include:
|
|
Reset |
Clears data and resets the Disabled, Hidden, and Required settings for all components in the module. This setting is similar to using the Reset and Clear Output Types together in a logic component. Triggers include:
|
Action Type Triggers (Workflow)
Action Types for workflows include Next, Previous, and Go To. Each Workflow Action Type contains a unique set of trigger options.
|
Setting |
Description |
|---|---|
|
Next |
Takes the end-user to the next step in your workflow. Triggers include:
|
|
Previous |
Takes the end-user to the previous step in your workflow. Triggers include:
|
|
Go to |
Takes the end-user to the step specified in the Step Path* field. Enter the Path of the workflow step where you want your button to lead. When your end-user clicks this button, they'll go to that step. Triggers include:
*You must assign a Step Path to use the Go To Action Type. |
User Feedback
|
Setting |
Description |
|---|---|
|
Hide Success Message |
Displays or hides a success message on successful submission, validation, or saving of a draft. Setting the Hide Success Message toggle to (ON) hides the success message. By default, the Hide Success Message toggle is set to (OFF). |
|
Success Message |
Enter a custom success message to display on successful submission, validation, or saving of a draft. |
|
Click Event |
Displays when selecting the Event Action Type under the Module Element Type. Enter an Event ID to assign the Button's designated event. You can then reference this Event ID in other components. |
Error Message
|
Setting |
Description |
|---|---|
|
Hide Error Message |
Displays or hides an error message on successful submission, validation, or saving of a draft. Setting the Hide Error Message toggle to (ON) hides the error message. By default, the Hide Error Message toggle is set to (OFF). |
|
Error Title |
Enter a title for the error message to display when there are validation issues. |
|
Error Message |
Enter a custom error message to display when there are validation issues. |
Advanced Panel
Additional Display Options
|
Setting |
Description |
|---|---|
|
Display Dialog on Click |
Displays or hides a confirmation dialog on button-click. The confirmation dialog also allows end-users to confirm their intention to complete the Button's associated action. Setting the toggle to (ON) shows the confirmation dialog. By default, the Display Dialog on Click toggle is set to (OFF). |
|
Dialog Heading |
Enter a title for the confirmation dialog to display on button-click. |
|
Dialog Message |
Enter a custom message for the confirmation dialog to display on button-click. |
|
Button Label for Dismiss |
Enter a Label for the Button to dismiss the dialog message. Actions associated with the button-click will not continue. |
|
Button Label for Confirm |
Enter a Label for the Button to confirm understanding of the dialog message. Actions associated with the button-click will continue. |
|
Prevent Disabling on Submission |
When set to (ON), the Button won't disable even if your end-user submits their application using the Enter/Return key. If your end-user presses the Enter/Return key by accident. it could prevent a successful submission. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Prevent Disabling on Submission setting only applies when your end-user creates a submission. By default, the Prevent Disabling on Submission toggle is set to (OFF). |
|
Disable on Invalid Forms |
When set to (ON), end-users are prevented from clicking the button when the form is invalid. When end-users meet all validation requirements, the button becomes clickable. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Disable on Invalid Forms setting only applies when your end-user hasn't met the validation requirements set up in your module. By default, the Disable on Invalid Forms toggle is set to (OFF). |
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Styling |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
|
Left/Right Icon |
Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. The full list of supported GLYPHICONS® glyph codes is available here: https://getbootstrap.com/docs/3.3/components/. |
Adding a Button Component
As an example, let's create a simple information intake module with a Save-action button. We'll customize the appearance of the Button component by adding an icon to it. We'll also set a custom confirmation dialog.
Configure the Columns Component
The 
Columns component helps organize your module.
| 1. | Drag and drop a Columns 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 columns. |
| 3. | Under Formatting, click the icon displaying  (two) evenly-spaced columns. |
| 4. | Click Save Component. |
Configure the Text Field Components
Start the configuration with two Text Field components to capture the end-user's first and last names. By placing the Text Field components in the Columns component, the fields will appear next to each other.
| 1. | Drag and drop two  Text Field components onto your canvas. Place one component in each column of your columns Columns component. |
| Property ID | Label Text |
|---|---|
|
firstName |
First Name |
|
lastName |
Last Name |
| 3. | Click Save Component for each component as you complete it. |
Configure the Email Component
Next, an 
Email component collects the end-user's email address.
| 1. | Drag and drop an Email component onto your canvas, placing it in the first column of the columns Columns component, below the firstName 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. field, enter emailAddress. |
| 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 Address. |
| 4. | Click Save Component. |
Configure the Phone Number Component
Use a dedicated 
Phone Number component to collect the end-user's phone number.
| 1. | Drag and drop a Phone Number component onto your canvas, placing it in the first column of the columns Columns component, below the emailAddress 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 phoneNumber. |
| 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 Phone Number. |
| 4. | Click Save Component. |
Configure the Button Component
The 
Button component saves and creates a submission with the information on the page. After you customize your button's appearance, ask the end-user for permission to contact them.
| 1. | Drag and drop a Button component onto your canvas, placing it in the first column of the columns Columns component, below the phoneNumber Phone Number 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 btnSave. |
| 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 Save. |
| 4. | Navigate to the Button component's Advanced settings. |
| 5. | Under Additional Display Options, set the Display Dialog on Click Displays or hides a confirmation dialog on button-click. The confirmation dialog also allows end-users to confirm their intention to complete the Button's associated action. toggle to (ON). |
| 6. | In the Dialog Heading Enter a title for the confirmation dialog to display on button-click. field, enter Please read and confirm. |
| 7. | In the Dialog Message Display Dialog on Click field, enter I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me.. |
| 8. | In the Button Label for Dismiss Enter a Label for the Button to dismiss the dialog message. Actions associated with the button-click will not continue. field, enter No, cancel. |
| 9. | In the Button Label for Confirm Enter a Label for the Button to confirm understanding of the dialog message. Actions associated with the button-click will continue. field, enter OK, continue. |
| 10. | Under Additional Styling, in the Right Icon Use this field to add icons (glyphs) to the right of your Button's Label Text. field, enter glyphicon glyphicon-ok-sign. This adds a checkmark icon to your button. |
| 11. | Click Save Component. |
| 12. | Save your module. |
Preview your module in Express View Express View is how your end-user views your 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.. You'll see the following functionality:
Resources
Overview
The Button component adds an interactive, clickable element to your module. Buttons allow 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.s to perform actions and make choices with a single button-click. As a creator Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform., you can use Buttons to set custom actions or process flows based on your end-user's choices.
Some ways you might use the Button component include:
-
Saving, submitting, validating, or resetting a module.
-
Triggering another component, such as an Initializer, Decisions, or Data Workflow component.
-
Navigating between Panels.
-
Downloading a Managed Asset, such as a PDF or CSV file.
-
Labeling the Button-click event by giving it an Event ID. After setup, you can then reference that Event ID in different components, allowing you to create more complex logic-based configurations. For example, triggering several different components with a single button-click Event ID.
-
Using the Workflow Element Type, adding custom navigation buttons to a workflow.
You'll find the component under the Secondary Fields group to the left of the Module Builder.
What You'll Learn
After completing this article, you’ll know when to use a Button component, how to configure its settings, and how to use it in an Unqork application.
About the Configuration Window
To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
Field Text
Default State Options
|
Formatting
|
Actions Panel
Element Type
A choice chip displaying the following options:
Module
Used for adding interactive buttons to a module.
Workflow
Used for adding custom navigation buttons to a module that's part of a workflow. Buttons added here replace the workflow's default navigation buttons.
Custom navigation buttons only display on the module they're added to. If your workflow has several Screen/Task nodes, you need to add custom navigation buttons to each module linked to a Screen/Task node. Or, you can add custom navigation buttons to select pages of your workflow.
When adding custom navigation Buttons to a workflow, disable the default navigation buttons. This avoids displaying two sets of navigation buttons. Set the Hide Express Navigation Buttons toggle to (ON) for the Screen/Task node linked to your module.
Action Type
The Action Type choice chip varies based on the selected Element Type.
For the Module Element Type, the choice chip displays the following button-click actions:
|
Actions |
Description |
|---|---|
|
Save |
Saves, validates, and creates a submission to the database. |
|
Save Draft |
Saves and creates a submission to the database but doesn't validate the page's information. |
|
Event |
Trigger an event by specifying a Property ID in a Trigger field. Or, lets you create an Event ID to reference in another component to trigger that component on button-click. |
|
Validate |
Validates the information on the page but doesn't create a submission. |
|
Reset |
Clears data and resets the Disabled, Hidden, and Required settings for all components in the module. This setting is similar to using the Reset and Clear Output Types together in a logic component. |
For the Workflow Element Type, the choice chip displays the following button-click actions:
|
Actions |
Description |
|---|---|
|
Next |
Takes your end-user to the next step in your workflow. |
|
Previous |
Takes your end-user to the previous step in your workflow. |
|
Go to |
Takes your end-user to the specified step in your workflow. You'll enter the appropriate step in the Step Path field. |
Workflow
Triggers
|
User Feedback
Error Message
|
Advanced Panel
Additional Display Options
|
Additional Styling
|
Adding a Button Component
As an example, let's create a simple information intake module with a Save-action button. We'll customize the appearance of the Button component by adding an icon to it. We'll also set a custom confirmation dialog.
What You Need
For this configuration, you'll need the following components:
-
1 Columns component
-
2 Text Field components
-
1 Email component
-
1 Phone Number component
-
1 Button component
Configure the Columns Component
The Columns component helps organize your module.
| 1. | Drag and drop a Columns 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 columns. |
| 3. | Under Formatting, click the icon displaying (two) evenly-spaced columns. |
| 4. | Click Save & Close. |
Configure the Text Field Components
Start the configuration with two Text Field components to capture the end-user's first and last names. By placing the Text Field components in the Columns component, the fields will appear next to each other.
| 1. | Drag and drop two Text Field components onto your canvas. Place one component in each column of your columns Columns component. |
| Property ID | Label Text |
|---|---|
|
firstName |
First Name |
|
lastName |
Last Name |
| 3. | Save & Close each component as you add it. |
Configure the Email Component
Next, an Email component collects the end-user's email address.
| 1. | Drag and drop an Email component onto your canvas, placing it in the first column of the columns Columns component, below the Text Field components. |
| 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 emailAddress. |
| 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 Address. |
| 4. | Click Save & Close. |
Configure the Phone Number Component
Use a dedicated Phone Number component to collect the end-user's phone number.
| 1. | Drag and drop a Phone Number component onto your canvas, placing it in the first column of the columns Columns component, below the 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 phoneNumber. |
| 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 Phone Number. |
| 4. | Click Save & Close. |
Configure the Button Component
The Button component saves and creates a submission with the information on the page. After you customize your button's appearance, ask the end-user for permission to contact them.
| 1. | Drag and drop a Button component onto your canvas, placing it in the first column of the columns Columns component, below the phoneNumber Phone Number 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 btnSave. |
| 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 Save. |
| 4. | Set the Action Type The action performed by the button when selected. to Save. |
| 5. | In the Advanced Settings Right Icon Use this field to add icons (glyphs) to the right of your Button's Label Text. field, enter glyphicon glyphicon-ok-sign. Entering this adds a checkmark icon to your button. |
(| 7. | In the Dialog Heading Enter a title for the confirmation dialog to display on button-click. field, enter Please read and confirm. |
| 8. | In the Dialog Message Display Dialog on Click field, enter I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me.. |
| 9. | In the Button Label for Dismiss Enter a Label for the Button to dismiss the dialog message. Actions associated with the button-click will not continue. field, enter No, cancel. |
| 10. | In the Button Label for Confirm Enter a Label for the Button to confirm understanding of the dialog message. Actions associated with the button-click will continue. field, enter OK, continue. |
| 11. | Click Save & Close. |
| 12. | Save your module. |
Preview your module in Express View Express View is how your end-user views your 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.. You'll see the following functionality:
Resources
