Button Component

Estimated Reading Time:  10 minutes

Overview

The Button component adds an interactive, clickable element to your module. Buttons allow end-user End-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; 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 Editor.

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

Once you drop a component onto the Module Editor canvas, the following settings windows display: 

General

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.
Notes	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	Select this tab to manage your component's display settings.
Actions	Select this tab to manage your component's actions settings.
Advanced	Select this tab to manage your component's advanced settings.
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 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	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), 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)/  (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.
Documentation	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

(click to expand image)

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 Editor. 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 look and feel; there's no effect on the Button's function. Button Width A choice chip showing the following options: Fixed: The Button's width adjusts based on the length of its Label Text. Block: The Button's width is the full width of the page or column, with the Label Text centered. 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).

Actions Panel

(click to expand image)

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.

NOTE  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.

TIP  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 Setting Description Step Path Displays when selecting the Go to Action Type, under the Workflow Element Type. 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 Setting Description Before Save Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves. After Save Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves. Before Validation Enter the Property ID of the component that you want to trigger on Button-click, but before the validation of the submission. For Valid Form Enter the Property ID of the component that you want to trigger after successful validation. For Invalid Form Enter the Property ID of the component that you want to trigger after validation errors. On Click Enter the Property ID of the component that you want to trigger on each button-click.

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

(click to expand image)

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. Use custom CSS to maintain a consistent look and feel if the field or element is part of a template or more than one module. 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.

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.

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 Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter the following:

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.

6.

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).

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 sharing 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 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. You'll see the following functionality:

Resources

• Modify the Button component using the toolbar settings.

• Additional Secondary Field Components.

• Triggering Decisions with Buttons.

• Creating Custom Navigation Buttons.

• Triggering Initializers with Buttons.

• Triggering Multiple Components Using a Single Button.