Vue Embedded AnalyticsStudio Properties Reference

The agent harness powering the AI Assistant panel: either a harness, or a function building one from the Studio API. Results vary with the LLM you supply.

Override any AI-facing prose strings. Merged over AG defaults at initialisation time. Keys use dotted notation, e.g. 'tools.view_schema.description'.

How each tool's calls are presented in the AI Assistant panel, keyed by tool name: the words on the step, an optional component for the body that opens beneath it, or hidden to leave the tool out of the transcript. Studio's own tools come pre-declared; an entry here overrides them, and any tool of your own needs one to render as more than its name. Keyed by name because a call replayed from history no longer carries the tool that ran it, only the name it was called by. Applies whichever harness is driving the panel. detail is checked against the component type of the framework you are using.

Defines the data sources used by Studio. If updated after initially being set, only changes to synchronous data will be processed. Any other changes will be ignored (e.g. adding/removing data sources, updating fields, etc.)

Data-layer configuration. Controls behaviours such as export row limits.

A map of key->value pairs for localising text within Studio.

A callback for localising text within Studio.

Set to true to operate Studio in RTL (Right to Left) mode.

Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch).

Keyboard shortcuts Studio should not handle, so an application can bind them itself. Each shortcut is suppressed independently, e.g. { redo: true } keeps undo on ctrl/cmd+Z and leaves ctrl/cmd+shift+Z to the application.

Which mode Studio is in. Changing this only changes what is shown and what is editable: the active state is neither saved nor restored on a mode change, and carries across the switch unchanged. The undo and redo history also carries across by default; set history.onModeChange to discard it instead.

Default layout styling.

Configure which panels are displayed and on which side.

Allows filters to be added to, and removed from, the filters panel while in view mode. When false, filters can only be added and removed in edit mode. Studio does not store filters added this way. Listen to onStateUpdated and persist the state yourself if it needs to survive a reload.

Configure widgets:

Add custom widgets

Override provided widgets

Change displayed widgets

Change default widget type when dragging fields

Configure page (e.g. page setup form in page tab of edit panel).

Custom components (e.g. custom widget components) keyed by ID. Used to share components which can then be referenced directly by key in the definitions.

Provide a custom studioId for this instance of Studio. Value will be set on the root DOM node using the attribute studio-id as well as being accessible via the api.getStudioId() method.

Provides a context object that is provided to different callbacks Studio uses. Used for passing additional information to the callbacks used by your application.

Change this value to set the tabIndex order of Studio within your application.

DOM element to use as the popup parent for Studio popups (context menus, etc.).

Allows overriding what document is used. Use this when you want Studio to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports).

Initial state for Studio. Only read once on initialization. Can be used in conjunction with api.getState() to save and restore Studio state.

How Studio's undo and redo history behaves.

Theme to apply to Studio.

If your theme uses a font that is available on Google Fonts, pass true to load it from Google's CDN.

The CSS layer that this theme should be rendered onto. When specified, Studio CSS will be wrapped in a @layer ${themeCssLayer} { ... } block. NOTE: when specifying themeCssLayer we recommend setting themeStyleContainer to document.body to ensure that Studio CSS comes after your application CSS, allowing your application to set the order of layers.

The nonce attribute to set on style elements added to the document by themes. If "foo" is passed to this property, Studio can use the Content Security Policy style-src 'nonce-foo', instead of the less secure style-src 'unsafe-inline'. Note: CSP nonces are global to a page, where a page has multiple Studio components, every one must have the same styleNonce set.

An element to insert style elements into when injecting styles into the Studio. Styles are inserted at the start of the element. If undefined, styles will be added to the document head for Studio components rendered in the main document fragment, or to Studio wrapper element for other Studio components (e.g. those rendered in a shadow DOM or detached from the document).

All the above properties can also be specified on a single studioProperties object. If a property is set via studioProperties, as well as directly on the component, then the component value will take precedence. studioProperties is only read during initialisation, if you change it afterwards it will not impact Studio.