Web Controls Overview
Last updated
Was this helpful?
17.14
Last updated
Was this helpful?
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
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:
- The most basic control to display text
- Display clickable text to open a new page outside of Airkit or download a file
- Display an image from your , content or an external file
- Display a map of a single location, multiple locations or the user's current location ()
- A button or link that navigates or performs and actions within Airkit's web flows
- Displays multi-step progress with dynamic updates, labels and step navigation
Simple Fields
Option Based Fields
Combined and Pre-Built Controls
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.
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 , , from a mobile device and more. Here are some controls in this category:
- Simple text input to capture small amounts of text like first/last name or order identifiers
- A larger input area for larger amounts of text like comments or descriptions
- Capture numeric values from a user such as quantity, age or rating
- Capture monetary values input by a user that are culture specific with proper formatting and precision
- Capture phone numbers of a user with proper formatting, masking and auto-fill suggestion
- Capture an email address from a user with proper formatting, validation and auto-fill suggestion
- An input that allows a user to enter in a date and use a calendar view to choose it
- 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
- Used to provide preset options (fixed or dynamic) to a user and allows selecting a single value
- Used to provide a list of options to a user that allow the user to select one option at a time (mutually exclusive options)
- Used to provide a list of options to a user that allow the user to select multiple options by checking multiple boxes
& - 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.
- Allow a user to pick a specific date and time that is available from a dynamically based availability model
- Capture payment information from credit cards securely with standard fields
- Capture bank account information with verification through Plaid
- Request payment with ApplePay, Google Pay with a button
- Type ahead location input using Google's place APIs
- Allow uploading photos and files from a users device
- Capture a users signature with their finger on mobile devices or typing for agreements
- The building block that allow for controlling position & alignment of it's children controls
- Use a template layout of children controls to display a dynamic list of items such as products, orders or input options with customized layout
- Prompts users to select file(s) to upload. This Web Control doesn't have a default appearance: the styling is entirely customizable, with other Web Controls used as component parts. It also doesn't come with automatic input binding: rather than maintaining a variable that contains uploaded an , it triggers with associated values related to the file's upload progress.