DocumentationHere you will find a list of all Widgets available in the WaveMaker platform along with a brief description and links to detailed documents.
Data Widgets
| Widget | Description | Document | Reference |
|---|---|---|---|
| Cards is a single unit of content or functionality, presented in a concise visual package, to easily update, maintain, and personalize content area. | Overview | API Docs | |
| Data Table is a widget that presents a tabular view of data and allows actions. | Overview | API Docs | |
| Form is a group of input elements put together to post data, typically updating data through a web service call | Overview | API Docs | |
| List is a widget that presents a list view of data, which contains a template for designing each list item | Overview | API Docs | |
| Live Filter is a widget that allows user to filter the database results, usually used in combination with List or Data Table to display the filtered results | Overview | API Docs | |
| Live Form is a group of input elements put together to submit data, typically resulting in creating or updating a database row | Overview | API Docs |
Container Widgets
| Widget | Definition | Overview | API Reference |
|---|---|---|---|
| Accordion is a stacked list of UI components, with only one component expanded or viewed at any point in time, and the rest collapsed | Overview | API Docs | |
| Container is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages | Overview | API Docs | |
| Grid Layout helps division of pages or content area into cells or grids based on the 12-column fluid grid system, which helps in proper placement of the widgets for responsive design. | Overview | API Docs | |
| Panel has designated sections such as header, body, and footer and can be used to group a set of widgets together. | Overview | API Docs | |
| Tabs are Multiple UI components placed in a single window, with only one active component and headings allowing navigation to other components | Overview | API Docs | |
| Tile is a form of UI components to group a set of widgets together and to apply a uniform style to the content | Overview | API Docs | |
| Wizard is a form of UI components to group a set of widgets together and to apply a uniform style to the content | Overview | API Docs |
Form Widgets
| Widget | Description | Overview | Reference |
|---|---|---|---|
| Button is a control that can be clicked to perform an action. | Overview | API Docs | |
| Button Group is the arrangement of buttons grouped together. | Overview | API Docs | |
| Calendar widget allows the user to select a date from the calendar displayed. | Overview | API Docs | |
| Checkbox allows the user to choose one or multiple of a predefined set of options. | Overview | API Docs | |
| CheckboxSet is the arrangement of checkbox widgets grouped together. | Overview | API Docs | |
| Chips allow user to search data and add, delete and edit the same. | Overview | API Docs | |
| Color Picker widget is to select the color and translate to a hex value. | Overview | API Docs | |
| Currency is a special text widget to input the currency type data, with the display format based on the currency type. | Overview | API Docs | |
| Date widget helps to select a date from a calendar within the date range. | Overview | API Docs | |
| Datetime is a composite widget of date and time widgets. | Overview | API Docs | |
| FileUpload is a widget that pops up a file browsing window to select files and upload. | Overview | API Docs | |
| Number allows input of a number. It works with the selected app Locale and displays the number localized format. | Overview | API Docs | |
| Radioset is the arrangement of radio widgets grouped together. | Overview | API Docs | |
| Rating Widget allows users to input ratings as data. | Overview | API Docs | |
| Select provides a drop-down list that with a list of items a user can select from. | Overview | API Docs | |
| Select Locale Widget is for Language selection from the list of support languages. | Overview | API Docs | |
| Slider is a widget control with a handle that can be moved right and left (horizontal slider) on a bar to select a value from within the range of allowed values. | Overview | API Docs | |
| Switch widget can help switching between 3 or more different options by pressing a single key. | Overview | API Docs | |
| Text allows input of a single line of text. | Overview | API Docs | |
| Textarea allows for multiple rows of data to be shown and entered. | Overview | API Docs | |
| Time widget helps to select a time from within a specified time range. | Overview | API Docs | |
| Toggle is a widget that can help switching between two different options by pressing a single key. | Overview | API Docs |
Basic Widgets
| Widget | Description | Overview | Reference |
|---|---|---|---|
| Anchor is used as a navigation link within the app or an external URL. | Overview | API Docs | |
| Audio widget is to embed an audio player into the project. | Overview | API Docs | |
| HTML is a widget to display HTML content or to render the text content using HTML. | Overview | API Docs | |
| Icon widget is for displaying a comprehensible symbol or graphic. | Overview | API Docs | |
| Iframe is a widget to display a web page content in a separate frame, without affecting the current page content or styles. | Overview | API Docs | |
| Label is a uneditable text as a heading or to describe another widget. | Overview | API Docs | |
| Message is a widget to display success, info, loading, error or warning messages to the user. | Overview | API Docs | |
| Picture is a widget to display images in the project. | Overview | API Docs | |
| Progress Bar is an actual indicator of activity progress with time/percentage. | Overview | API Docs | |
| Richtext Editor is an input control for formatted text content, optionally including media (WYSIWYG). | Overview | API Docs | |
| Search within a data source and give results. | Overview | Reference | |
| Spinner is a widget for a visual indicator of activity in progress. | Overview | API Docs | |
| Tree widget can be used to display data in a hierarchical format. | Overview | API Docs | |
| Video is a widget to embed a media player into the project. | Overview | API Docs |
Chart Widgets
There are marginal differences in the various usage scenarios for the various chart types, which is highlighted in the overview and API documentation.
| Widget | Description |
|---|---|
| Line chart displays information as a series of data points called ‘markers’ connected by straight line segments. | |
| Column charts display vertical bars going across the horizontal axis. | |
| Area chart is a line chart with the areas below the lines filled. | |
| Pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole. | |
| Bar chart presents grouped data with horizontal bars with lengths proportional to the values that they represent. | |
| Cumulative Line is a line chart displays information as a series of data points, each data point is a cumulative sum of the data points of the preceding series. | |
| Donut is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole, with an inner circle showing summary. | |
| Bubble chart is a type of chart that displays three dimensions of data. |
Navigation Widgets
| Widget | Description | Overview | Reference |
|---|---|---|---|
| Breadcrumb is an indicator or nav link to the current page’s location within the app’s hierarchy. | Overview | API Docs | |
| Dropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links. | Overview | API Docs | |
| Nav widget represents navigation link or anchor, typically used for building navigation for multi-page apps. | Overview | API Docs | |
| Nav Bar is a grouping of nav widgets for navigation capabilities. | Overview | API Docs | |
| Popover is a container-type graphical control element that opens in its parent window and blocks any other interaction until selected. | Overview | API Docs |
Advanced Widgets
| Widget | Description | Overview | Reference |
|---|---|---|---|
| Carousel displays two or more items either images, text or any content, that transitions in a cyclic order. | Overview | API Docs | |
| Login is used for taking credentials for authentication, embedded within a page. | Overview | API Docs | |
| Marquee is a container to keep scrolling content. The scrolling can be in horizontal or in the vertical direction. | Overview | API Docs |
Modal Dialog/ Dialog Widgets
| Widget | Description | Overview | Reference |
|---|---|---|---|
| Alert Dialog is a special dialog that is displayed when the user needs to take an immediate action. | Overview | API Docs | |
| Confirm Dialog gives a special dialog box that is displayed which requires user’s consent to complete the action. | Overview | API Docs | |
| Design Dialog gives a small window that communicates information to the user and prompts them for a response. The content of the dialog is customizable. | Overview | API Docs | |
| Iframe Dialog is a dialog box that loads an external webpage. | Overview | API Docs | |
| Page Dialog is a dialog box that loads the partial page content. | Overview | API Docs | |
| Login Dialog is a dialog box that allows you to customize the login dialog. | Overview | API Docs |
Prefabs – Custom Widgets & Extensions
For an overview on Prefabs and how you can create Prefabs see here.
| Widget | Description | Document | Reference |
|---|---|---|---|
 |
The YouTube prefab connects with YouTube and displays a video on the web page. | Overview | |
 |
The Googlemaps prefab connects with Google Maps and displays the map on your page. | Overview | |
 |
This Prefab is no longer available from version 10. | ||
 |
QRCode prefab that ships with WaveMaker can be used to add any text or url to your app in the QRCode format. | Overview | |
| OAuth Prefabs | |||
 |
Use this Prefab to enable user authorization using their Box credentials. | Overview | |
 |
Use this Prefab to enable user authorization using their FaceBook credentials. | Overview | |
 |
Use this Prefab to enable user authorization using their Google credentials. | Overview | |
 |
Use this Prefab to enable user authorization using their Instagram credentials. | Overview | |
 |
Use this Prefab to enable user authorization using their LinkedIn credentials. | Overview | |
Mobile & Device Widgets
| Widget | Description | Document | Reference |
|---|---|---|---|
| Media List displays a list of pictures. The media can be displayed in a single-row mode or grid mode and can be opened to full screen by touching the media. | Overview | API Docs | |
| Segmented Control group of buttons to toggle Segmented Content containing the page content. | Overview | API Docs | |
| Barcode scanner can be used for scanning barcode. | Overview | API Docs | |
| Camera can be used to access the device camera for taking pictures and videos. | Overview | API Docs |
3. UI Elements – Widgets & Prefabs
Comments are closed.