Skip to main content
Version: v10.15

Composing Widgets

Learn about widgets and how it works.


Learn about Widgets in WaveMaker. These are HTML/Bootstrap based widgets with rich interaction and designed for highly-responsive design. Also, see the common Widget properties in this section.

tip

To view the list of widgets in WaveMaker, see Widgets Library.

How it works

Pages are constructed as a composition of widgets using the visual drag-n-drop approach. Responsive Layout grid is used for the placement of widgets for automatically making them responsive to all devices.

WaveMaker provides HTML/Bootstrap based widgets or UI Components, with rich interaction and for responsive design. Widgets are the building block of any application. They are the tools for exchange of information from the user to the project. Widgets eliminate repeated development and provide consistent behavior across browsers and platforms. Drag and drop action lets you add widgets to your project.

Widgets could simply map to a standard HTML construct like a label or select or could be complex HTML structures like Lists or extended Forms built for responsive design.

Widget Properties

Once you add a widget to your page, click on the widget to see the available actions in the Properties Panel. Below are some of the common actions of Widgets.

Basic Attributes

Define the content to be displayed in a widget by connecting it to a database query, web service, Java method, or another widget. Data binding provides integration with data sources known as ‘Variables’ or any other Widgets. Variables offer the ability to integrate with services such as a database, web service or any other backend service. More on Variables and Binding.

Styling

Use the Styles tab in the Properties Panel to define styles. Widget styles for alignment such as margin, padding, text & background, and border styles can be customized as per the required look-n-feel. Advanced users can switch to the Style Page Mode to edit the code. More on Styling.

Event Binding

Use the Event tab in the Properties Panel to choose the action for specific events. Widgets expose click, mouse enter/leave events, tap and double tap for multiple devices, which can be bound to Variables or methods of Services. More on Events. For Mobile app, these take the form of gestures.

Device

Use the Device tab in the Properties Panel to choose the widget visibility. Manage the widget visibility across device sizes.

Access Control

Define which user roles can access the widget in the Security tab of the Properties Panel. For more information, see Role-based Access, and Widget Security.

We have seen the basics of the HTML/Bootstrap based widgets or UI Components and properties.

See Also

Widgets Library
Design Pages
Prefab - Custom Widgets