Understand how to create and configure Widgets.
Widgets are the building blocks of a report. Widgets are created on the layout, then configured in the Edit Panel where data and appearance can be adjusted.
Widget Creation Copy Link
Drag and drop is the main mechanism for Widget creation — this can be done by dragging data or Widgets into the page. Alternatively, clicking on the Widget icons in the Compose Panel will also create a Widget on the page.
When a Widget is dragged, it snaps to the Layout Grid and a preview shows the proposed placement. If the Widget would exceed the layout, placement is clamped to the nearest valid position and size. Where possible, the Widget is resized to fit the available space.
Once the Widget is created, it can be resized from its edges or corners (depending on the Widget). Resizing also snaps to the grid. Some Widgets enforce a minimum size. For example, the Table Widget has a minimum height of 220px (equivalent to 4 rows, including the header).
The example below shows an empty page in Edit Mode. Widgets can be created by dragging a Widget from the Edit Panel or dragging a field from the Data Panel onto the canvas.
Widget Types Copy Link
The following are the supported Widget types in AG Studio and their input requirements.
| Widget type | Description | Input requirements |
|---|---|---|
| Table | Shows detailed data in a simple table. | Any Fields can be added. |
| Chart | Show patterns such as trends, comparisons, and distributions. | Input requirements vary by chart type and usually include at least one Category field and one Value field. |
| KPI | Shows a headline number. | Requires a single Value field or measure. |
| Static Content | Adds narrative or supporting content such as text and images. | Does not require data inputs. |
| Filter | Add on-canvas filter controls. | Requires a field that can be used to filter the report, such as a list of values or a date field. |
Widget Configurations Copy Link
In Edit Mode, clicking a Widget on the layout puts it into focus. When a Widget is focused, the Edit Panel updates to show Widget configuration.
Widget configuration is split into two tabs:
- Setup — configures data inputs and interactivity.
- Format — controls how the Widget looks.
The example below shows a bar chart displaying Net Sales by Region. Clicking on the chart updates the Edit Panel to show the Setup and Format tabs for that Widget.
Widget Setup Copy Link
Data can be dragged and dropped into an empty Widget or the Setup data section. The UI guides visually to the appropriate drop targets. If an item cannot be used in a slot, AG Studio prevents the drop and guides to a valid slot. This might be because no relationship between data is defined or Widget data requirements are not met.
Where possible, items can be reordered within a slot by dragging them into the required order, which determines the order of Fields being displayed. For detailed information on managing data fields, see Data Setup.
To remove an item, its remove action can be used from the data menu accessible in the data pill. Aggregation and sorting options are also in the same menu. Read more on Aggregation and Sorting.
Widgets can be changed to a different type via the Setup Panel dropdown. AG Studio will preserve field configurations during Widget type switching where possible. Where the new input requirement needs less data, additional fields will be dropped into Tooltip.
Widget Formatting Copy Link
Format settings vary by Widget type. Common settings include the Widget title and description, number formatting, labels and legends, and display options.
Additional customisation is supported on interactivity features such as crosshair, navigator, and zoom. The options available for customisation depend on the application preset and will vary depending on what is permitted.
Widget Toolbar Copy Link
When a Widget is focused, a toolbar is displayed with actions for working with the Widget. Widget focus is indicated by a default blue border around the Widget.
The available actions depend on the current Mode and the Widget type. For example, some actions are only available in Edit mode, and different Widget types may show different menus.
| Name | Icon | Mode | Description |
|---|---|---|---|
| Download |  | Both | Downloads the Widget content, for example as an image or CSV. |
| Duplicate |  | Edit | Creates a copy of the Widget with the same configuration. |
| Delete |  | Edit | Removes the Widget from the layout. |
Empty State Copy Link
If a Widget runs successfully but returns no rows, AG Studio shows a consistent empty state. This could be due to empty underlying Fields or active Filters not returning any results. The empty state uses a single message ("No data to display") and is centred within the Widget.
The example below shows the same bar chart with a page-level filter applied that returns no matching data. The Filters Panel is open to show the active filter condition.