Vue Embedded AnalyticsStudio Overview

This section provides key information for configuring and interacting with Studio.

Studio Properties Copy Link

Studio is configured via the ag-studio component. Properties consist of simple types, arrays, complex objects and callback functions. The following example shows some bindings:

<ag-studio
    // Attribute, not bound, give an explicit value
    studioId="abc"

    // A boolean value
    :enableRtl="true"

    // A bound property
    :data="myData"

    // A callback
    :getLocaleText="getLocaleText"

    // Event handlers (bound using kebab-case)
    @state-updated="onStateUpdated"
/>

Updating Studio Properties Copy Link

It is a common requirement to update a Studio property after Studio has been created. For example, you may want to change mode via an application toggle.

Simply update the bound property and Studio will respond to the new value. In this example the mode will switch to view.

<ag-studio :mode="mode" />

updateMode() {
    this.mode = 'view';
}

Properties can also be updated by calling either api.setProperty or api.updateProperties.

// update the mode
api.setProperty('mode', 'view');

Initial Studio Properties Copy Link

A small number of Studio properties do not support updating their value. Their value is only read during the initial setup of Studio. These options are marked as Initial on the Properties Reference. For these properties Studio must be destroyed and re-created for the new value to take effect.

Not all Studio Properties support updates. These are marked as Initial.

For a full list of properties, see Properties Reference.

Studio Events Copy Link

As a user interacts with Studio, events will be fired to enable your application to respond to specific actions.

Event handlers are bound in the standard way (e.g. @state-updated="onStateUpdated"). Event names must use kebab-case.

<ag-studio @state-updated="onStateUpdated" />

TypeScript users can take advantage of the events' interfaces. Construct the interface name by prefixing the event name with AgStudio and suffixing with Event. For example, the stateUpdated event uses the interface AgStudioStateUpdatedEvent.

For a full list of events, see Studio Events.

Studio API Copy Link

The Studio API can be accessed via this.$refs.myStudio.api where ref="myStudio" is applied to the ag-studio component. This will only be defined after Studio has been initialised.

<ag-studio ref="myStudio" />

// methods
onClick() {
    this.$refs.myStudio.api.getState();
},

API within Events and Callbacks Copy Link

The api is also provided on the params for all Studio events and callbacks. The first event fired is the apiReady event and that can be used to store a reference to the API within your component as an alternative to using $refs.

<ag-studio @api-ready="onApiReady" />

// Store the API for later use
onApiReady = (params: AgStudioApiReadyEvent) => {
    this.api = params.api;
}

If the API is being stored in a reference, it must be a shallowRef rather than a ref in order to work correctly.

For a full list of API methods, see Studio API.

Studio State Copy Link

As a user interacts with Studio they may change state such as widget layout, formatting, filtering, etc. This state is independent of the configuration, and to provide save and restore capabilities Studio enables applications to save / restore this state.

For a full list of the state properties, see Studio State.

Studio Lifecycle Copy Link

An application may need to perform actions when Studio is first initialised, or about to be destroyed.

For full details about how to interact with Studio at these key moments see: Studio Lifecycle.

Studio Errors Copy Link

When errors occur in state or data validation, an error event will be emitted.

<ag-studio
    :onErrorRaised="onErrorRaised"
    /* other studio properties ... */>
</ag-studio>

this.onErrorRaised = (params) => {
    // handle error (e.g. prompt user to load a different report)
};

AgStudioErrorRaisedEvent

An error has occurred within Studio.