Web Controls Overview Web Controls Overview

Web Controls Overview

Adam Evans Adam Evans

Web controls are the basic building blocks used within web pages as UI components.  There are many different types of web controls however they all have some common attributes:

  • Effect the current page UI or functionality (most are visual but some act as containers or add invisible functionality to the web application)
  • Use properties to control their style and behavior
  • Are constructed in a "tree" structure that allows controls to contain children controls but always roll up to the page at the top level

 

Categories of Web Controls

Content & Interactive

Use cases here are straight forward - display information.  These controls can be simple labels or hyperlinks but can also be based on dynamic content to create personalized pages or list specific items from a customer or records from a database.  Here are some controls in this category:

 

Label - The most basic control to display text

Hyperlink - Display clickable text to open a new page outside of Airkit or download a file

Image - Display an image from your Media Library, content uploaded by a user or an external file

Map - Display a map of a single location, multiple locations or the user's current location (learn more)

Button - A button or link that navigates or performs and actions within Airkit's web flows

Progress Bar - Displays multi-step progress with dynamic updates, labels and step navigation

 

Form Fields and Input Capture

Use cases here are to capture information from a user and range from a standard form with text inputs and drop downs to more complex examples including credit card captures, scheduling, photo uploads from a mobile device and more.  Here are some controls in this category:

 

Simple Fields

Text Input - Simple text input to capture small amounts of text like first/last name or order identifiers

Text Area Input - A larger input area for larger amounts of text like comments or descriptions

Number Input - Capture numeric values from a user such as quantity, age or rating

Currency Input - Capture monetary values input by a user that are culture specific with proper formatting and precision

Phone Number Input - Capture phone numbers of a user with proper formatting, masking and auto-fill suggestion

Email Input - Capture an email address from a user with proper formatting, validation and auto-fill suggestion

Date Picker - An input that allows a user to enter in a date and use a calendar view to choose it

Secure Text Input - A special text input that bypasses client side state of the values stored and encrypts values for use cases with sensitive information such as credit card numbers, SSN and passwords

 

Option Based Fields

Drop Down List - Used to provide preset options (fixed or dynamic) to a user and allows selecting a single value

Radio Button List - Used to provide a list of options to a user that allow the user to select one option at a time (mutually exclusive options)

Check Box List - Used to provide a list of options to a user that allow the user to select multiple options by checking multiple boxes

Checkbox & Radio Button - Used a single checkable (checkbox) or clickable (radio button) elements to add into your form as needed.  Example include opt-in/acknowledgement stand alone check boxes.

 

Combined and Pre-Built Controls

Scheduler - Allow a user to pick a specific date and time that is available from a dynamically based availability model

Credit Card - Capture payment information from credit cards securely with standard fields

Plaid Integration - Capture bank account information with verification through Plaid

Payment Request Button - Request payment with ApplePay, Google Pay with a button

Place Search Input - Type ahead location input using Google's place APIs

Media Capture - Allow uploading photos and files from a users device

Signature Pad - Capture a users signature with their finger on mobile devices or typing for agreements

 

Containers & Layout

These controls are used as fundamental page building tools both to create alignment/position of all the other controls but also for templates used to display a list of records dynamically and can be nested within themselves as much as needed.  Learn more about how to use these controls for layout and dynamic templating with data.

 

Container - The building block that allow for controlling position & alignment of it's children controls

List - Use a template layout of children controls to display a dynamic list of items such as products, orders or input options with customized layout