Windmill•5mo 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•5mo 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•5mo 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•5mo 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•5mo ago

test.json

Faton•5mo 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•5mo ago

Ah, I see - that works like a charm, thanks @Faton!

Gaming

Programming

Triggering a script or flow from AgGrid Table column definition