Widgets

A widget embeds a custom JavaScript component into an AWE screen. It is the extension point for enriching the UI that AWE provides out of the box with your own framework components (and their styles), without having to enable them one by one in the framework.

Widgets are declared with the <widget> element inside any screen container (a tag, window, etc.):

<tag source="center">
  <widget type="file-manager" id="file-manager" style="expand"/>
</tag>

How resolution works

The type attribute is the key that resolves the client component. The backend renders the widget as a custom element named after type:

<widget type="event-calendar" id="myCalendar"/>
  →  <awe-event-calendar event-calendar-id="myCalendar"></awe-event-calendar>

• Angular client (awe-client-angular): the element resolves against the AngularJS directive registry. A directive named aweEventCalendar (element awe-event-calendar) renders the widget. Applications register their own directives in their bundle, so widgets are extensible at the application level with no changes to the framework core.
• React client (awe-react-client): the type resolves against a client-side widget registry. Applications register their own components with registerWidget(type, component) (exported by awe-react-client), so widgets are extensible at the application level with no changes to the framework core. See the Custom widgets (React) guide.
• If no component matches type, the client renders a graceful placeholder (The widget <type> has not been created yet.) instead of failing.

To build and register your own widget, see the Custom widgets guide (Angular) or the Custom widgets (React) guide.

Built-in widgets

The Angular client ships these widget types out of the box:

type	Descripción
file-manager	File manager / browser
pdf-viewer	PDF document viewer
log-viewer	Streaming log viewer
help-viewer	Help content viewer
carousel	Image / content carousel

React client

The React client (awe-react-client) resolves the same type against a client-side registry and ships the same built-in widget types. Applications add their own by calling registerWidget(type, component) (exported by awe-react-client) once at startup; the built-in widgets use that same mechanism. The widget node attributes (id, style, ...) are passed to the component as props. See the Custom widgets (React) guide.

Attributes

Atributo	Obligatorio	Descripción
id	Si	Unique widget identifier (used as the component id on the client).
type	No	Component key that selects the client component (see resolution).
component	No	Javascript component name (advanced/legacy).
style	No	CSS classes applied to the widget container (e.g. expand to fill the available space).
visible	No	Whether the widget is visible (true / false).
help	No	Locale key for the widget help text.
help-image	No	Help image path.
server-action	No	Server action to retrieve the widget data.
target-action	No	Target action / query executed to feed the widget.
initial-load	No	Initial load action executed on screen startup.

Widget parameters

Use <widget-parameter> to pass configuration values to the client component. Parameters reach the component through its controller (component.controller.parameters in the Angular client):

<widget type="event-calendar" id="myCalendar" style="expand">
  <widget-parameter type="string" name="initialView" value="dayGridMonth"/>
  <widget-parameter type="boolean" name="editable" value="true"/>
</widget>

Atributo	Obligatorio	Descripción
type	Si	Parameter type: string, label, boolean, integer, long, float, double, array, object, null.
value	Si	Parameter value (parsed according to type).
name	No	Parameter name (key) as received by the component.

Parameters of type array and object can nest further <widget-parameter> elements.