emmorts
emmorts11mo ago

Triggering a script or flow from AgGrid Table column definition

Hello, I am trying to create a table with action buttons, and I would like to trigger flows on button click. While I realise it is possible to do through a regular fetch request calling the webhook of a flow, it gets quite inconvenient trying to forward input variables. Is there something I am missing, or is that the only way? Thank you!
6 Replies
Faton
Faton11mo ago
Hi, you can import a script or a flow by its path, and easily pass parameters: https://www.windmill.dev/docs/advanced/sharing_common_logic#deno-or-bun-relative-imports-for-sharing-common-logic For example, in TS you can have a background runnable:
import { main as foo } from '/u/faton/example_script.ts';
export async function main(x: string) {
return foo(x)
}
import { main as foo } from '/u/faton/example_script.ts';
export async function main(x: string) {
return foo(x)
}
that will call the example_script with the x parameter. You can also create actions buttons for Ag Grid following this guide: https://www.windmill.dev/docs/misc/guides/aggrid_table#create-a-button-custom-component
Sharing Common Logic | Windmill
It is common to want to share common logic between your scripts. This can be done easily using relative imports in both Python and Deno.
AgGrid Table | Windmill
This is a basic introduction on how to use
emmorts
emmortsOP11mo ago
I can't seem to get import definitions to work in Background Runnables, receiving
{
"error": {
"message": "import declarations may only appear at top level of a module"
}
}
{
"error": {
"message": "import declarations may only appear at top level of a module"
}
}
My current background runnable looks something like this:
// import { main as foo } from '/f/anki/answer_cards.ts'; // ERROR: import declarations may only appear at top level of a module

class BtnCellRenderer {

constructor() { }
init(params) {
this.params = params;
this.eGui = document.createElement('button');
this.eGui.innerHTML = 'foo';
this.btnClickedHandler = this.btnClickedHandler.bind(this);
this.eGui.addEventListener('click', this.btnClickedHandler);
}
getGui() {
return this.eGui;
}
destroy() {
this.eGui.removeEventListener('click', this.btnClickedHandler);
}
}
BtnCellRenderer.prototype.btnClickedHandler = function () {
const data = { ...this.params.data };
this.params.api.applyTransaction({ remove: [data] });
};

return [
{
headerName: 'Actions',
cellRenderer: BtnCellRenderer
}
];
// import { main as foo } from '/f/anki/answer_cards.ts'; // ERROR: import declarations may only appear at top level of a module

class BtnCellRenderer {

constructor() { }
init(params) {
this.params = params;
this.eGui = document.createElement('button');
this.eGui.innerHTML = 'foo';
this.btnClickedHandler = this.btnClickedHandler.bind(this);
this.eGui.addEventListener('click', this.btnClickedHandler);
}
getGui() {
return this.eGui;
}
destroy() {
this.eGui.removeEventListener('click', this.btnClickedHandler);
}
}
BtnCellRenderer.prototype.btnClickedHandler = function () {
const data = { ...this.params.data };
this.params.api.applyTransaction({ remove: [data] });
};

return [
{
headerName: 'Actions',
cellRenderer: BtnCellRenderer
}
];
Oh, that does makes sense though, seeing as this is a frontend function, while imports are only allowed in backend functions. That does leave me stuck still - how can I trigger a backend function on a button click?
Faton
Faton11mo ago
Hi, indeed frontend scripts cannot import a script. What you can do is: - Your button write data to the state - A background runnable listen for changes in the state to trigger itself
Faton
Faton11mo ago
Faton
Faton11mo ago
I've made a simple app that showcases that: The "Write to state" btn write the content of the input field into the state. The background script (bg_0) takes the state as input, and will execute whenever the value in the state changes. Now in the background script, you can import a script from your workspace
emmorts
emmortsOP11mo ago
Ah, I see - that works like a charm, thanks @Faton!

Did you find this page helpful?