custom variable type widget: single resource collection (1/3) by interim17 · Pull Request #49 · AllenCell/idea-board

interim17 · 2026-02-19T23:26:50Z

Problem

Advances #40

Decap CMS does not natively support a variable type object widget.
A fairly limited variable type list widget exists, but doesn't quite meet our needs, and it's use leads to significantly cluttered UI with deeply nested fields.

In this case we want a single collection for resources (datasets, cell lines, software tools) to associate with an idea, rather than individual collections for each of those resource types.

https://decapcms.org/docs/variable-type-widgets/

Solution

Built a custom widget to handle a variable type, in this case, a resource object that can be one of several varieties and will render unique fields in the UI based on the type selected.

This PR does not address fully migrating all existing resources, or even the desired final set of fields for any resource types, as its a fairly big lift to just get the custom widget built, styled and registered.

In cms/widgets we define a VariableTypeWidgetControl

Even though we only have one implementation, I figured this was likely a pattern that would be repeated or built upon in any of our projects using this CMS so this abstract implementation doesn't need to know anything about the specifics of the config.

VariableResourceWidget
Hold the config in constants where the fields are actually defined and the React component is VariableResourceUnionControl.

In cms.js
We register the component here, in future work we can also register a custom Preview component here.
we also register a hook in the preSave step of the Decap lifecycle, which allows us to use the nested "name" field for a required and hidden top-level name field, which helps to reduce UI noise.

In config.yml

The collection Resources uses the widget, and in the ideas collection relational widgets are used to make a select both for the general resources, and one filtered only to datasets.

netlify · 2026-02-19T23:26:55Z

✅ Deploy Preview for project-idea-board ready!

Name	Link
🔨 Latest commit	`f9283a8`
🔍 Latest deploy log	https://app.netlify.com/projects/project-idea-board/deploys/699f67cbc3d5dc000823887f
😎 Deploy Preview	https://deploy-preview-49--project-idea-board.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

interim17 · 2026-02-19T23:31:13Z

+          - {
+                label: "Datasets",
+                name: "datasets",
+                widget: "relation",
+                collection: "resources",
+                search_fields: ["name"],
+                value_field: "{{slug}}",
+                display_fields: ["name"],
+                multiple: true,
+                required: false,
+                hint: "Select datasets from the Resources collection, if missing, please add to the Resources collection and then finish editing this entry.",
+                filters: [{ field: "resource.type", values: ["dataset"] }],
+            }
+          - {
+                label: "Resources",
+                name: "resources",
+                widget: "relation",
+                collection: "resources",
+                search_fields: ["resource.name", "resource.type"],
+                value_field: "{{slug}}",
+                display_fields: ["resource.type", "resource.name"],
+                multiple: true,
+                required: false,
+                hint: "Select other resources from the Resources collection, if missing, please add to the Resources collection and then finish editing this entry.",
+            }


One select for any resource at all, and one filtered to just datasets. We can provide as many as desired/useful.

Copilot

Pull request overview

Adds a new CMS-managed “Resources” collection backed by a custom union widget, and wires it into the Decap CMS admin so “Ideas” can reference datasets/resources from a single collection.

Changes:

Extend static/admin/config.yml to add a new resources collection and new relation fields on Ideas.
Add a configurable union-style Decap CMS control (resource_union) to author different resource types.
Treat templateKey: resource markdown as “data-only” content in Gatsby page creation.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
static/admin/config.yml	Adds “Datasets/Resources” relation fields to Ideas and introduces a new “Resources” collection using the custom union widget.
src/cms/widgets/VariableTypeWidget/types.ts	Introduces shared config typings for the union widget.
src/cms/widgets/VariableTypeWidget/VariableTypeWidgetControl.tsx	Implements the generic config-driven union widget control (including file field support).
src/cms/widgets/VariableResourceWidget/constants.ts	Defines the resource-type configuration used by the union widget.
src/cms/widgets/VariableResourceWidget/VariableResourceUnionControl.tsx	Binds the generic union widget to the “resource” use-case with concrete type config.
src/cms/widgets/VariableResourceWidget/copyResourceNameHandler.ts	Adds a preSave hook to copy nested resource name into a required top-level field.
src/cms/cms.js	Registers the custom widget and the preSave event handler with Decap CMS.
gatsby-node.js	Adds `resource` to the list of data-only templateKeys to prevent page creation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign in to view

+          - {
+                label: "Resources",
+                name: "resources",
+                widget: "relation",
+                collection: "resources",
+                search_fields: ["resource.name", "resource.type"],
+                value_field: "{{slug}}",
+                display_fields: ["resource.type", "resource.name"],
+                multiple: true,
+                required: false,
+                hint: "Select other resources from the Resources collection, if missing, please add to the Resources collection and then finish editing this entry.",
+            }


Sign in to view

+            { label: "Name", name: "name", type: "input" },
+            {
+                label: "Description",
+                name: "description",
+                type: "textarea",


Sign in to view

+ Certain fields are required to be top-level by the CMS, which clutters the UI
+ when we have a redundant field in widget. This preSave hook copies the resource.name
+ field to the top-level from the nested widget.
+ */


Copilot · 2026-02-19T23:33:19Z

+    };
+
+    const handleTypeChange = (newType: string) => {
+        onChange({ type: newType });


handleTypeChange calls onChange({ type: newType }), which drops all existing fields in the object whenever the user changes the type (e.g., name/description/link will be lost). Preserve the current normalized value when switching types (and optionally clear only the previous type-specific fields) so changing the selector doesn't wipe user input.

Suggested change

onChange({ type: newType });

const current = normalizeValue();

onChange({ ...current, type: newType });

Since fields won't match between types necessarily, I think we should drop them.

Sign in to view

+            { label: "Name", name: "name", type: "input" },
+            {
+                label: "Description",
+                name: "description",
+                type: "textarea",


Sign in to view

+import CMS from "decap-cms-core"
+
+// FRor some reason I could not import CmsEventListener as as a type
+// and it was resolving to the global CMS object, so this is the workaround.
+type CmsEventListenerHandler = Parameters<typeof CMS.registerEventListener>[0]['handler'];
+type CmsEventListenerHandlerArg = Parameters<CmsEventListenerHandler>[0];
+


Copilot · 2026-02-19T23:33:20Z

+            { label: "Name", name: "name", type: "input" },
+            {
+                label: "Description",
+                name: "description",
+                type: "textarea",


cellLine repeats name/description even though the widget's default base fields already include them, causing duplicate inputs bound to the same keys. Remove the duplicates or override baseFields for this type.

Sign in to view

+/**
+ * Implementation of VariableTypeWidgetControl for a union of different
+ * resource types (software tools, datasets, etc.).
+ * Config defined in RESOURCE_TYPES.


Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…eature/resource

…into feature/resource

…eature/resource

rugeli · 2026-02-26T20:10:48Z

+    {
+        label: "Link",
+        name: "link",
+        type: "input",
+        hint: "https://...  ",
+    },


does it make more sense for Link to live only in certain resources within VARIABLE_TYPE_RESOURCE_CONFIG instead of here for all resources, with a clearer hint?
For example, when I selected Protocol(File), the Link field feels a bit unnecessary

Fair point.

There is definitely a second development pass we need to take on this code to ask in more detail what fields each type should have. If you can live with it, I might just leave it for now . It is a bit unnecessary here, but makes the code DRYer in all other configs.

rugeli · 2026-02-26T20:20:02Z

+                label: "File Path",
+                name: "file",
+                type: "file",
+                hint: "Use Media Library to upload, then paste path here",


totally fine for now, but we could make Media Library a clickable link down the line

rugeli · 2026-02-26T20:47:45Z

+CMS.registerEventListener({
+    name: "preSave",
+    handler: copyResourceNameHandler,
+});


nice use of the hook! I just learned about it, seems really smart

meganrm

I like this a lot

interim17 added 2 commits February 19, 2026 14:23

register custom widget for variable type resources

37fd2cf

use resourceDetails in nested fields on resource markdown

5e1c540

interim17 requested a review from Copilot February 19, 2026 23:26

Copilot started reviewing on behalf of interim17 February 19, 2026 23:27 View session

interim17 changed the title ~~Feature/resource~~ add custom widget for variable types to cms config: single resource collection (1/3) Feb 19, 2026

interim17 commented Feb 19, 2026

View reviewed changes

Copilot AI reviewed Feb 19, 2026

View reviewed changes

interim17 and others added 7 commits February 20, 2026 10:54

Update src/cms/widgets/VariableResourceWidget/copyResourceNameHandler.ts

9f43b2b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update static/admin/config.yml

a345633

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

reference resourceDetails in relational widget

478c946

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

e0fd5b2

…eature/resource

remove redundant fields from config

cc336ee

fix typo

6653ea5

run format

eb6b692

interim17 changed the base branch from main to run-format February 23, 2026 22:09

interim17 added 2 commits February 23, 2026 14:11

Merge branch 'run-format' of https://github.com/AllenCell/idea-board …

3e89540

…into feature/resource

update comment

211c55a

interim17 marked this pull request as ready for review February 23, 2026 23:40

interim17 requested review from jessicasyu, meganrm and rugeli February 23, 2026 23:40

interim17 changed the title ~~add custom widget for variable types to cms config: single resource collection (1/3)~~ custom variable type widget: single resource collection (1/3) Feb 23, 2026

Merge branch 'main' of https://github.com/AllenCell/idea-board into f…

079639a

…eature/resource

interim17 changed the base branch from run-format to main February 25, 2026 20:27

interim17 mentioned this pull request Feb 25, 2026

query more of the text fields in markdown and make figure component #37

Merged

format and lint

f9283a8

rugeli reviewed Feb 26, 2026

View reviewed changes

Comment thread src/cms/widgets/VariableTypeWidget/VariableTypeWidgetControl.tsx

rugeli reviewed Feb 26, 2026

View reviewed changes

interim17 requested a review from rugeli March 3, 2026 04:24

meganrm approved these changes Mar 3, 2026

View reviewed changes

rugeli approved these changes Mar 4, 2026

View reviewed changes

interim17 merged commit 8559e07 into main Mar 5, 2026
5 checks passed

interim17 deleted the feature/resource branch March 5, 2026 00:42

	onChange({ type: newType });
	const current = normalizeValue();
	onChange({ ...current, type: newType });

Conversation

interim17 commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Uh oh!

netlify Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for project-idea-board ready!

Uh oh!

interim17 Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

rugeli Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

rugeli Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rugeli Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

meganrm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

interim17 commented Feb 19, 2026 •

edited

Loading

netlify Bot commented Feb 19, 2026 •

edited

Loading