feat: implement dependsOn/visibleOn, ActionParam collection, page templates by Copilot · Pull Request #393 · objectstack-ai/objectui

Copilot · 2026-02-07T17:50:12Z

Implements remaining ROADMAP gaps: conditional form fields, pre-execution param collection, and predefined page layout templates. Adds a showcase example demonstrating all features.

FormField.dependsOn & visibleOn runtime

FormSectionRenderer evaluates dependsOn and visibleOn at render time via watch() + ExpressionEvaluator
dependsOn hides the field until the parent field has a value
visibleOn evaluates template expressions against live form data
watch() only called when conditional fields exist in the section

// dependsOn: sub_category hidden until category is selected
{ field: 'sub_category', dependsOn: 'category' }

// visibleOn: price only shown when status is active
{ field: 'price', visibleOn: "${data.status === 'active'}" }

ActionParam UI collection

ParamCollectionHandler type + ActionParamDef interface on ActionRunner
execute() invokes handler before action execution when actionParams[] is defined; null return cancels
ActionParamDialog component (Shadcn Dialog) renders text/number/boolean/select/date/textarea inputs with validation
Wired into ActionProvider via onParamCollection prop

Page.template support

4 predefined templates in TEMPLATE_REGISTRY: default, header-sidebar-main, three-column, dashboard
Template resolution takes priority over pageType
Unknown template names fall back to pageType-based layout

Showcase example

ShowcaseObject with dependsOn, visibleOn, and 3 actions with params definitions
"Page Templates" page using header-sidebar-main template
6 sample records with varied statuses

Tests

6 ActionRunner param collection tests
4 FormRenderer dependsOn/visibleOn tests
6 PageRenderer template tests
No regressions (same 7 pre-existing MSW failures)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

vercel · 2026-02-07T17:50:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Feb 7, 2026 6:34pm
objectui-console	Error		Feb 7, 2026 6:34pm
objectui-storybook	Ready	Preview, Comment	Feb 7, 2026 6:34pm

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

…llection, and Page.template support Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

… templates, and showcase example Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

…nput Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot

Pull request overview

This PR closes several roadmap gaps by adding runtime support for conditional form fields (dependsOn, visibleOn), introducing pre-execution action parameter collection via a pluggable handler + dialog UI, and adding predefined Page.template layouts (with a kitchen-sink showcase and new tests).

Changes:

Add conditional field visibility evaluation in the React form renderer (dependsOn + visibleOn) with new tests.
Add ParamCollectionHandler + actionParams support in ActionRunner, plus a Shadcn-based ActionParamDialog and core tests.
Add page template registry + resolution logic in PageRenderer, with new template tests and an updated kitchen-sink showcase.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/react/src/context/ActionContext.tsx	Plumbs `onParamCollection` into the shared `ActionRunner` instance.
packages/react/src/components/form/FormRenderer.tsx	Adds `visibleOn`/`dependsOn` evaluation and form value watching for conditional fields.
packages/react/src/components/form/FormRenderer.test.tsx	Adds tests for `dependsOn` and `visibleOn`.
packages/react/src/components/form/FieldFactory.tsx	Updates conditional visibility comments (but logic remains `hidden` only).
packages/core/src/actions/ActionRunner.ts	Adds `ParamCollectionHandler`, `ActionParamDef`, and param collection merge into `action.params`.
packages/core/src/actions/tests/ActionRunner.params.test.ts	Adds unit tests for param collection behavior.
packages/components/src/custom/action-param-dialog.tsx	New dialog component to collect action param values.
packages/components/src/custom/index.ts	Re-exports the new `ActionParamDialog`.
packages/components/src/renderers/layout/page.tsx	Adds template layout components + template resolution priority over `pageType`.
packages/components/src/tests/PageRendererRegions.test.tsx	Adds tests for templates and fallback behavior.
examples/kitchen-sink/src/objects/showcase.object.ts	Adds a showcase object demonstrating conditional fields + actions with param definitions.
examples/kitchen-sink/objectstack.config.ts	Registers showcase object/page and seeds demo records.
ROADMAP.md	Marks roadmap items complete for dependsOn/visibleOn, action param UI, and page templates.
.gitignore	Ignores Vite timestamp artifacts.

Copilot · 2026-02-07T18:41:08Z

+      if (action.actionParams && Array.isArray(action.actionParams) && action.actionParams.length > 0) {
+        if (this.paramCollectionHandler) {
+          const collected = await this.paramCollectionHandler(action.actionParams);
+          if (collected === null) {
+            return { success: false, error: 'Action cancelled by user (params)' };
+          }
+          // Merge collected params into action.params


ActionRunner looks for param definitions on action.actionParams, but the spec-aligned ActionSchema uses params?: ActionParam[] for param definitions (and the UI renderers currently pass schema.params into ActionDef.params). As a result, param collection won’t run and executeAPI() will treat the param-definition array as the request body. Consider adding a compatibility path (e.g., if action.actionParams is missing and action.params is an array, treat it as param definitions and clear/move it before execution) or updating the runner’s accepted shape to align with the schema-to-runner mapping used in the UI layer.

Suggested change

if (action.actionParams && Array.isArray(action.actionParams) && action.actionParams.length > 0) {

if (this.paramCollectionHandler) {

const collected = await this.paramCollectionHandler(action.actionParams);

if (collected === null) {

return { success: false, error: 'Action cancelled by user (params)' };

}

// Merge collected params into action.params

// Compatibility: spec-aligned ActionSchema uses `params?: ActionParam[]`

// for param definitions, while older code used `actionParams`.

let paramDefinitions = action.actionParams;

// If no explicit actionParams are provided, but params is an array,

// treat it as the param-definition array. We then clear params so that

// executeAPI does not interpret the definitions as the request body.

if (

(!paramDefinitions || paramDefinitions.length === 0) &&

Array.isArray(action.params) &&

action.params.length > 0

) {

paramDefinitions = action.params;

// Preserve for downstream consumers expecting `action.actionParams`

(action as any).actionParams = paramDefinitions;

// Clear params to avoid passing definitions as a request payload

(action as any).params = undefined;

}

if (paramDefinitions && Array.isArray(paramDefinitions) && paramDefinitions.length > 0) {

if (this.paramCollectionHandler) {

const collected = await this.paramCollectionHandler(paramDefinitions);

if (collected === null) {

return { success: false, error: 'Action cancelled by user (params)' };

}

// Merge collected params into action.params as the concrete payload

Copilot · 2026-02-07T18:41:09Z

+    expect(container.querySelector('[data-template="dashboard"]')).toBeDefined();
+  });


toBeDefined() does not fail for null. Replace with not.toBeNull() / toBeTruthy() (or toBeInTheDocument()) to ensure the template marker is actually present.

Copilot · 2026-02-07T18:41:09Z

+    expect(container.querySelector('[data-page-type="home"]')).toBeDefined();
+  });


container.querySelector(...) returns Element | null; toBeDefined() won’t fail for null. Use not.toBeNull() / toBeTruthy() (or toBeInTheDocument()) to correctly assert the fallback layout marker exists.

Copilot · 2026-02-07T18:41:09Z

+    expect(container.querySelector('[data-template="dashboard"]')).toBeDefined();
+  });


toBeDefined() will still pass if querySelector(...) returns null. Use not.toBeNull() / toBeTruthy() (or toBeInTheDocument()) so the test actually verifies template priority behavior.

Copilot · 2026-02-07T18:41:09Z

+  // Watch form values for conditional field evaluation
+  // Only watch when there are fields with dependsOn or visibleOn to avoid
+  // unnecessary re-renders in forms without conditional fields.
+  const allFormValues = methods.watch();
+  const formValues = hasConditionalFields ? allFormValues : undefined;
+


methods.watch() is called unconditionally, so this section will still subscribe to all form values and re-render on every change even when hasConditionalFields is false (the formValues ternary doesn’t prevent the subscription). To actually avoid the subscription, only call watch() when hasConditionalFields is true (e.g., conditionally invoke methods.watch()/useWatch and pass a stable default when not watching).

Copilot · 2026-02-07T18:41:10Z

+  // Initialize values from defaultValues
+  const [values, setValues] = useState<Record<string, any>>(() => {
+    const initial: Record<string, any> = {};
+    params.forEach((p) => {
+      if (p.defaultValue !== undefined) {
+        initial[p.name] = p.defaultValue;
+      } else {
+        initial[p.name] = p.type === 'boolean' ? false : '';
+      }
+    });
+    return initial;
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});


values state is initialized from params only on the first render. If the dialog is reopened or params changes between openings, previous values/errors will persist. Consider resetting values/errors in an effect when open becomes true and/or when params changes.

Copilot · 2026-02-07T18:41:10Z

+/** Template: full-width single column */
+const FullWidthTemplate: React.FC<{ schema: PageSchema }> = ({ schema }) => {
+  if (schema.regions && schema.regions.length > 0) {
+    return <RegionLayout regions={schema.regions} pageType={schema.pageType} />;


FullWidthTemplate passes schema.pageType through to RegionLayout, which can be undefined even though PageRenderer normalizes pageType to 'record'. If a page sets template: 'default' but omits pageType, the data-page-layout marker becomes undefined and may diverge from the non-template path. Consider using schema.pageType || 'record' (or passing the already-normalized pageType) for consistency.

Suggested change

return <RegionLayout regions={schema.regions} pageType={schema.pageType} />;

return <RegionLayout regions={schema.regions} pageType={schema.pageType || 'record'} />;

Copilot · 2026-02-07T18:41:11Z

+    expect(container.querySelector('[data-template="header-sidebar-main"]')).toBeDefined();
+  });


toBeDefined() will pass even if querySelector(...) returns null (since null is “defined”). Use a stricter assertion like not.toBeNull() / toBeTruthy() (or toBeInTheDocument() with jest-dom) so this actually verifies the template wrapper exists.

Copilot · 2026-02-07T18:41:11Z

+    expect(container.querySelector('[data-template="three-column"]')).toBeDefined();
+  });


toBeDefined() will pass even if querySelector(...) returns null. Use not.toBeNull() / toBeTruthy() (or toBeInTheDocument()) to make this assertion meaningful.

Copilot · 2026-02-07T18:41:11Z

+  // Fields are hidden when explicitly hidden or when visibleOn evaluates to false
+  // Note: dependsOn is handled at the FormSectionRenderer level


The comment says fields are hidden “when visibleOn evaluates to false”, but FieldFactory only checks field.hidden and does not evaluate visibleOn. Since visibility is handled in FormSectionRenderer, update this comment to avoid implying logic that isn’t present here.

Suggested change

// Fields are hidden when explicitly hidden or when visibleOn evaluates to false

// Note: dependsOn is handled at the FormSectionRenderer level

// This component only respects the explicit `hidden` flag on the field.

// Other dynamic visibility rules (e.g. visibleOn, dependsOn) are evaluated in FormSectionRenderer.

Initial plan

04e4fac

Copilot AI assigned Copilot and hotlong Feb 7, 2026

Copilot started work on behalf of hotlong February 7, 2026 17:50 View session

vercel Bot had a problem deploying to Preview – objectui-console February 7, 2026 17:54 Failure

vercel Bot deployed to Preview – objectui February 7, 2026 17:58 View deployment

vercel Bot deployed to Preview – objectui-storybook February 7, 2026 17:59 View deployment

Initial plan for roadmap feature implementation and examples

462d00e

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel Bot had a problem deploying to Preview – objectui-console February 7, 2026 18:04 Failure

vercel Bot deployed to Preview – objectui February 7, 2026 18:08 View deployment

feat: implement FormField.dependsOn/visibleOn runtime, ActionParam co…

8708c83

…llection, and Page.template support Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel Bot deployed to Preview – objectui February 7, 2026 18:17 View deployment

vercel Bot deployed to Preview – objectui-storybook February 7, 2026 18:19 View deployment

vercel Bot had a problem deploying to Preview – objectui-console February 7, 2026 18:19 Failure

Copilot AI and others added 2 commits February 7, 2026 18:19

feat: add tests for dependsOn/visibleOn, ActionParam collection, page…

3f3f08a

… templates, and showcase example Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

fix: address code review feedback - optimize watch, fix zero number i…

dc38530

…nput Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel Bot had a problem deploying to Preview – objectui-console February 7, 2026 18:25 Failure

Copilot AI changed the title ~~[WIP] Complete development of ObjectUI per UI protocol~~ feat: implement dependsOn/visibleOn, ActionParam collection, page templates Feb 7, 2026

Copilot AI requested a review from hotlong February 7, 2026 18:29

Copilot finished work on behalf of hotlong February 7, 2026 18:29

vercel Bot deployed to Preview – objectui February 7, 2026 18:30 View deployment

vercel Bot deployed to Preview – objectui-storybook February 7, 2026 18:34 View deployment

hotlong marked this pull request as ready for review February 7, 2026 18:36

Copilot AI review requested due to automatic review settings February 7, 2026 18:36

hotlong merged commit ec5d799 into main Feb 7, 2026
5 of 6 checks passed

Copilot started reviewing on behalf of hotlong February 7, 2026 18:36 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement dependsOn/visibleOn, ActionParam collection, page templates#393

feat: implement dependsOn/visibleOn, ActionParam collection, page templates#393
hotlong merged 5 commits intomainfrom
copilot/complete-development-according-to-document

Copilot AI commented Feb 7, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Feb 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-      if (action.actionParams && Array.isArray(action.actionParams) && action.actionParams.length > 0) {
-        if (this.paramCollectionHandler) {
-          const collected = await this.paramCollectionHandler(action.actionParams);
-          if (collected === null) {
-            return { success: false, error: 'Action cancelled by user (params)' };
-          }
-          // Merge collected params into action.params
+      // Compatibility: spec-aligned ActionSchema uses `params?: ActionParam[]`
+      // for param definitions, while older code used `actionParams`.
+      let paramDefinitions = action.actionParams;
+      // If no explicit actionParams are provided, but params is an array,
+      // treat it as the param-definition array. We then clear params so that
+      // executeAPI does not interpret the definitions as the request body.
+      if (
+        (!paramDefinitions || paramDefinitions.length === 0) &&
+        Array.isArray(action.params) &&
+        action.params.length > 0
+      ) {
+        paramDefinitions = action.params;
+        // Preserve for downstream consumers expecting `action.actionParams`
+        (action as any).actionParams = paramDefinitions;
+        // Clear params to avoid passing definitions as a request payload
+        (action as any).params = undefined;
+      }
+      if (paramDefinitions && Array.isArray(paramDefinitions) && paramDefinitions.length > 0) {
+        if (this.paramCollectionHandler) {
+          const collected = await this.paramCollectionHandler(paramDefinitions);
+          if (collected === null) {
+            return { success: false, error: 'Action cancelled by user (params)' };
+          }
+          // Merge collected params into action.params as the concrete payload

		expect(container.querySelector('[data-template="dashboard"]')).toBeDefined();
		});

		expect(container.querySelector('[data-page-type="home"]')).toBeDefined();
		});

	return <RegionLayout regions={schema.regions} pageType={schema.pageType} />;
	return <RegionLayout regions={schema.regions} pageType={schema.pageType \|\| 'record'} />;

		// Fields are hidden when explicitly hidden or when visibleOn evaluates to false
		// Note: dependsOn is handled at the FormSectionRenderer level

Conversation

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

Uh oh!

FormField.dependsOn & visibleOn runtime

ActionParam UI collection

Page.template support

Showcase example

Tests

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Feb 7, 2026 •

edited

Loading

vercel Bot commented Feb 7, 2026 •

edited

Loading