Skip to main content

Dynamic forms

With custom code, you can update form elements or their values and options from any data source.

Static and dynamic form elements of Data Manipulation Panel.

Select options

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

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

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

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

context.panel.onOptionsChange(options);

Update elements from data sources

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

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

/**
* Set Elements
*/
const 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 ||
typeOptions.fields.find((f) => f.name === "label").values;
const values =
typeOptions.fields.find((f) => f.name === "value").values.buffer ||
typeOptions.fields.find((f) => f.name === "value").values;

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

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

Dynamic Business Forms example

The Business Forms can be created dynamically following the code-specified configuration. You can find more details in the blog post below.

Build Form Elements dynamically in Data Manipulation panel.
Build Form Elements dynamically in Data Manipulation panel.