Custom Requests
Data Manipulation panel allows to create your own Initial and Update requests using Custom Code.
Initial Request
Select Initial Request as -
and set Custom Code:
const bucketsSelect = elements.find((element) => element.id === "buckets");
/**
* Set URL
*/
const url = `http://localhost:3001/test`;
/**
* Fetch
*/
const resp = fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
"PRIVATE-TOKEN": "$token",
},
})
.catch((error) => {
console.error(error);
})
.then(async (resp) => {
const body = await resp.json();
bucketsSelect.options = body.buckets.map((value) => {
return { label: value, value };
});
onOptionsChange(options);
});
Initial values
To support Highlight changed values
and Require Confirmation
the Custom Code should use setInitial({})
function to update initial
values:
setInitial({ value: 99, name: "Test" });
Update Request
Select Update Request as -
and set Custom Code. Depends on the selected Payload options it will add all or only updated values.
/**
* Set body
*/
const body = {};
options.elements.forEach((element) => {
if (!options.update.updatedOnly) {
body[element.id] = element.value;
return;
}
/**
* Skip not updated elements
*/
if (element.value === initial[element.id]) {
return;
}
body[element.id] = element.value;
});
/**
* Set URL
*/
const url = `http://localhost:3001/${body["name"]}`;
/**
* Fetch
*/
const resp = fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"PRIVATE-TOKEN": "$token",
},
body: JSON.stringify(body),
})
.catch((error) => {
console.error(error);
})
.then((resp) => {
console.log(resp);
});