Tips : Make a user interface for your workflow for a real user interaction

Tips & Tricks
,
1

Hi,

I don’t know if I missed the point in the documentation, but I don’t find a page to explain how I can make the end user of a workflow interact with my workflow.

My main target is to give an url to the end user. This url load an interface for the user. Then in the navigator the user can make an interaction (click on a button, fill a form… etc…). Than the interface makes a javascript http request to the webhook and display the result to the user.

I found that wait for webhook is designed for that. But it’s not evident.

Here is a dirty workflow as a demo. This demo just displays in the javascript console the result of an http get made after the click on the button.

I hope it helps.

I am interested of feedbacks and ideas for this tips.

Best
Julien

1 Like
2

I am interested of feedbacks and ideas for this tips.

I really like this idea, I actually did something similar a while back. @Jon also created a community node making this quite a bit easier, you can find it over here:

In general it’s important to understand that n8n is not a UI builder in the first place, so you’ll be somewhat limited here (for example when it comes to error handling).

So depending on what you have in mind you could consider adding another tool to your low code stack handling the UI part (I’ve used Budibase for this in the past, it works quite will with n8n and other data sources too).

Nothing wrong with using n8n on its own to serve individual forms or simple web pages though :slight_smile:

1 Like
3

I tested Jon’s node, but it’s too simple, but it gave me the based idea :). It’s complicated to in his node to customize the design, and too few elements.

You are right about finding another tool for the UI. But for now I don’t have enough needs for this to handle another tool (with maintenance…).

2 Likes
4

If it helps in the node you can set your own CSS file and use HTML to create your form but at some point I do want to add more elements, I have not really done anything with it since the Nodeathon :smiley:

Which field types would be useful for you?

2 Likes
5

It’s more than just fields, I would like to make real forms and user interaction with javascript.

6

And another point, I want to make some pre-request to add data in the user interface.

7

When you say “real forms” what is that? In theory you could already add javascript to the form to handle more complex things and use the form HTML option.

I will have a think about what I can do to make this easier but at some point it would be better to use a proper form tool.

8

I did not remember I can add my own HTML and CSS. I will take another look.

Maybe the interesting improvement would be to have the capability to have nodes before for loading data to populate in the form.

9

Hey @JulienDelRio,

That is not a bad idea, Would need another node for that though as it then wouldn’t be a trigger. I did think about maybe making a version that could be used with the respond to webhook node.

1 Like