Hi. I am very new to NodeRed, so thank you in advance for any support.
I am trying to build a data entry form using UI_Builder and have hit a brick wall, so I am just after a little advice. I have tried two methods with some success in each, so I would just like to know which method is correct and how I should proceed.
First attempt, using just the uibuilder node I modified the html code to create a data entry form, with all validation built in. this form is perfect and performs as expected, but I get no output from the node, Code at the bottom.
Second attempt: I have followed an online tutorial using the uib element with JSON and passing the values. I have got this to work, but I can figure out how to better customise the form, as it seems to be built into the element node.
Can anyone offer any advice how to progress, should I try to extract the data from my form or try to customise the working copy.
Thanks for the support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGV Downtime Log</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
#agvFaultForm {
background: linear-gradient(to right, #09163F, #052F64, #270447);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
margin: auto;
box-sizing: border-box;
}
h2 {
text-align: center;
color: white;
margin-bottom: 20px;
font-size: 32px;
font-weight: bold;
word-spacing: 10px;
letter-spacing: 2px;
}
label {
display: block;
margin-bottom: 8px;
color: white;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: white;
color: #09163F;
font-size: 16px;
}
.form-row {
display: flex;
justify-content: space-between;
gap: 15px;
}
.form-row .form-column {
flex: 1;
}
.error-message {
color: red;
display: none;
}
input[type="submit"] {
background-color: #9F2D99;
color: white;
border: none;
cursor: pointer;
padding: 12px;
font-size: 18px;
text-transform: uppercase;
width: 100%;
border-radius: 4px;
}
input[type="submit"]:hover {
background-color: #D259CC;
}
</style>
</head>
<body>
<form id="agvFaultForm">
<h2>AGV DOWNTIME LOG</h2>
<!-- Row 1: Date & Time -->
<div class="form-row">
<div class="form-column">
<label for="date">Date:</label>
<input type="date" id="date" name="Date" required>
</div>
<div class="form-column">
<label for="time">Time:</label>
<input type="time" id="time" name="Time" required>
</div>
</div>
<!-- Row 2: AGV Number & Program Number -->
<div class="form-row">
<div class="form-column">
<label for="agvNumber">AGV Number (001-500):</label>
<input type="number" id="agvNumber" name="AGV_Number" required min="1" max="500">
<span class="error-message" id="agvError">AGV number must be between 1 and 500.</span>
</div>
<div class="form-column">
<label for="programNumber">Program Number (00-99):</label>
<input type="number" id="programNumber" name="Program_Number" required>
<span class="error-message" id="programError">Program number must be numeric.</span>
</div>
</div>
<!-- Row 3: Step & Junction -->
<div class="form-row">
<div class="form-column">
<label for="step">Step (001-999):</label>
<input type="number" id="step" name="Step" required>
</div>
<div class="form-column">
<label for="junction">Junction (000-999):</label>
<input type="number" id="junction" name="Junction">
</div>
</div>
<!-- Row 4: Zone & Station -->
<div class="form-row">
<div class="form-column">
<label for="zone">Zone (000-999):</label>
<input type="number" id="zone" name="Zone">
</div>
<div class="form-column">
<label for="station">Station (000-999):</label>
<input type="number" id="station" name="Station">
</div>
</div>
<!-- Row 5: Fault -->
<div>
<label for="fault">Fault:</label>
<select id="fault" name="Fault" required>
<option value="" disabled selected>Select Fault Type</option>
<option value="Off_Track">Off Track</option>
<option value="Step_Error">Step Error</option>
<option value="Low_Battery">Low Battery</option>
<option value="AGV_Facility">AGV Facility</option>
<option value="Trailer_Facility">Trailer Facility</option>
<option value="Traffic_Management">Traffic Management</option>
<option value="WiFi_Dropout">WiFi Dropout</option>
<option value="Auto_Charge_Facility">Auto Charge Facility</option>
<option value="No_Fault_ID">No Fault ID</option>
</select>
</div>
<!-- Row 6: Comment -->
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="Comment" rows="3"></textarea>
</div>
<!-- Row 7: MTTR & DT -->
<div class="form-row">
<div class="form-column">
<label for="mttr">MTTR:</label>
<input type="number" id="mttr" name="MTTR" required value="0">
</div>
<div class="form-column">
<label for="dt">DT:</label>
<input type="number" id="dt" name="DT" required value="0">
</div>
</div>
<!-- Row 8: Battery Voltage & User ID -->
<div class="form-row">
<div class="form-column">
<label for="battVoltage">Battery Voltage (18.0-25.9):</label>
<input type="number" step="0.1" id="battVoltage" name="BattVoltage" required min="18.0" max="25.9">
<span class="error-message" id="battVoltageError">Battery voltage must be between 18.0 and 25.9.</span>
</div>
<div class="form-column">
<label for="userID">User ID (UK#####):</label>
<input type="text" id="userID" name="userID" required value="UK">
<span class="error-message" id="userIDError">User ID must follow the format UK#####.</span>
</div>
</div>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
<script src="./uibuilderfe.min.js"></script> <!-- Include uibuilder front-end -->
<script>
// Initialize uibuilder
uibuilder.start();
// Set default date and time to current values
window.onload = function() {
let currentDate = new Date();
let date = currentDate.toISOString().split('T')[0];
let time = currentDate.toTimeString().split(':');
let formattedTime = `${time[0]}:${time[1]}`;
document.getElementById('date').value = date;
document.getElementById('time').value = formattedTime;
}
// Handle form submission
document.getElementById('agvFaultForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent default form submission
// Capture form data
let formData = {
Date: document.getElementById('date').value,
Time: document.getElementById('time').value,
AGV_Number: document.getElementById('agvNumber').value,
Program_Number: document.getElementById('programNumber').value,
Step: document.getElementById('step').value,
Junction: document.getElementById('junction').value,
Zone: document.getElementById('zone').value,
Station: document.getElementById('station').value,
BattVoltage: document.getElementById('battVoltage').value,
Comment: document.getElementById('comment').value,
MTTR: document.getElementById('mttr').value,
DT: document.getElementById('dt').value,
userID: document.getElementById('userID').value,
Fault: document.getElementById('fault').value
};
// Send the form data to Node-RED via uibuilder
uibuilder.send(formData);
});
</script>
</body>
</html>
- you will see that the uibuilder templates come with a minimum of 3 files. One for HTML (that also controls everything on the browser side), one for CSS and one for JavaScript (that is commented out in the default HTML because the uibuilder client sometimes makes it redundant now).
