Vue Embedded AnalyticsCustom Widgets Form Setup

Custom widgets can use the built-in Studio form builder to edit their data and format settings.

The example above adds a Special Config section to the setup tab, with an input to control the font size of the value in the custom widget.

The form is provided via the form property of the widget definition.

Form Setup Copy Link

The ID of each form item is a dot delimited path of the corresponding property within the widget config.

interface CustomWidgetStyle {
    valueFontSize?: number;
}

interface CustomWidgetDef {
    type: 'customWidget';
    dataMapping: {
        value: AgWidgetFieldReference[];
    };
    format?: AgWidgetDataFormat<CustomWidgetStyle>;
}

For the above definition, the corresponding input ID for the valueFontSize property would be format.style.valueFontSize.

Form Helpers Copy Link

The form callback provides some helper functions to create form elements for the default properties (e.g. data mapping, titles, etc.).

const widgetDefinition = {
    // ...
    form: (params) => {
        return params.createDefaults({
            dataMappingItems: [
                {
                    key: 'value',
                    label: 'Value',
                },
            ],
        });
    },
}

Form Grouping Items Copy Link

The following form items allow for grouping/structuring the form items (e.g. they have children).

Form Input Items Copy Link