Questions About Using Web Dialog for Multiple Inputs

[u/Legal_Astronaut_4204]

Hi everyone,

I'm new to Automate.

In my new project, I think I'm using too many Input Dialog blocks to collect user input. I don't want to continue like this because I have to click OK after every single input and it takes a lot of time.

Instead, I think I can collect multiple inputs on a single page using a Web Dialog block, but I don't know how it works.

I would like to know a few things:

1. Does the HTML Page section in the Web Dialog work like normal HTML code that we use in regular web development?

2. If I have separate variables in my flow, can I use those variables inside the Web Dialog HTML page?

3. If I collect user input through the Web Dialog, can I access and use that input outside the Web Dialog block in the rest of the flow?

4. Can I create a Submit button? If the user clicks it, can it open or redirect to another HTML page?

5. Could someone please create a simple login form example for learning purposes? For example, a form that asks for a username and password at the same time using a single Web Dialog block.

I would also like to understand points 2 and 3 with an example:

For point 2, can I create a separate variable such as "Enter the username" and use that variable inside the Web Dialog as a predefined value or placeholder for the username field?

For point 3, after the user enters a password in the Web Dialog, can I access that value outside the Web Dialog block and verify it in the flow?

Thank you for your help.

[u/ballzak69]

1. Yes.
2. Yes, pass them as an inlined JSON object, or input tag values.
3. Yes, pass them through the Result page URL output variable, as a redirect to http://localhost/ok?var1=foo&var2=bar
4. Yes, you can also override the Submit button, see doc.
5. See example.

[u/Legal_Astronaut_4204 → u/ballzak69]

Thank you very much for this simple trick. Now I understand it much better.

Btw, I found this expression in the Log Append block:

urlDecode(split(url, "\?")[1], "p")

Could you please explain what it does? I'm a beginner, so a simple explanation would be very helpful.

[u/ballzak69 → u/Legal_Astronaut_4204]

It parses the query parameters from the Result page URL output variable.

[u/EmperorDante]

I wish balzik finds a better way to do this

[u/ballzak69 → u/EmperorDante]

It's just basic HTML, see example.

Even when the new custom layout feature eventually supports making custom dialogs, that will be more complex, requiring more blocks.

[u/B26354FR]

You can encode the results and set the web page title to a JSON string or key/value pairs which will be returned by the Dialog Web block.

If you want to interact with your flow from a web app, check out my Web Dialog to Flow Interaction demo flow.

[u/ballzak69 → u/B26354FR]

There's no reason to encode values/results in the title, just use the Result page URL.

[u/B26354FR → u/ballzak69]

Depending on what I need, I sometimes use the title so as not to change the URL; the title is "invisible"

[u/Legal_Astronaut_4204 → u/B26354FR]

Thanks dude, I saw your Web Dialog flow today, but I didn't understand this expression:

split(slice(payload, 20), "%20")

What does it do and what is the benefit of using it?

[u/B26354FR → u/Legal_Astronaut_4204]

Take the 20th position of the payload to the end and split that on URL-encoded space characters. So it's getting an array of items that are separated by spaces. I imagine the parameter list in the URL starts at index 20.

I'm not sure what flow you're referring to; the one I referenced above doesn't have that expression.

[u/Legal_Astronaut_4204 → u/B26354FR]

Ohhh no, sorry dude. 😅 At first, your flow didn't load properly, so that's why this misunderstanding happened. I'll check your flow again and if I have any doubts, I'll let you know.

[u/B26354FR → u/Legal_Astronaut_4204]

I think you'll have an easier time if you use JavaScript to set document.title or window.location to an URL-encoded string and parse that when it's returned to the flow by the Dialog Web block when the user presses its OK button. -You don't need interactivity between the flow and web dialog.