Using Widgets in Applications

Using widgets to build applications is the basic development model in AppliBuilder. The goal is to quickly develop your applications with these steps:

• pick your widgets and add them to your application pages
• drag and drop and layout the widgets as needed
• configure widget properties as needed
• script the widgets on the page as needed
• add CSS styles to the page as required

These steps, described in more detail below, should be sufficient to achieve results for most users. AppliBuilder supports a number of other advanced features, which may be used as needed by individual applications.

Add a Widget

Click on a widget icon in the Widget Library Tree to add it to the end of a page.

Widget Layout

Drag and drop widgets to layout the widgets on a page. Currently only Table layout is supported. Set the number of columns on a page, and the row span and column span of the widget to setup the layout for the page as needed. Use widget sytles, and the HTML widget to space and otherwise get your page looking the way you want.

Widget Quick Properties

Double-click on a widget to open the properties for the widget. Each Widget opens with it's own quick properties tab, designed to provide a short list of the most useful properties for that widget.

Widget Styles

Choose the style tab to change CSS style properties for a widget.

Other Widget Attributes

Other detailed attributes may be availale for your widget in the attributes tab. Choose the attributes tab to change attributes for a widget.

Scripting Widgets

• invoke page functions or library functions from widget events.
• use the global functions, getInputValue, getWidgetByName and reloadWidget to use the widget from page functions.

Changing Properties and Reloading Widgets

Often one needs to change the properties of a widget and reload it, for example to change the value of a label widget and display the new value.

Lets look at an example where we redraw a chart with a new size. To do this, lookup the element object by name, change the property, and call reloadWidget().

var chart = getElementObjectByName('Bar Chart3');
chart.width = 400;

reloadWidget('Bar Chart3');

This reloads the chart with a new width.

Other Widget Features

Widgets can be manipulated in a number of ways using Javascript, CSS and the property forms.

Each widget may provide global functions to make it easier to script the widget. Please refer to the widget documentation for any widget-specific features.