Skip to main content
Version: v10.15

Widgets & Prefabs

Find everything about Widgets and Prefabs. Navigate to Widgets' list below and access relative docs and API docs.


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 before getting started with widgets.

tip

To learn about widgets workflow, see Widgets Overview.

Data Widgets


WidgetDescriptionDocumentReference
CardsCards is a single unit of content or functionality, presented in a concise visual package, to easily update, maintain, and personalize content area.OverviewAPI Docs
Data TableData Table is a widget that presents a tabular view of data and allows actions.OverviewAPI Docs
FormForm is a group of input elements put together to post data, typically updating data through a web service callOverviewAPI Docs
ListList is a widget that presents a list view of data, which contains a template for designing each list itemOverviewAPI Docs
Live FilterLive 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 resultsOverviewAPI Docs
Live FormLive Form is a group of input elements put together to submit data, typically resulting in creating or updating a database rowOverviewAPI Docs

Container Widgets


WidgetDefinitionOverviewAPI Reference
AccordionAccordion is a stacked list of UI components, with only one component expanded or viewed at any point in time, and the rest collapsed OverviewAPI Docs
ContainerContainer is an enclosing element that wraps the widgets placed within, mostly used for embedding partial pages OverviewAPI Docs
Grid LayoutGrid 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.OverviewAPI Docs
PanelPanel has designated sections such as header, body, and footer and can be used to group a set of widgets together.OverviewAPI Docs
TabsTabs are Multiple UI components placed in a single window, with only one active component and headings allowing navigation to other components OverviewAPI Docs
TileTile is a form of UI components to group a set of widgets together and to apply a uniform style to the content OverviewAPI Docs
WizardWizard is a form of UI components to group a set of widgets together and to apply a uniform style to the content OverviewAPI Docs

Form Widgets


WidgetDescriptionOverviewReference
ButtonButton is a control that can be clicked to perform an action. OverviewAPI Docs
*Button GroupButton Group is the arrangement of buttons grouped together. OverviewAPI Docs
CalendarCalendar widget allows the user to select a date from the calendar displayed. OverviewAPI Docs
CheckboxCheckbox allows the user to choose one or multiple of a predefined set of options.OverviewAPI Docs
CheckboxSetCheckboxSet is the arrangement of checkbox widgets grouped together.OverviewAPI Docs
ChipsChips allow user to search data and add, delete and edit the same.OverviewAPI Docs
Color PickerColor Picker widget is to select the color and translate to a hex value. OverviewAPI Docs
CurrencyCurrency is a special text widget to input the currency type data, with the display format based on the currency type. OverviewAPI Docs
DateDate widget helps to select a date from a calendar within the date range.OverviewAPI Docs
DatetimeDatetime is a composite widget of date and time widgets.OverviewAPI Docs
FileUploadFileUpload is a widget that pops up a file browsing window to select files and upload.OverviewAPI Docs
NumberNumber allows input of a number. It works with the selected app Locale and displays the number localized format. OverviewAPI Docs
RadiosetRadioset is the arrangement of radio widgets grouped together.OverviewAPI Docs
RatingRating Widget allows users to input ratings as data. OverviewAPI Docs
SelectSelect provides a drop-down list that with a list of items a user can select from.OverviewAPI Docs
Select LocaleSelect Locale Widget is for Language selection from the list of support languages. OverviewAPI Docs
SliderSlider 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. OverviewAPI Docs
SwitchSwitch widget can help switching between 3 or more different options by pressing a single key. OverviewAPI Docs
TextText allows input of a single line of text. OverviewAPI Docs
TextareaTextarea allows for multiple rows of data to be shown and entered. OverviewAPI Docs
TimeTime widget helps to select a time from within a specified time range.OverviewAPI Docs
ToggleToggle is a widget that can help switching between two different options by pressing a single key. OverviewAPI Docs

Basic Widgets


WidgetDescriptionOverviewReference
AnchorAnchor is used as a navigation link within the app or an external URL. OverviewAPI Docs
AudioAudio widget is to embed an audio player into the project.OverviewAPI Docs
HTMLHTML is a widget to display HTML content or to render the text content using HTML.OverviewAPI Docs
IconIcon widget is for displaying a comprehensible symbol or graphic.OverviewAPI Docs
IframeIframe is a widget to display a web page content in a separate frame, without affecting the current page content or styles. OverviewAPI Docs
LabelLabel is a uneditable text as a heading or to describe another widget. OverviewAPI Docs
MessageMessage is a widget to display success, info, loading, error or warning messages to the user. OverviewAPI Docs
PicturePicture is a widget to display images in the project.OverviewAPI Docs
Progress BarProgress Bar is an actual indicator of activity progress with time/percentage. OverviewAPI Docs
Richtext EditorRichtext Editor is an input control for formatted text content, optionally including media (WYSIWYG). OverviewAPI Docs
SearchSearch within a data source and give results.OverviewReference
SpinnerSpinner is a widget for a visual indicator of activity in progress. OverviewAPI Docs
TreeTree widget can be used to display data in a hierarchical format.OverviewAPI Docs
VideoVideo is a widget to embed a media player into the project.OverviewAPI 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.

WidgetDescription
LineLine chart displays information as a series of data points called 'markers' connected by straight line segments.
ColumnColumn charts display vertical bars going across the horizontal axis.
AreaArea chart is a line chart with the areas below the lines filled.
PiePie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole.
BarBar chart presents grouped data with horizontal bars with lengths proportional to the values that they represent.
Cumulative 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.
DonutDonut 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.
BubbleBubble chart is a type of chart that displays three dimensions of data.

WidgetDescriptionOverviewReference
BreadcrumbBreadcrumb is an indicator or nav link to the current page's location within the app's hierarchy.OverviewAPI Docs
Dropdown MenuDropdown Menu is a pull-down menu interface used for defining navigation structure within the app or for external links.OverviewAPI Docs
NavNav widget represents navigation link or anchor, typically used for building navigation for multi-page apps. OverviewAPI Docs
Nav BarNav Bar is a grouping of nav widgets for navigation capabilities. OverviewAPI Docs
PopoverPopover is a container-type graphical control element that opens in its parent window and blocks any other interaction until selected.OverviewAPI Docs

Advanced Widgets


WidgetDescriptionOverviewReference
CarouselCarousel displays two or more items either images, text or any content, that transitions in a cyclic order. OverviewAPI Docs
LoginLogin is used for taking credentials for authentication, embedded within a page. OverviewAPI Docs
MarqueeMarquee is a container to keep scrolling content. The scrolling can be in horizontal or in the vertical direction. OverviewAPI Docs

WidgetDescriptionOverviewReference
AlertAlert Dialog is a special dialog that is displayed when the user needs to take an immediate action. OverviewAPI Docs
ConfirmConfirm Dialog gives a special dialog box that is displayed which requires user’s consent to complete the action. OverviewAPI Docs
DesignDesign Dialog gives a small window that communicates information to the user and prompts them for a response. The content of the dialog is customizable. OverviewAPI Docs
IframeIframe Dialog is a dialog box that loads an external webpage. OverviewAPI Docs
PagePage Dialog is a dialog box that loads the partial page content. OverviewAPI Docs
LoginLogin Dialog is a dialog box that allows you to customize the login dialog. OverviewAPI Docs

Prefabs - Custom Widgets & Extensions


For an overview on Prefabs and how you can create Prefabs see here.

WidgetDescriptionDocumentReference
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


WidgetDescriptionDocumentReference
Media ListMedia 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.OverviewAPI Docs
Segmented ControlSegmented Control group of buttons to toggle Segmented Content containing the page content.OverviewAPI Docs
Barcode scannerBarcode scanner can be used for scanning barcode.OverviewAPI Docs
CameraCamera can be used to access the device camera for taking pictures and videos.OverviewAPI Docs