Widgets are pre-built user interface components that enable developers to quickly create graphical interfaces for applications. Widgets remain on the screen permanently, unlike panels, which are often mounted and unmounted as needed. Widget objects always contain a name, elementId and config.
To display a widget in your app, use the mountWidget() method.
Tip: To see a list of all mounted widgets in the console, run aiware.store.getState().widgets.
- In the callback function of
aiware.init(), call aiware.mountWidget().
Parameters
The parameter of mountWidget() is:
| Name | Required | Type | Description |
|---|
| props | True | Object | The widget to mount. |
This example mounts the App bar widget:
aiware.mountWidget({
name: 'APP_BAR',
elementId : 'my-app-bar',
config: {
title: 'Library',
backgroundColor: '#0000ff',
help: true,
zIndex: 1000,
betaFeatures: true,
notifications: true,
},
});
Tip: The mountWidget() method can be called anywhere in the code, but calling it inside init() ensures that init() finishes before the widget is mounted.
To stop a widget from displaying in your app, use the unmountWidget() method. - Call aiware.unmountWidget().
Parameters
The parameter of unmountWidget() is:
| Name | Required | Type | Description |
|---|
| widgetId | True | String | The ID of the widget to unmount. This ID is randomly generated. |
The App bar widget is the toolbar. It displays your logo, icons, and system or app notifications.
Widget format
The App bar widget object uses this format:
{
name: 'APP_BAR',
elementId: 'my-app-bar',
config: {
title: 'Library',
backgroundColor: '#0000ff',
help: true,
zIndex: 1000,
notification: true,
displaySupportChat: true,
rightActions: [ {
label: '<HTML of your custom icon>',
onClick: function(event) {
// This code runs when the icon is clicked.
}
}],
logoSrc: '<Absolute path to your logo>',
hidePasswordReset: true
},
}
Properties
The App bar widget has these properties:
| Name | Required | Type | Description |
|---|
| name | True | String | The name of the widget. Must be 'APP_BAR'. |
| elementId | True | String | The ID of the widget. Can be customized. |
| config | True | Object (config) | The properties of the app bar. |
config
The config object has these properties.
| Name | Required | Type | Description |
|---|
| title | True | String | The title that appears on the app bar. |
| backgroundColor | True | String | The background color of the app bar. Accepts RGB, hex, and predefined colors (ex. red). The text color automatically adjusts to contrast with the background color. |
| help | True | Boolean | The help icon visibility. true for visible, false for invisible. |
| zIndex | True | Integer | The z-index of the app bar. |
| notification | False | Boolean | The notification icon visibility. true for visible, false for invisible. |
| displaySupportChat | False | Boolean | The visibility of the Support Center menu option. true for visible, false for invisible. Default is true. |
| rightActions | False | Array[Object (rightActions)] | The custom menu icons to display on the app bar. Can contain an unlimited number of objects, but too many objects can clutter the UI. |
| logoSrc | False | String | The absolute path of the image to use as the logo icon. |
rightActions
The rightActions array has 1 or more objects with these properties. Each object represents an icon on the App bar.
| Name | Required | Type | Description |
|---|
| label | True | String | The HTML of the icon. |
| onClick | True | Function | The anonymous function that runs when you select the icon. |
| isActive | False | Boolean | The state of the icon, which affects its opacity. true for active, false for inactive. Default is true. |
