AG Studio: Build dashboards using native components in web apps. Join us for a webinar on 28th July at 2pm UTC+1 Register

Vue Embedded AnalyticsEditable Fields

End users can edit a field's name, description, and formatting options directly in Studio when the developer opts the field in. Edits are surfaced through the Edit Panel when a field is selected in the Data Panel, and the resulting overrides are stored in State.

Configuring Editability Copy Link

Fields are fully editable by default. Use the editable property on a field definition to lock a field down or to restrict which properties the user can change:

const fields: AgFieldDefinition[] = [
    { id: 'country', format: 'textFormat' },
    { id: 'sport', format: 'textFormat', editable: false },
    { id: 'gold', format: 'integerFormat', editable: ['name', 'formatOptions'] },
    { id: 'silver', format: 'integerFormat', editable: ['name'] },
];

Pass false to make the field read-only, or an array of AgFieldEditableKey values to allow a subset:

KeyWhat the user can edit
nameThe display name shown wherever the field appears.
descriptionThe description shown in the Field Panel.
formatOptionsFormatting options for the field's format type (see Formatting).

editable is available on field definitions, expression fields, and measures.

Example Copy Link

In the example below, select any field in the Data Panel to switch the Edit Panel to its field view. Each field is configured differently:

  • Country: fully editable (default).
  • Sport: read-only (editable: false).
  • Gold: name and format options editable (editable: ['name', 'formatOptions']).
  • Silver: name only (editable: ['name']).
  • Bronze: read-only (editable: false).

Persisting Edits Copy Link

User edits are written to the schema slice of the report state as an AgSchemaState map keyed by field ID. Save and restore this with the rest of your report state. See State for the full state model.