Widgets

A widget embeds a component that the XSD does not describe by itself: its type chooses it from the registry of the client. This page has the two that show content: a carousel that goes through images, videos and PDF documents, and the help viewer that shows the help page of the application. The file and PDF viewers are in their own page.

Live preview

LightDark

Controls

Widget type

CarouselHelp viewer

XML

<widget id="demo"
        type="carousel"
        initial-load="query"
        target-action="GalleryQuery" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
type	Widget type	carouselhelp-viewer

Full reference

• Full documentation of this component
• XSD reference of the element

Recipes

Carousel with captions and a video

A carousel takes its slides from a query (initial-load="query" and target-action), one per row. Each row has a type (image, video or pdf), the url of the file and, optionally, a title and a description shown above it. An image opens full size when it is clicked.

<widget id="Gallery" type="carousel" initial-load="query" target-action="GalleryQuery" />

Column	Description
type	image (the default), video or pdf
url	Address of the file
title	Title shown above the slide (optional)
description	Text shown under the title (optional)

Help in a side panel

The help viewer asks the server for the HTML of the help of the application (or of the option of the menu the screen is in) when it is shown. Inside a side panel it loads the first time the panel opens. The docs have no server, so the example answers that request with a static page.

<button id="OpenHelp" label="Help" icon="lucide:circle-help">
  <button-action type="dialog" target="HelpPanel" />
</button>

<side-panel id="HelpPanel" label="Help" max-width="30rem">
  <widget id="HelpContent" type="help-viewer" />
</side-panel>

Event calendar

The event-calendar that appears in the documentation of the widgets is not a widget of the React client: it is the example of the custom widgets guide, which an application registers with registerWidget(type, component). The built-in widgets of the React client are carousel, help-viewer, file-viewer, pdf-viewer, file-manager and log-viewer.

Events and actions

These widgets have no event or action of their own. A dependency can show or hide any of them, and a widget with a query reloads when an action loads its target.

More

• Full documentation of the widget: the registry, parameters and the custom widgets.
• XSD reference of the widget element and of the widget-parameter element.