DynamicField Module

[lampersky]

DynamicField Module for Orchard Core

DynamicField 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 DynamicField 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 DynamicField examples to explore out-of-the-box.

Included Examples

To showcase the flexibility of DynamicField, 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.

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.

DEMO

Source

You can find source code here.
If you think this feature would be a good fit for OrchardCore Modules, please let me know, and I’ll prepare a PR

During the development of this feature, I also discovered an issue with the content preview, which has been addressed.

[hishamco]

We already implemented GrapesJS a long time ago in OCC https://github.com/OrchardCoreContrib/OrchardCoreContrib.Modules/tree/main/src/OrchardCoreContrib.Html. I'm wondering how this is implemented in a DynamicField

[sebastienros]

Very nice. Do you want to demo it during a meeting?

[Piedone]

+1 for a demo.

[Piedone]

I'd suggest you publish this module as only its own source in a repo, not as part of an OC fork, and on NuGet (see https://github.com/Lombiq/GitHub-Actions/blob/dev/Docs/Workflows/Productivity/PublishNuGetPackage.md). That would allow others to use it too.

[lampersky]

I did it as a fork, because I thought it is a nice addition to OC

[lampersky]

I've just added a few more editor examples:

• JSpreadsheet – Excel-like data grid component,
• FullCalendar – interactive calendar,
• CKEditor – powerful rich text editor,
• SimpleInputForm – build simple forms with just JS + HTML.

To make developing custom DynamicFields even easier, a new editor has been added that provides a live preview of the editor as you build it.

DEMO

tagging for visibility @sebastienros @Piedone

[Piedone]

Oh, very cool! Don't you want to do a demo at the OC meeting too? It'd get even more visibility and also get the attendees involved.

[lampersky]

Oh, very cool! Don't you want to do a demo at the OC meeting too? It'd get even more visibility and also get the attendees involved.

Thanks, will try to find time to join. Just to confirm, is the OC meeting on Tuesday or Thursday? And what time? @Piedone

[Piedone]

Tuesday at 12 PM PST, see here: https://docs.orchardcore.net/en/latest/contributing/meetings/#steering-committee-meeting