Nov 01

 Widget Library

Here 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

 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.