Widgets Library
Widgets are HTML/Bootstrap based UI components with rich interaction and designed for responsiveness. View the entire list of Widgets in this page.
note
Pages are designed as a composition of widgets. See Design Pages and learn about widgets workflow. For more information, see Widgets Overview.
Data Widgets
Cards is a single unit of content or functionality, presented in a concise visual package, to easily update, maintain, and personalize content area.
Data Table is a widget that presents a tabular view of data and allows actions.
Form is a group of input elements put together to post data, typically updating data through a web service call
List is a widget that presents a list view of data, which contains a template for designing each list item
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
Live Form is a group of input elements put together to submit data, typically resulting in creating or updating a database row
Container Widgets
Accordion is a stacked list of UI components, with only one component expanded or viewed at any point in time, and the rest collapsed
Container is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages
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.
Panel has designated sections such as header, body, and footer and can be used to group a set of widgets together.
Tabs are Multiple UI components placed in a single window, with only one active component and headings allowing navigation to other components
Tile is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Wizard is a form of UI components to group a set of widgets together and to apply a uniform style to the content
Form Widgets
Button is a control that can be clicked to perform an action.
Button Group is the arrangement of buttons grouped together.
Calendar widget allows the user to select a date from the calendar displayed.
Checkbox allows the user to choose one or multiple of a predefined set of options.
CheckboxSet is the arrangement of checkbox widgets grouped together.
Chips allow user to search data and add, delete and edit the same.
Color Picker widget is to select the color and translate to a hex value.
Currency is a special text widget to input the currency type data, with the display format based on the currency type.
Date widget helps to select a date from a calendar within the date range.
Datetime is a composite widget of date and time widgets.
FileUpload is a widget that pops up a file browsing window to select files and upload.
Number allows input of a number. It works with the selected app Locale and displays the number localized format.
Radioset is the arrangement of radio widgets grouped together.
Rating Widget allows users to input ratings as data.
Select provides a drop-down list that with a list of items a user can select from.
Select Locale Widget is for Language selection from the list of support languages.
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.
Switch widget can help switching between 3 or more different options by pressing a single key.
Text allows input of a single line of text.
Textarea allows for multiple rows of data to be shown and entered.
Time widget helps to select a time from within a specified time range.
Toggle is a widget that can help switching between two different options by pressing a single key.
Basic Widgets
Anchor is used as a navigation link within the app or an external URL.
Audio widget is to embed an audio player into the project.
HTML is a widget to display HTML content or to render the text content using HTML.
Icon widget is for displaying a comprehensible symbol or graphic.
Iframe is a widget to display a web page content in a separate frame, without affecting the current page content or styles.
Label is a uneditable text as a heading or to describe another widget.
Message is a widget to display success, info, loading, error or warning messages to the user.
Picture is a widget to display images in the project.
Progress Bar is an actual indicator of activity progress with time/percentage.
Richtext Editor is an input control for formatted text content, optionally including media (WYSIWYG).
Search within a data source and give results.
Spinner is a widget for a visual indicator of activity in progress.
Tree widget can be used to display data in a hierarchical format.
Video is a widget to embed a media player into the project.
Chart Widgets
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
Breadcrumb is an indicator or nav link to the current page"s location within the app"s hierarchy.
Dropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links.
Nav widget represents navigation link or anchor, typically used for building navigation for multi-page apps.
Nav Bar is a grouping of nav widgets for navigation capabilities.
Popover is a container-type graphical control element that opens in its parent window and blocks any other interaction until selected.
Advanced Widgets
Carousel displays two or more items either images, text or any content, that transitions in a cyclic order.
Login is used for taking credentials for authentication, embedded within a page.
Marquee is a container to keep scrolling content. The scrolling can be in horizontal or in the vertical direction.
Modal Dialog/Dialog Widgets
Alert Dialog is a special dialog that is displayed when the user needs to take an immediate action.
Confirm Dialog gives a special dialog box that is displayed which requires user’s consent to complete the action.
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.
Iframe Dialog is a dialog box that loads an external webpage.
Page Dialog is a dialog box that loads the partial page content.
Login Dialog is a dialog box that allows you to customize the login dialog.
Prefabs - Custom Widgets & Extensions
The YouTube prefab connects with YouTube and displays a video on the web page.
The Googlemaps prefab connects with Google Maps and displays the map on your page.
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.
Use this Prefab to enable user authorization using their Box credentials.
Use this Prefab to enable user authorization using their FaceBook credentials.
Use this Prefab to enable user authorization using their Google credentials.
Use this Prefab to enable user authorization using their Instagram credentials.
Use this Prefab to enable user authorization using their LinkedIn credentials.
Mobile & Device Widgets
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.
Segmented Control group of buttons to toggle Segmented Content containing the page content.
Barcode scanner can be used for scanning barcode.
Camera can be used to access the device camera for taking pictures and videos.