Skip to main content

Dynamic form elements

Using the custom code you can update elements or element's value and options from any data source.

Fill options of the icon element from series icons with icon_id and title columns

const icons = data.series.find((serie) => serie.refId === "icons");
const iconSelect = elements.find((element) => element.id === "icon");

if (icons?.fields.length) {
const ids = icons.fields.find((f) => f.name === "icon_id").values.buffer;
const titles = icons.fields.find((f) => f.name === "title").values.buffer;

iconSelect.options = titles.map((value, index) => {
return { label: value, value: ids[index] };
});
}

onOptionsChange(options);

Update all form elements from data sources

const feedback = data.series.find((serie) => serie.refId === "Feedback");
const typeOptions = data.series.find((serie) => serie.refId === "Types");

if (feedback?.fields.length) {
const ids = feedback.fields.find((f) => f.name === "id").values.buffer;
const titles = feedback.fields.find((f) => f.name === "title").values.buffer;
const types = feedback.fields.find((f) => f.name === "type").values.buffer;

/**
* Set Elements
*/
elements = ids.map((id, index) => {
return { id, title: titles[index], type: types[index] };
});

/**
* Find Type element
*/
const typeSelect = elements.find((element) => element.id === "type");
if (typeSelect && typeOptions?.fields.length) {
const labels = typeOptions.fields.find((f) => f.name === "label").values
.buffer;
const values = typeOptions.fields.find((f) => f.name === "value").values
.buffer;

/**
* Update Types
*/
typeSelect.options = labels.map((label, index) => {
return { label, value: values[index] };
});
}

/**
* Update Panel Options
*/
onOptionsChange({ ...options, elements });
}