FlowFuse Forms: Easy Data Collection for Your Factory Floor

It's often a pain to get important data from the factory floor. Things like doing quality checks still rely on old methods like manual notes and slow spreadsheets. This can lead to delays, errors, and a lot of wasted time before anyone can actually use the information. It's especially tough when you need quick feedback from an operator.

This article will show you an easy way to gather data via a form entry. We'll look at how forms in FlowFuse Dashboard can make collecting data from factory workers much simpler. You'll learn how to build useful forms that connects your team's knowledge directly to your industrial processes. As a practical example, we'll walk you through building a solution to digitize production recipe updates, showing you exactly how to implement it.

#  Prerequisites

Before you begin, make sure you have the following:

• Node-RED: Make sure you have an instance of Node-RED up and running. The quickest way to do this is via. If you don't have an account, check out our free trial.

Then you'll need to add two more sets of nodes to your palette:

• FlowFuse Dashboard: Ensure you have FlowFuse Dashboard (also known as Node-RED Dashboard 2.0 in the community) installed and properly configured on your instance.
• SQLite: Install the node-red-node-sqlite package, which will be used in the practical example.

and finally:

• Basic Node-RED Knowledge: You are familiar with creating and deploying basic flows in Node-RED. If not, consider taking the Node-RED Fundamentals Course sponsored by FlowFuse.

#  Building Forms in FlowFuse Dashboard

The FlowFuse Dashboard makes it easy to build interactive industrial applications using drag-and-drop components — no coding required.

One of these components is the Form widget, which allows you to create versatile forms within your applications. The Form widget supports a wide range of input types, including:

• Text Fields
• Number Inputs
• Date Pickers,
• Multi-line Text Areas
• Dropdown Selection
• Checkboxes

A key benefit of this widget is that you can configure the form fields either statically (with predefined values) or dynamically (updated through your Node-RED flow), depending on your application’s needs.

#  Adding and Configuring the Form Widget

1. Drag the Form widget onto the canvas.
2. Double-click on the widget and create a new group for it with the correct page configuration to render it. (note: if this is the first widget you have, this will automatically be created for you)
3. Set an appropriate size (width and height) according to your preferences.
4. Enter the label for the form.

Now that we have completed all the basic and necessary configurations for the form, let’s add the input elements.

#  Adding Input Fields to the Form Statically

Adding Form Elements

The widget supports various input element types that can be tailored to specific use cases — from collecting simple text to selecting dates or choosing from predefined options.

To add input elements:

1. Click the + add button in the widget’s configuration dialog.
2. A new configuration row will appear for the element.
3. Configure each input element with the following fields:

• Label: This is the visible label for the field shown to the user.
• Name: A unique key used in the message payload (e.g., msg.payload.firstname) when the form is submitted.
• Type: Select the input type. Supported types include:
  • Text: For short text inputs (e.g., name, city).
  • Number: For numeric inputs (e.g., age, price).
  • Date: For selecting a date.
  • Text Area: For longer free-form text.
  • Dropdown: For selecting from a list of predefined values.
    We will cover how to add options to the dropdown field in a later section.
  • Checkbox: For boolean values (checked or unchecked).
• Required: Check this box to make the field mandatory. The form cannot be submitted unless this field is filled.
• Row:: If Multiline is selected, this defines the number of visible rows in the text area.

#  Adding Options to Dropdown Inputs Statically

When you add Dropdown type input element to the Form widget, you need to provide a list of options that the user can choose from. These options can be configured in the widget's configuration dialog.

1. In the widget's configuration dialog, switch to the "Dropdown Options" tab.
2. Click the + add button to insert a new option row.
3. In the new row, fill in the following fields:
   • Dropdown: Select the dropdown input field you want to add options to.
   • Value: The internal value that will be sent in the form payload when this option is selected.
   • Label: The visible text shown to the user in the dropdown list.

Repeat this process for each option you want to add.

#  Pre-filling Forms with Default Values

You can pre-fill forms with default values to streamline user input, reduce typing errors, and save time. This is especially useful in scenarios like editing an existing recipe, where the current details can be loaded directly into the form.

We can pass data to the ui-form node in our flow to set these values dynamically. To do this, send an object in msg.payload to the input of the relevant node. Each key of msg.payload corresponds to a form field and its value represents the pre-filled data.

For example, if your form includes fields for product_name and target_temperature_c, you can send a msg.payload like this:

{
    "product_name": "Eco-Friendly Coating",
    "target_temperature_c": 120.0
};

#  Add Form Input Elements Dynamically at Runtime

In some cases, you may need to define form elements dynamically based on real-time data.

For example, you might want to show additional fields based on a user’s selection or load dropdown options from an external API. This dynamic capability adds a new level of flexibility and interactivity to your forms.

To define form fields at runtime:

1. Use the msg.ui_update.options.
2. options should contain an array of objects, where each object defines the new configuration for the element:

Below are the supported element types and their corresponding JSON configurations:

#  Adding Options to Dropdown Inputs Dynamically at Runtime

To update the options of a dropdown field at runtime, use the msg.ui_update.dropdownOptions property in your flow.

This is useful when you want to update just the dropdown options without changing the rest of the form.

Example:

[
   {
        "dropdown": "Machine Type",
        "value": "A",
        "label": "Option A"
   },
   {
        "dropdown": "Machine Type",
        "value": "B",
        "label": "Option B"
   }
]

The "dropdown" refers to the name of the dropdown field you want to add options for. The "value" represents the internal value that is sent when the user selects the option. The "label" is the option displayed to the user in the dropdown.

#  Handling Input Data Collected from the Dashboard Form

When a user submits the dashboard form, the input data is sent to Node-RED, where it can be accessed and processed. This enables you to perform tasks such as validating the data, transforming it, or sending it to other systems like databases or APIs.

#  Retrieving Submitted Data

The data submitted from the form is transmitted to any nodes connected to the output of the ui-from node, and is contained within msg.payload. Each field’s value can be accessed using the field’s key or name as the property within msg.payload.

For example, let’s say the form includes the following fields:

• Device Name (key: device_name)
• Device ID (key: device_id)
• Device Serial Number (key: serial_number)
• Country (key: country)

After submission, you can access these values like this in your flow:

• Device Name: msg.payload.device_name
• Device ID: msg.payload.device_id
• Device Serial Number: msg.payload.serial_number
• Country: msg.payload.country

You can use this data anywhere in your flow — for example, to save it in a database or store it in FlowFuse’s context storage. Crucially, this collected data can also directly instruct machines on the shop floor, with FlowFuse Device Agent managing that precise control.

#  Building Your Dynamic Production Recipe Update Form

In this section, you will build an advanced flow for dynamically updating production recipes using FlowFuse Forms.

A production recipe, often referred to as a manufacturing recipe or master batch record, is a critical set of instructions that defines the precise parameters, ingredients, and steps required to produce a specific product consistently. This includes details like material quantities, temperature, mixing speeds, pressures, and hold times.

This setup uses a ui-dropdown for selecting recipes and a ui-form that dynamically populates and allows updates to recipe parameters. Everything you have learned so far will come together here to create a practical and interactive solution.

#  Set Up Your SQLite Database

Use the following flow to quickly set up your SQLite database. It creates a recipes table and populates it with demo data.

Steps:

1. Import the flow into your Node-RED editor (from the example provided below).

2. Deploy the flow to activate it.

3. Click the Inject node labeled "Populate Demo Recipes" to insert the sample data.

#  Initial Setup: Populate Dropdown and Define Form Structure

We want this flow to run when our dashboard page loads. It queries your exiting recipes and then dynamically defines both the ui-dropdown's options and the ui-form's structure.

1. Drag an Event node onto the canvas. This node send a message when the dashboard page loads.

2. Connect the ui-event node to an sqlite node. Configure it to connect to your SQLite database, set SQL Query to fixed, and enter SELECT recipe_id FROM recipes; as the query. Ensure Return Output is set to a "Parsed JSON Object".

3. Connect the sqlite node's output to a new function node. Name it "Generate Form & Dropdown Definition". In this function, you will write JavaScript to dynamically create the form's elements and populate the dropdown options. Set the function to have 2 outputs.

// msg.payload contains the recipe_id and recipe_name from SQLite query.
let dropdownOptions = [];
if (msg.payload && Array.isArray(msg.payload)) {
    dropdownOptions = msg.payload.map(recipe => {
        return {
            value: recipe.recipe_id,        // Internal value for dropdown
            label: recipe.recipe_name       // Display text for dropdown
        };
    });
}

// --- Define the ui_form structure (all input elements) ---
let formElements = [
    { type: "text", label: "Recipe ID", key: "recipe_id_display", readOnly: true },
    { type: "text", label: "Product Name", key: "product_name", readOnly: true },
    { type: "text", label: "Version No.", key: "version_no", readOnly: true },
    { type: "number", label: "Target Temp (°C)", key: "target_temperature_c", required: true },
    { type: "number", label: "Mixing Speed (RPM)", key: "mixing_speed_rpm", required: true },
    { type: "number", label: "Pressure (Bar)", key: "pressure_bar" },
    { type: "number", "label": "Material A (kg)", "key": "material_a_kg", "required": true },
    { type: "number", "label": "Material B (kg)", "key": "material_b_kg" },
    { type: "number", "label": "Catalyst (ml)", "key": "catalyst_ml" },
    { type: "number", "label": "Hold Time (min)", "key": "hold_time_min", "required": true },
    { type: "multiline", "label": "Description", "key": "description", "readOnly": true, "rows": 3 }
];

// Output 1: For the ui_dropdown node (msg.options)
let msg1 = { options: dropdownOptions }; 

// Output 2: For the ui_form node (msg.ui_update.options)
let msg2 = { ui_update: { options: formElements } };

return [msg1, msg2]; // Send two separate messages

4. Drag a ui-dropdown node onto the canvas. Configure its dashboard group and label (Select Recipe ID:). Ensure its "Options" list is empty, as it will be populated dynamically. Connect the first output of the "Generate Form & Dropdown Definition" function to the input of this ui_dropdown node.

5. Drag a ui-form widget onto the canvas. Configure its dashboard group and label (Recipe Parameters). Crucially, leave its "Options" list completely empty in its properties. Set the "Submit" button text to Apply and "Cancel" to Clear. Connect the second output of the "Generate Form & Dropdown Definition" function to the input of this ui-form node.

6. Deploy your flow and open the dashboard. You should now see your form with the "Select Recipe" dropdown populated.

#  Populate Form on Recipe Selection

This flow segment pre-fills the form with recipe details when an operator selects a recipe from the dropdown.

1. Connect the output of your dropdown node (from Step 2). This output will carry the selected recipe_id in msg.payload.

2. Connect the ui-dropdown output to a change node. Name it Set Params & Flow Context. Set msg.params.$recipe_id to msg.payload and flow.selected_recipe_id to msg.payload.

3. Connect the change node to an sqlite node. Configure it for your database, set SQL Query to prepared statement, and enter SELECT * FROM recipes WHERE recipe_id = $recipe_id; as the prepared statement. Ensure you add a rule in change node:

   • msg.params.$recipe_id to msg.payload.recipe_id

4. Connect the sqlite node's output to a function node. Name it Show values to form fields. This function will format the retrieved recipe details to pre-fill the form.

let recipeDetails = msg.payload[0]; // Get the first (and only) result

if (recipeDetails) {
    // Map recipe details to the keys of your form elements for pre-filling.
    msg.payload = {
        recipe_id_display: recipeDetails.recipe_id, // For the display field in ui_form
        product_name: recipeDetails.product_name,
        version_no: recipeDetails.version_no,
        target_temperature_c: recipeDetails.target_temperature_c,
        mixing_speed_rpm: recipeDetails.mixing_speed_rpm,
        pressure_bar: recipeDetails.pressure_bar,
        material_a_kg: recipeDetails.material_a_kg,
        material_b_kg: recipeDetails.material_b_kg,
        catalyst_ml: recipeDetails.catalyst_ml,
        hold_time_min: recipeDetails.hold_time_min,
        description: recipeDetails.description
    };
} else {
    // If selection is cleared, prepare an empty payload (except for selected_recipe_id)
    msg.payload = {}; 
}
return msg;

5. Connect the output of the Show values to form fields function node back to the input of your form widget (from Step 2).

#  Handle Form Submission & Update Database

This flow segment processes the data when the operator clicks the "Apply" button, updating the recipe in your database and providing feedback.

1. Connect a new wire from the main output of your ui-form widget. This output fires when the form is submitted.

2. Connect the form's output to a change node. Name it Prepare Update Params. This node will prepare the msg.params object for the SQLite update.

• Rules:
  • set msg.params to JSON {}.
  • set msg.params.$recipe_id to flow.selected_recipe_id.

For each editable field in your form (e.g., target_temperature_c, mixing_speed_rpm), add a rule: set msg.params.$[FIELD_NAME] to msg.payload.[FIELD_NAME].

3. Connect the change node to an sqlite node.

   • Configure it for your database, set SQL Query to prepared statement.
   • Paste your UPDATE SQL query into the "Prepared Statement" field, using the $parameters that match your msg.params.

4. Connect the sqlite node's output to a switch node. Name it Check for Update Success.

• Set Property to payload and Rules to is empty.
• Add 1 output.

5. Connect the switch node's output to a change node. Name it Success Message.

• Set msg.payload to str "Recipe updated successfully".

6. Connect the change node to a ui-notification node to display the success message on the dashboard.
7. Deploy the flow, open the dashboard, and try selecting different recipes and updating them.

For practice, we use an SQLite database. However, since your recipe is often used across an entire production line, it is recommended to store it in a dedicated database instead of locally in SQLite. This ensures it is accessible to all systems and can be utilized by other components in the workflow.

Note: This is just a simple demo we built. When using it in a production environment, you might need to make additional considerations based on your specific requirements."

A demonstration of the dynamic form for recipe updates in action, showing how it streamlines data entry and submission.

Below is the complete flow of the system we built.

#  Conclusion

So, getting your factory data digital doesn't have to be a headache. Relying on paper or tricky old systems just causes slowdowns and mistakes. Plus, many digital form tools are too complicated or don't play nice with your current setup.

That's where FlowFuse comes in. It lets your engineers build exactly what they need for the factory, using simple drag-and-drop tools – no coding required. This means you can ditch the manual steps, cut down on errors, save time, and even lower your IT costs.

Also wiith FlowFuse, you get accurate, real-time data and better control, helping your factory run smarter and much more efficiently.

Want to see how FlowFuse can reduce costs, boost profits, and increase production? Get in touch with us.