DynamicFields Module for Orchard Core

DynamicFields is a custom Orchard Core module that introduces a flexible new type of field.
Unlike standard fields, it allows you to define rich, fully interactive editors using vanilla JavaScript - without writing or redeploying backend code.
You can easily wrap existing JavaScript components into a DynamicField and use them directly within your content types.

Key Features

• Build Fields on the Fly
  Create and configure new fields dynamically with zero changes in OrchardCore code and no deployment.

• Adapt Existing JS Components
  Bring any JavaScript-based UI component into Orchard Core as a reusable field.

• GraphQL Support
  Query DynamicFields values seamlessly via Orchard Core’s GraphQL endpoints.

• SQL Indexing
  Field values are fully indexable in SQL, enabling efficient queries and filtering.

• Recipe with Examples
  Shipped with a ready-to-use Orchard Core recipe that installs various DynamicFields examples to explore out-of-the-box.

Included Examples

To showcase the flexibility of DynamicFields, several ready-to-use integrations are included:

• GrapesJS editor - drag & drop web page builder,
• LeafletJS map - interactive maps,
• Coloris - lightweight color picker,
• Vanilla Colorful - modern color picker,
• Simple paint app - vanilla JS canvas drawing tool,
• Image gallery - powered by Picsum Photos free image service,
• Image crop & upload - simple image editing,
• Geo-coordinates field - lightweight alternative to OrchardCore Spatial,
• JSpreadsheet - Excel-like data grid component,
• FullCalendar - interactive calendar,
• CKEditor - powerful rich text editor,
• SimpleInputForm - build simple forms with just JS + HTML,
• Quill - Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Use Cases

• Rapid prototyping of custom field types,
• Integrating third-party JavaScript components into Orchard Core,
• Enhancing the content editing experience without backend development,
• Lowering the barrier for non-OrchardCore experts to create new editors.

Docs

• My first DynamicField - A simple example showing how to create a basic text field and retrieve its value using DynamicFields,
• Payment form - A more advanced example demonstrating a credit card payment form with nested objects, array support, and automatic mapping of form values.