On this page

Jump to any section using the links below

Working with Hubhus Data Fields

Hubhus Data Fields allow you to store complex, structured JSON data inside a lead or booking — ideal for storing lists of windows, product lines, rooms, measurements, or any nested information that doesn't fit in a single field.

This article shows how to declare data fields, store structured JSON, auto-save changes, and use the data in Hubhus templates.

1. Declaring a Hubhus Data Field

<hh-data-fields.raw-input slug="df_windows" required />

Parameters

• slug — the API name of the data field (must match your Hubhus configuration)

• required — optional; forces the field to contain a value before submission

This produces a hidden input:

id="df_windows"

2. Storing JSON Data with JavaScript

Here is a real-world example representing windows that a customer wants installed or replaced.

var windows = [
    {
        id: 'window-1',
        type: 'velux',
        room: 'Living room',
        model: 'GGL-42',
        color: 'white',
        price: 5500
    },
    {
        id: 'window-2',
        type: 'roof-window',
        room: 'Master bedroom',
        model: 'GGL-62',
        color: 'white',
        price: 7200
    }
];

var jsonString = JSON.stringify(windows);

// Always use jQuery inside Hubhus forms
jQuery('#df_windows').val(jsonString);

Key rules:

✔ Use JSON.stringify()
✔ Save with jQuery: jQuery('#df_windows').val()
✔ The ID equals your slug (df_windows)

3. Save Function with Error Handling

function saveToField() {
    try {
        var jsonString = JSON.stringify(windows);

        if (typeof jQuery !== 'undefined') {
            jQuery('#df_windows').val(jsonString);
            console.log('Data saved successfully');
            console.log('Items:', windows.length);
        } else {
            console.error('jQuery not ready – retrying…');
        }

    } catch (e) {
        console.error('JSON save error:', e);

        // Store empty array as fallback
        if (typeof jQuery !== 'undefined') {
            jQuery('#df_windows').val('[]');
        }
    }
}

// Usage:
windows.push(newWindowItem);
saveToField();

4. Auto-Save Pattern (Recommended)

Ensures you don’t lose changes:

setInterval(function() {
    saveToField();
}, 3000);

5. Saving Additional Calculated Fields

Example: Save the total price of all windows into a normal Hubhus field.

Hidden field:

@input[windows-total-price; id="windows-total-price"]

JavaScript calculation:

var total = 0;

windows.forEach(function(w) {
    total += w.price || 0;
});

var totalField = document.getElementById('windows-total-price');
if (totalField) {
    totalField.value = total;
}

Now this total is available for emails, automations, summaries, etc.

6. Best Practices for Data Structures

✔ Do:

• Use clear names: model, room, color, price

• Add unique IDs for each item

• Validate data before saving

• Handle JSON parsing errors

• Store any calculated values explicitly (like total price)

❌ Don’t:

• Store HTML, DOM elements, or functions

• Expect circular references to stringify

• Assume jQuery is ready immediately

• Forget to re-save when your UI changes

7. Accessing the Data in Emails or Templates

Hubhus exposes JSON items as iterable arrays.

Example:

@foreach($lead->df_windows as $w)
    <li>
        {{$w['room']}} – {{$w['type']}} ({{$w['model']}})
        {{$w['color']}} – {{$w['price']}} kr
    </li>
@endforeach

Supports:

• Tables

• Summaries

• Installation plans

• Offer or order overviews
  
  

8. Full data field example 

Use this as a ready-to-adapt boilerplate.

{
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "title": "Windows",
    "type": "array",
    "items": {
        "$ref": "#/$defs/window"
    },
    "$defs": {
        "window": {
            "type": "object",
            "properties": {
                "id": {
                    "type": "string",
                    "title": "Window ID",
                    "minLength": 1
                },
                "type": {
                    "type": "string",
                    "title": "Window Type",
                    "enum": [
                        "velux",
                        "roof-window",
                        "skylight",
                        "standard-frame"
                    ]
                },
                "room": {
                    "type": "string",
                    "title": "Room Name",
                    "minLength": 1
                },
                "model": {
                    "type": "string",
                    "title": "Model Number",
                    "example": "GGL-42"
                },
                "color": {
                    "type": "string",
                    "title": "Color",
                    "enum": [
                        "white",
                        "black",
                        "wood",
                        "antracite"
                    ]
                },
                "notes": {
                    "type": "string",
                    "title": "Notes"
                },
                "price": {
                    "type": "number",
                    "title": "Price",
                    "minimum": 0
                }
            },
            "required": [
                "id",
                "type",
                "room",
                "model"
            ],
            "additionalProperties": false,
            "title": "Window"
        }
    },
    "minItems": 0
}

Summary

This pattern is ideal for storing window lists, products, installation items, service lines, or any structured customer data.

? Common searches

booking setup • calendar setup • appointment scheduling • booking configuration

? Also known as

appointment • scheduling • reservation • calendar event

Related articles

How to add a button that pre-fills a meeting location in the booking form
Randomizing Resource Weights in Booking Forms
Creating and managing booking forms
How do I configure booking duration and time restrictions?
How do I configure booking form error and info messages?