devextreme-form

Name: devextreme-form
Author: DevExpress

35stars6forks

How to install devextreme-form?

devexpress/agent-skills/devextreme-form

$npx -y skills add DevExpress/agent-skills --skill devextreme-form

Installs into the current project.

Summary

Help developers use the DevExtreme Form component (dxForm) in Angular, React, Vue, and jQuery. Use when someone asks about Form configuration, formData binding, simple items, editor types, editorOptions, groups, columns, tabs, validation rules, form submission, runtime changes, c

Files · 1

View on GitHub

SKILL.md

1	# DevExtreme Form Skill
2
3	A skill for building and configuring the DevExtreme Form UI component (`dxForm`) across Angular, React, Vue, and jQuery.
4
5	## When to Use This Skill
6
7	- Creating a data entry form bound to an object (`formData`)
8	- Configuring form items with labels, editors, and validation
9	- Organizing items in columns, groups, or tabs
10	- Validating and submitting form data
11	- Changing form or item properties at runtime
12	- Enabling Smart Paste — let users paste unstructured text and let an LLM fill form fields automatically
13
14	## Before You Start
15
16	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
17
18	> ⚠️ Always use the DevExtreme Form (`dxForm` / `DxForm`). Never use react-hook-form, Formik, Yup, or any other form library.
19
20	Before writing any code, ask:
21
22	1. Which framework are you using? Angular, React, Vue, or jQuery?
23	2. What does your data object look like? The shape of `formData` drives the entire item configuration.
24
25	## Component Overview
26
27	The DevExtreme Form generates label-editor pairs (simple items) automatically from a `formData` object. It auto-selects editors by value type: TextBox for strings, NumberBox for numbers, DateBox for dates. You can override the editor type with `editorType` and pass editor-specific options through `editorOptions`. Items can be organized into columns, named groups, and tabs.
28
29	## Documentation & Navigation Guide
30
31	\| Reference file \| When you need to \|
32	\|---\|---\|
33	\| [references/getting-started.md](references/getting-started.md) \| Create your first Form in any framework \|
34	\| [references/items-and-layout.md](references/items-and-layout.md) \| Configure items, columns, groups, colSpan, editorType, editorOptions \|
35	\| [references/validation-and-submit.md](references/validation-and-submit.md) \| Add validation rules, isRequired, and a submit button \|
36	\| [references/runtime-changes.md](references/runtime-changes.md) \| Update form or item properties programmatically at runtime \|
37	\| [references/ai-smart-paste.md](references/ai-smart-paste.md) \| Enable Smart Paste: `aiIntegration` setup, the `smartPaste` button item, events \|
38
39	## Key API
40
41	Form options:
42
43	\| Option \| Type \| Default \| Description \|
44	\|---\|---\|---\|---\|
45	\| `formData` \| `Object` \| `{}` \| The data object the form is bound to \|
46	\| `items` \| `Array` \| `undefined` \| Explicit item configuration; overrides auto-generated items \|
47	\| `colCount` \| `Number \\| 'auto'` \| `1` \| Number of columns in the form layout \|
48	\| `colCountByScreen` \| `Object` \| `undefined` \| Responsive column counts per screen size (`xs`, `sm`, `md`, `lg`) \|
49	\| `readOnly` \| `Boolean` \| `false` \| Makes all editors read-only when `true` \|
50	\| `validationGroup` \| `String` \| `undefined` \| Validation group name for the form's editors \|
51	\| `showValidationSummary` \| `Boolean` \| `false` \| Shows a validation summary at the bottom of the form \|
52	\| `labelLocation` \| `FormLabelLocation` \| `'left'` \| Label position: `'left'`, `'right'`, `'top'` \|
53	\| `labelMode` \| `LabelMode` \| `'outside'` \| Label style: `'outside'`, `'floating'`, `'hidden'`, `'static'` \|
54	\| `onFieldDataChanged` \| `function(e)` \| `null` \| Fires when any field value changes; `e.dataField` and `e.value` available \|
55	\| `scrollingEnabled` \| `Boolean` \| `false` \| Enables vertical scrolling inside the form \|
56	\| `aiIntegration` \| `AIIntegration` \| `undefined` \| Binds the Form to an AI service to enable Smart Paste \|
57	\| `onSmartPasting` \| `function(e)` \| `null` \| Fires before Smart Paste fills the form; cancellable \|
58	\| `onSmartPasted` \| `function(e)` \| `null` \| Fires after Smart Paste fills the form; `e.aiResult` contains the populated data \|
59
60	Form methods:
61
62	\| Method \| Description \|
63	\|---\|---\|
64	\| `getScrollable()` \| Returns the internal Scrollable widget instance. Use to save and restore scroll position — especially useful in long forms with async validation or dynamic field counts \|
65
66	SimpleItem properties (inside `items[]`):
67
68	\| Property \| Type \| Description

People who liked this also viewed

6 picks

Type

devextreme-form

35stars6forks

View on GitHub

How to install devextreme-form?

devexpress/agent-skills/devextreme-form

$npx -y skills add DevExpress/agent-skills --skill devextreme-form

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExtreme Form Skill
2
3	A skill for building and configuring the DevExtreme Form UI component (`dxForm`) across Angular, React, Vue, and jQuery.
4
5	## When to Use This Skill
6
7	- Creating a data entry form bound to an object (`formData`)
8	- Configuring form items with labels, editors, and validation
9	- Organizing items in columns, groups, or tabs
10	- Validating and submitting form data
11	- Changing form or item properties at runtime
12	- Enabling Smart Paste — let users paste unstructured text and let an LLM fill form fields automatically
13
14	## Before You Start
15
16	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
17
18	> ⚠️ Always use the DevExtreme Form (`dxForm` / `DxForm`). Never use react-hook-form, Formik, Yup, or any other form library.
19
20	Before writing any code, ask:
21
22	1. Which framework are you using? Angular, React, Vue, or jQuery?
23	2. What does your data object look like? The shape of `formData` drives the entire item configuration.
24
25	## Component Overview
26
27	The DevExtreme Form generates label-editor pairs (simple items) automatically from a `formData` object. It auto-selects editors by value type: TextBox for strings, NumberBox for numbers, DateBox for dates. You can override the editor type with `editorType` and pass editor-specific options through `editorOptions`. Items can be organized into columns, named groups, and tabs.
28
29	## Documentation & Navigation Guide
30
31	\| Reference file \| When you need to \|
32	\|---\|---\|
33	\| [references/getting-started.md](references/getting-started.md) \| Create your first Form in any framework \|
34	\| [references/items-and-layout.md](references/items-and-layout.md) \| Configure items, columns, groups, colSpan, editorType, editorOptions \|
35	\| [references/validation-and-submit.md](references/validation-and-submit.md) \| Add validation rules, isRequired, and a submit button \|
36	\| [references/runtime-changes.md](references/runtime-changes.md) \| Update form or item properties programmatically at runtime \|
37	\| [references/ai-smart-paste.md](references/ai-smart-paste.md) \| Enable Smart Paste: `aiIntegration` setup, the `smartPaste` button item, events \|
38
39	## Key API
40
41	Form options:
42
43	\| Option \| Type \| Default \| Description \|
44	\|---\|---\|---\|---\|
45	\| `formData` \| `Object` \| `{}` \| The data object the form is bound to \|
46	\| `items` \| `Array` \| `undefined` \| Explicit item configuration; overrides auto-generated items \|
47	\| `colCount` \| `Number \\| 'auto'` \| `1` \| Number of columns in the form layout \|
48	\| `colCountByScreen` \| `Object` \| `undefined` \| Responsive column counts per screen size (`xs`, `sm`, `md`, `lg`) \|
49	\| `readOnly` \| `Boolean` \| `false` \| Makes all editors read-only when `true` \|
50	\| `validationGroup` \| `String` \| `undefined` \| Validation group name for the form's editors \|
51	\| `showValidationSummary` \| `Boolean` \| `false` \| Shows a validation summary at the bottom of the form \|
52	\| `labelLocation` \| `FormLabelLocation` \| `'left'` \| Label position: `'left'`, `'right'`, `'top'` \|
53	\| `labelMode` \| `LabelMode` \| `'outside'` \| Label style: `'outside'`, `'floating'`, `'hidden'`, `'static'` \|
54	\| `onFieldDataChanged` \| `function(e)` \| `null` \| Fires when any field value changes; `e.dataField` and `e.value` available \|
55	\| `scrollingEnabled` \| `Boolean` \| `false` \| Enables vertical scrolling inside the form \|
56	\| `aiIntegration` \| `AIIntegration` \| `undefined` \| Binds the Form to an AI service to enable Smart Paste \|
57	\| `onSmartPasting` \| `function(e)` \| `null` \| Fires before Smart Paste fills the form; cancellable \|
58	\| `onSmartPasted` \| `function(e)` \| `null` \| Fires after Smart Paste fills the form; `e.aiResult` contains the populated data \|
59
60	Form methods:
61
62	\| Method \| Description \|
63	\|---\|---\|
64	\| `getScrollable()` \| Returns the internal Scrollable widget instance. Use to save and restore scroll position — especially useful in long forms with async validation or dynamic field counts \|
65
66	SimpleItem properties (inside `items[]`):
67
68	\| Property \| Type \| Description

People who liked this also viewed

6 picks

Type