Create a UI for Actions

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

In the current Toolpad, there are a few actions that can be triggered through event handler props like onClick. Some of these actions are:

1. Running a query
2. Changing state of a component
3. Setting local storage
4. Navigating to a page
5. Navigating to a URL

We support all of this but it involves writing code. The DX can be improved if there was a UI for this.

Also, as a beginner I would get confused between query.call(), query.fetch(), query.refetch(). Making these available through the UI and a helper icon explaining which one to use in what scenario would be great.

Examples 🌈

Retool

Appsmith (has more actions)

Superblocks

Motivation 🔦

No response

[bharatkashyap]

@prakhargupta1 I feel like

The DX can be improved if there was a UI for this.

this might be the case for beginners, but more developers (including myself) would prefer if we could move all of the client side code we currently write to the IDE.

For example, can we just write all of the client side code inside resources/client/functions.ts and use a special useClient() so that we can bind to the runtime values of client-side variables? We could then simply connect UI elements to code written in the editor. I see two advantages to this:

• [ ] We mimic more and more the current, familiar process of development, where the code and the UI are separate
• [ ] We allow beginners to use AI agents embedded inside their editors to write code, instead of creating a semi-ideal IDE-like experience inside the browser.

I've expanded on the above thought in the Toolpad product topics Notion document

[prakhargupta1]

Can we just write all of the client side code inside resources/client/functions.ts and use a special useClient()

If we could have an AI copilot to help write these actions faster in pro-code, then this approach would be good as this will give customizability without compromising on speed. It will also ensure that the developer learns and that Toolpad isn't a blackbox. This would be quite like Interval.