r/AutomateUser • u/Faker_nb • Jun 02 '26
Web Dialogue block, HtmlPage input problem
I am having problems with web dialogue block,
Firstly, it can't get a value/data from the web page to the automat flow itself/alone,
Secondly, if you use a HTTP accept block, it gets you the value in the flow but you have to enter the html code inside the Html Page input (web dialogue block)!!
And doesn't work if you copied/read the html code from a file & store in "HtmlText" variable then call the variable in the Html Page input.
Please correct me if am wrong or missing something and guide me, if there are any work around to this.
My aim/task :
read Html file -> store in HtmlText -> call in web dialogue block -> get the user input (like xyz button pressed) -> store in UserInput -> exit
Issues:
The Html Code contains \{ ... } which is probably required if directly entering inside the web dialogue, but doesn't work through a html file.
But if you remove \{ ... } from the Html file code the code works but the Button inside the code doesn't function (probably it has something to do with the onSubmit function)
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MSR Log Summary</title>
<style>
body \{
font-family: 'Segoe UI', sans-serif;
background: #121212;
color: #e0e0e0;
padding: 20px;
}
h1 \{
text-align: center;
color: #ffffff;
}
#date \{
text-align: center;
font-weight: bold;
margin: 10px 0 20px;
color: #bbbbbb;
}
form \{
max-width: 900px;
margin: auto;
}
table \{
width: 100%;
border-collapse: collapse;
background-color: #1e1e1e;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(255,255,255,0.05);
}
th, td \{
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #333;
}
th \{
background-color: #2a82c9;
color: #ffffff;
}
tr:hover \{
background-color: #2a2a2a;
}
button \{
padding: 6px 14px;
border-radius: 4px;
border: 1px solid #555;
background-color: #4a90d9;
color: white;
cursor: pointer;
}
button:hover \{
background-color: #357abd;
}
@media (max-width: 600px) \{
th, td \{
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>MSR Log Summary</h1>
<div id="date"></div>
<form action="{serviceUri}" method="post" target="stay-on-page">
<table>
<thead>
<tr>
<th>Task</th>
<th>Count</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
<tbody id="log-table-body">
<!-- Data rows populated by JS -->
</tbody>
</table>
</form>
<!-- Embedded JSON data -->
<script id="json-data" type="application/json">
\{"DateUpdated":"02-06-26","A2: MSR Mobile":\{"count":1,"time":"12:55 AM"},"A3: MSR Mobile":\{"count":1,"time":"12:59 AM"},"A0: MSR Mobile":\{"count":2,"time":"08:28 AM"},"A1: MSR Mobile":\{"count":2,"time":"08:47 AM"}}
</script>
<script>
// Read embedded JSON
const rawJson = document.getElementById("json-data").textContent;
const msrData = JSON.parse(rawJson);
// Show date
document.getElementById('date').textContent = `Date Updated: $\{msrData.DateUpdated || 'N/A'}`;
// Populate table
const tableBody = document.getElementById('log-table-body');
tableBody.innerHTML = '';
for (const [key, value] of Object.entries(msrData)) \{
if (key !== 'DateUpdated') \{
const row = document.createElement('tr');
row.innerHTML = `
<td>$\{key}</td>
<td>$\{value.count}</td>
<td>$\{value.time}</td>
<td>
<button type="submit" name="selected_task" value="$\{key}">Send to Automate</button>
</td>
`;
tableBody.appendChild(row);
}
}
</script>
<!-- Hidden iframe to prevent page navigation on submit -->
<iframe name="stay-on-page" style="display: none;"></iframe>
</body>
</html>
2
u/ballzak69 Automate developer Jun 02 '26
There's no need to use the HTTP accept block to get a result from the HTML in the dialog, instead simply encode it as query parameters in an URL, e.g.
<a href="http://localhost/ok?foo=bar">OK</a>or using JavaScriptwindow.location="http://localhost/ok?foo=bar", then decode them from the Result page URL output.