Skip to content

Releases: henriquefps/open-forms

1.0.7

Choose a tag to compare

@henriquefps henriquefps released this 03 Jul 20:35

Release Notes - v1.0.7

🚀 Features & UI Enhancements

  • Static Options Builder: Replaced the legacy raw textarea configuration with a structured visual builder (featuring dedicated Label and Value input rows, deletion triggers, and an add action) for dropdown, radio, checkbox, and matrix fields.
  • Cross-Field Validations Builder: Upgraded validation criteria setup to a visual builder supporting nested AND / OR logical groups, direct field-to-field comparisons, and target field selection via interactive chips/tags.
  • Conditional Business Rules: Added support for direct field-to-field evaluation (Value vs Field comparison) inside the form's business rules editor.
  • Calculated Fields (Hidden Fields): Introduced the schema property isVisibleOnForm, allowing computational helpers to process values and trigger validations behind the scenes without rendering on the user-facing form.
  • Formula Editor Helper: Added interactive quick-insert chips for active numeric fields and standard Math.* functions to simplify calculated field authoring.
  • Builder Internationalization: Added translation support for all UI text strings in the Conditional Business Rules and Cross-Field Validations property panels, replacing hardcoded strings with dynamic dictionary translations (this.translations).
  • Translation Schema Assets: Included baseline dictionaries builder-translations.json and renderer-translations.json in the distribution files as reference resources for custom localization.

♿ Accessibility (WCAG 2.1 Compliance)

  • Keyboard & Screen Reader Experience: Redesigned player markup and interactive widgets (renderer.js) to support accessible tab navigation, clean semantic grid mappings on matrix items, keyboard support for file uploaders, and screen-reader announcements via optimized aria-live containers.

🐞 Bug Fixes

  • Repeater Value Persistence: Resolved a critical issue where adding or removing rows inside repeater structures cleared entered values on existing text, textarea, number, and date inputs.
  • Date Comparisons: Fixed a bug where ISO date strings failed to evaluate under greater/less-than operations due to premature NaN numeric coercion.
  • Memory Leaks: Cleaned up active event listeners (ResizeObserver and signature canvas draw callbacks) that accumulated during consecutive live previews in the form designer.
  • Off-Screen Page Validation: Decoupled validation checking from active DOM queries, ensuring multi-page forms correctly evaluate required fields and rules on pages that are not currently active/rendered.

📝 Documentation

  • SCHEMA_REFERENCE.md: Created a complete specification document detailing the JSON schema, core field components, business rules, and formula configurations.
  • customization.md: Updated theme variable documentation to include spacing, sizing, fonts, and shadow tokens.
  • INTEGRATION_GUIDE.md: Bumped CDN integration links to reference version 1.0.6.

1.0.5

Choose a tag to compare

@henriquefps henriquefps released this 28 Jun 20:31

Release Notes (v1.0.5)
🚀 Features & Customization
New Customization Guide: Added

customization.md
detailing the theme variables (CSS Custom Properties) for full styling customization.
HTML5 Calendar Indicator: Added customization rules for the native webkit calendar picker indicator to respect custom themes using --theme-calendar-invert and --theme-calendar-brightness.
🎨 Styling & UI Updates
Builder: Explicitly set the text color of the Section Title input to var(--color-neutral-10) in builder.js for better visibility and theme compliance.
Form Renderer & Layout CSS:
Implemented dynamic backgrounds utilizing var(--color-neutral-1) and var(--color-neutral-0) for container blocks and inputs.
Adjusted mobile and desktop step progress bar alignment to ensure seamless spacing.
Replaced hardcoded white border checkmark with the custom variable var(--color-neutral-0).
Cleaned up redundant hover color states on the repeater action button.

1.0.4

Choose a tag to compare

@henriquefps henriquefps released this 25 Jun 17:13

Release Notes (v1.0.4)
🚀 Features & Enhancements

Renderer: Added formatFileSize helper to dynamically format file sizes (supporting Bytes, KB, MB, GB, TB) when displaying attachment details in renderer.js.

Builder: Improved text truncation and layout constraints for section headers and text block canvas titles in builder.js to prevent overflow.

🎨 Styling & UI
CSS: Cleaned up styling rules in openforms.css by removing several redundant !important markers and added box-sizing: border-box to matrix table cells.

📝 Documentation
Integration: Updated implementation code snippets and custom theme references in INTEGRATION_GUIDE.md.

1.0.3

Choose a tag to compare

@henriquefps henriquefps released this 15 Jun 21:56

OpenForms v1.0.3 Release Notes
Fix: Added scope-based element selection (parentEl) to signature and file uploader widgets, fixing initialization and DOM selection conflicts when these fields are nested inside repeatable subforms.
Feature: Disabled and hid the advanced business rules panel for fields inside repeaters to prevent rule execution scoping conflicts.

In summary: Fixed a bug where uploads inside of repeatable lists didn't work. Removed the business rules panel from fields inside of repeatable lists, because currently they aren't meant to work.

1.0.2

Choose a tag to compare

@henriquefps henriquefps released this 15 Jun 02:08

OpenForms v1.0.0 - Official Launch

We are excited to announce the initial production release of OpenForms (v1.0.0)!

OpenForms is a lightweight, zero-dependency, open-source (Apache-2.0) visual form builder and renderer designed specifically to run in any web environment—from standard single-page apps to hybrid mobile containers (Capacitor/Cordova) and low-code platforms like OutSystems.

What's Inside?

This release introduces the two core pillars of the suite:

OpenFormBuilder: A visual drag-and-drop schema designer that outputs a clean, structured JSON schema (FormSchemaJSON).
OpenFormRenderer: A responsive, reactive form player that consumes the JSON schema, manages state, handles live calculations, and triggers JavaScript callbacks (onFieldChange, onSubmit).
Key Features🔌 Zero External Dependencies

Written entirely in pure ES6 Vanilla JavaScript and Vanilla CSS. It loads globally via a simple script tag without the need for NPM package managers, bundlers (Vite, Webpack), or framework wrappers. Completely immune to third-party NPM security vulnerabilities.

📐 CSS HSL Theme Customization

Styling is built on a clean token design system utilizing native CSS variables. Redefine a few base HSL variables (like --color-primary) to instantly match OpenForms to your parent application's branding.

📐 Visual Grid Layouts

Supports structural multi-column form layouts. Admins can arrange fields into rows and adjust column spans dynamically on a fluid 12-column responsive layout.

📑 Wizard Workflows (Pagination)

Enables multi-page forms (wizards) with native page-jump validation, keeping the active DOM light and fast by rendering only the active page section.

⚡ Reactive Conditional Visibility (CNF)

Features a Conjunctive Normal Form (AND-of-ORs) logic engine. Conditional visibility rules evaluate on every keystroke/change event to show or hide fields and sections, toggle mandatory constraints (updating HTML required tags and red asterisks), or disable fields (freezing text inputs and signature canvases). It also automatically collapses empty DOM rows to prevent visual layout gaps.

🧮 Secure Calculated Fields & Formulas

Supports spreadsheet-like calculations for number inputs. Formulas parse curly-braced variables (e.g., {price} * {qty}) and evaluate them securely via a strict regex-sanitized math whitelist (blocking script injection). Nested formula dependencies are resolved dynamically using a fixed-point relaxation loop.

📷 Native Mobile Camera & Share Hooks

Out-of-the-box support for Capacitor and Cordova plugins. Automatically detects native shells to trigger native camera captures (via @capacitor/camera / cordova-plugin-camera) and native OS share sheets (via @capacitor/share and @capacitor/filesystem).

🔢 Custom Input Masking

Enforces entry patterns (e.g., dates, phone numbers, or ID cards) using wildcards (9 for numbers, a for letters, * for alphanumeric) in real-time with smooth cursor tracking and options to persist clean (unmasked) values.

♿ WCAG 2.1 Level AA Accessibility (a11y)

Optimized for assistive technologies, featuring high-visibility focus indicators, keyboard-navigable steps (role="tablist" using Arrow/Enter/Space), semantic HTML with strict label-to-input id/for bindings, dynamic validation announcements (aria-describedby / aria-invalid), and screen-reader live regions (aria-live).

🌐 Localization & Swappable Translations

Full support for multi-language overrides. Swap language dictionaries on the fly to translate structural UI elements, placeholder texts, validation warnings, and the form fields themselves.

🔒 Read-Only Presentation Mode

Instantly renders completed forms in an immutable, flat-text view state, suitable for audit logs, historical receipts, and detail screens.

Open-Source & Community

License: Apache-2.0 (100% free for commercial and personal use, royalty-free).
Playground Sandbox: openforms.pages.dev
GitHub Repository: henriquefps/open-forms