From ff33fafb3860d1fd208252fc05684a6141a3a8d3 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Jun 2025 08:29:57 +0400 Subject: [PATCH 01/10] Stepper: Add Form Integration How To topic --- .../00 Implement a Wizard.md | 16 ++ .../05 Set Up App Layout.md | 150 ++++++++++++++++ ... Synchronize Steps and Navigation Panel.md | 161 ++++++++++++++++++ .../15 Implement Validation.md | 93 ++++++++++ 4 files changed, 420 insertions(+) create mode 100644 concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md create mode 100644 concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md create mode 100644 concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md create mode 100644 concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md new file mode 100644 index 0000000000..6ca56358d5 --- /dev/null +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md @@ -0,0 +1,16 @@ +Stepper can be used with [Form](/Documentation/Guide/UI_Components/Form/Overview/) and [MultiView](/Documentation/Guide/UI_Components/MultiView/Overview/) components to implement a wizard-like application. + +This wizard includes three key parts: + +- The Stepper component. +- Step content where the MultiView component shows content for each step. Every view with input fields contains a Form. +- A navigation panel that displays the current step ("Step 1 of 5") and buttons for moving between steps (Next/Back). + +Image, TBA + +To view the complete code of this example, refer to the following demo: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Stepper/FormIntegration/", + name: "Stepper - Form Integration" +} \ No newline at end of file diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md new file mode 100644 index 0000000000..ee79267536 --- /dev/null +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md @@ -0,0 +1,150 @@ +To get started, add Stepper and MultiView to your project. Create a navigation panel by adding a `
` element to display the active step and two [Button](/Documentation/Guide/UI_Components/Button/Overview/) components to a container: + +--- + +##### jQuery + + +
+
+
+
+
Step 1 of 5
+
+
+
+
+
+
+ + + const stepper = $('#stepper').dxStepper({ + items: steps, + }).dxStepper('instance'); + + const stepContent = $('#stepContent').dxMultiView({ + // ... + focusStateEnabled: false, + swipeEnabled: false, + items: multiViewItems, + }).dxMultiView('instance'); + + const prevButton = $('#prevButton').dxButton({ + // ... + text: 'Back', + visible: false, + }).dxButton('instance'); + + const nextButton = $('#nextButton').dxButton({ + // ... + text: 'Next', + }).dxButton('instance'); + +##### Angular + + + + + +
+ + +
+
+ + Step {{ selectedIndex + 1 }} of {{ steps.length }} + +
+
+ + + + +
+
+
+ + + // ... + export class AppComponent { + steps: Item[]; + + constructor(private readonly appService: AppService) { + this.steps = this.appService.getInitialSteps(); + } + } + +##### Vue + +##### React + +--- + +The "Back" button is initially hidden. This tutorial implements logic that shows the button on the second step of the wizard later (see [Synchronize Steps and Navigation Panel](/Documentation/Guide/UI_Components/Stepper/Implement_a_Wizard/#Synchronize_Steps_and_Navigation_Panel)). + +Configure forms for each step with MultiView **items[]**.[template](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/#template): + +--- + +##### jQuery + + + const multiViewItems = [ + { template: getDatesForm() }, + { template: getGuestsForm() }, + { template: getRoomAndMealForm() }, + { template: getAdditionalRequestsForm() }, + { template: getConfirmationTemplate() }, + ]; + + function getDatesForm() { + return () => $('
').append( + $('

').text('Select your check-in and check-out dates. If your dates are flexible, include that information in Additional Requests. We will do our best to suggest best pricing options, depending on room availability.'), + $('

').dxForm({ + formData, + items: [{ + dataField: 'dates', + editorType: 'dxDateRangeBox', + editorOptions: { + elementAttr: { id: 'datesPicker' }, + startDatePlaceholder: 'Check-in', + endDatePlaceholder: 'Check-out', + }, + label: { visible: false }, + }], + }), + ); + } + + function getGuestsForm() { + // Configure the form + } + + function getRoomAndMealForm() { + // Configure the form + } + + function getAdditionalRequestsForm() { + // Configure the form + } + + function getConfirmationTemplate() { + // Configure the form + } + +--- diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md new file mode 100644 index 0000000000..2378f3a45f --- /dev/null +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md @@ -0,0 +1,161 @@ + +--- + +##### jQuery + +To synchronize the **selectedIndex** properties of Stepper and MultiView, create a new function, `setSelectedIndex`. Call it in the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#onSelectionChanged) function of Stepper and the [onClick]() functions of both navigation buttons: + + + const stepper = $('#stepper').dxStepper({ + // ... + onSelectionChanged(e) { + const selectedIndex = e.component.option('selectedIndex'); + + setSelectedIndex(selectedIndex); + }, + }).dxStepper('instance'); + + const prevButton = $('#prevButton').dxButton({ + // ... + onClick: () => { + const selectedIndex = stepper.option('selectedIndex'); + + setSelectedIndex(selectedIndex - 1); + }, + visible: false, + }).dxButton('instance'); + + const nextButton = $('#nextButton').dxButton({ + // ... + onClick: () => { + const selectedIndex = stepper.option('selectedIndex'); + + if (selectedIndex < steps.length - 1) { + setSelectedIndex(selectedIndex + 1); + } + }, + }).dxButton('instance'); + + function setSelectedIndex(index) { + stepper.option('selectedIndex', index); + stepContent.option('selectedIndex', index); + setCurrentStepCaption(index); + updateStepNavigationButtons(index); + + if (index === steps.length - 1) { + stepContent.option('items[4].template', getConfirmationTemplate()); + } + } + +`setSelectedIndex` also updates the navigation panel with `updateStepNavigationButtons` and `setCurrentStepCaption`. + +The `updateStepNavigationButtons` function displays the "Back" button on the second step and changes the "Next" button to "Confirm" on the last step. The "Confirm" button submits the form and disables interaction with the Stepper. For more details, refer to the [Configure a Readonly Stepper](/Documentation/Guide/UI_Components/Stepper/Configure_a_Read-Only_Stepper/) help topic. + +Both navigation buttons are also replaced with a "Reset" button when "Confirm" is clicked: + + + let confirmed = false; + + const nextButton = $('#nextButton').dxButton({ + onClick: () => { + if (selectedIndex < steps.length - 1) { + setSelectedIndex(selectedIndex + 1); + } else if (confirmed) { + reset(); + } else { + confirm(); + } + } + }) + + function confirm() { + confirmed = true; + + setStepperReadonly(true); + setSelectedIndex(steps.length - 1); + } + + function updateStepNavigationButtons(index) { + const isLastStep = index === steps.length - 1; + const lastStepNextButtonText = confirmed ? 'Reset' : 'Confirm'; + const nextButtonText = isLastStep ? lastStepNextButtonText : 'Next'; + + prevButton.option('visible', !!index && !confirmed); + nextButton.option('text', nextButtonText); + } + + function setStepperReadonly(readonly) { + stepper.option('focusStateEnabled', !readonly); + + if (readonly) { + stepper.option('elementAttr', { class: 'readonly' }); + } else { + stepper.resetOption('elementAttr'); + } + } + + + .readonly { + pointer-events: none; + } + +##### Angular + +To synchronize the **selectedIndex** properties of Stepper and MultiView, assign it to a a common variable with two-way data binding syntax: + + + + + +
+ + + + +
+ + + // ... + export class AppComponent { + selectedIndex: number; + + constructor(private readonly appService: AppService) { + // ... + this.selectedIndex = 0; + } + } + +--- + + + +--- + +##### jQuery + + + +--- + +`setCurrentStepCaption` updates the active step indicator as users progress through the Stepper: + +--- + +##### jQuery + + + function setCurrentStepCaption(index) { + if (confirmed) { + $('.current-step').empty(); + } else if (!$('.current-step').text()) { + $('.current-step').append(`Step ${index + 1} of ${steps.length}`); + } else { + $('.selected-index').text(index + 1); + } + } + +--- diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md new file mode 100644 index 0000000000..199c0586f2 --- /dev/null +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md @@ -0,0 +1,93 @@ +To configure validation, assign [validation groups]() and specify [validation rules]() in each MultiView form: + +--- + +##### jQuery + + + const validationGroups = ['dates', 'guests', 'roomAndMealPlan']; + + function getDatesForm() { + return () => $('
').append( + // ... + $('
').dxForm({ + // ... + validationGroup: validationGroups[0], + items: [{ + // ... + isRequired: true, + }], + }), + ); + } + +--- + +This tutorial validates steps only when users move forward. If a step fails validation, the step change is cancelled: + +--- + +##### jQuery + + + const stepper = $('#stepper').dxStepper({ + // ... + onSelectionChanging(args) { + const { component, addedItems, removedItems } = args; + const { items = [] } = component.option(); + + const addedIndex = items.findIndex((item) => item === addedItems[0]); + const removedIndex = items.findIndex((item) => item === removedItems[0]); + const isMoveForward = addedIndex > removedIndex; + + if (isMoveForward && validateStep(removedIndex) === false) { + args.cancel = true; + } + }, + }).dxStepper('instance'); + + function validateStep(index) { + const isValid = getValidationResult(index); + + stepper.option(`items[${index}].isValid`, isValid); + + return isValid; + } + + function getValidationResult(index) { + if (index >= validationGroups.length) { + return true; + } + + return DevExpress.validationEngine.validateGroup(validationGroups[index]).isValid; + } + +--- + +Implement validation in the `onClick` function of the "Next" button: + +--- + +##### jQuery + + const nextButton = $('#nextButton').dxButton({ + // ... + onClick: () => { + // ... + if (selectedIndex < steps.length - 1) { + if (validateStep(selectedIndex)) { + setSelectedIndex(selectedIndex + 1); + } + } + // ... + } + }) + +--- + +Review the full code of this tutorial in the following demo: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Stepper/FormIntegration/", + name: "Stepper - Form Integration" +} \ No newline at end of file From 4e5dae9c0112865e9da0db9b89399a32b2b89705 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Jun 2025 15:04:04 +0400 Subject: [PATCH 02/10] Add remaining content --- .../00 Implement a Wizard.md | 2 +- .../05 Set Up App Layout.md | 224 ++++++++++- ... Synchronize Steps and Navigation Panel.md | 355 ++++++++++++++++-- .../15 Implement Validation.md | 341 ++++++++++++++++- 4 files changed, 880 insertions(+), 42 deletions(-) diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md index 6ca56358d5..9da314e880 100644 --- a/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/00 Implement a Wizard.md @@ -4,7 +4,7 @@ This wizard includes three key parts: - The Stepper component. - Step content where the MultiView component shows content for each step. Every view with input fields contains a Form. -- A navigation panel that displays the current step ("Step 1 of 5") and buttons for moving between steps (Next/Back). +- A navigation panel with an active step indicator ("Step 1 of 5") and buttons for moving between steps ("Next" and "Back"). Image, TBA diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md index ee79267536..f5bfd9c568 100644 --- a/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md @@ -1,4 +1,4 @@ -To get started, add Stepper and MultiView to your project. Create a navigation panel by adding a `
` element to display the active step and two [Button](/Documentation/Guide/UI_Components/Button/Overview/) components to a container: +To get started, add Stepper and MultiView to your project. Create a navigation panel by adding a `
` element for the active step indicator and two [Button](/Documentation/Guide/UI_Components/Button/Overview/) components to a container: --- @@ -43,9 +43,7 @@ To get started, add Stepper and MultiView to your project. Create a navigation p ##### Angular - + @@ -59,8 +57,8 @@ To get started, add Stepper and MultiView to your project. Create a navigation p
- - Step {{ selectedIndex + 1 }} of {{ steps.length }} + + Step 1 of {{ steps.length }}
@@ -80,6 +78,7 @@ To get started, add Stepper and MultiView to your project. Create a navigation p
+ import { DxStepperModule, DxButtonModule, DxMultiViewModule, DxFormModule } from 'devextreme-angular'; // ... export class AppComponent { steps: Item[]; @@ -91,8 +90,99 @@ To get started, add Stepper and MultiView to your project. Create a navigation p ##### Vue + + + + + ##### React + + import { Stepper, Item } from 'devextreme-react/stepper' + import type { IItemProps } from 'devextreme-react/stepper' + import Button from 'devextreme-react/button'; + import { MultiView } from 'devextreme-react/multi-view'; + import { initialSteps } from './data.ts'; + + // ... + export default function App () { + const [steps, setSteps] = useState(initialSteps); + + // ... + return ( + <> + + {steps.map((step) => )} + +
+ + +
+
+ Step 1 of {steps.length} +
+
+
+
+
+ + ) + } + --- The "Back" button is initially hidden. This tutorial implements logic that shows the button on the second step of the wizard later (see [Synchronize Steps and Navigation Panel](/Documentation/Guide/UI_Components/Stepper/Implement_a_Wizard/#Synchronize_Steps_and_Navigation_Panel)). @@ -147,4 +237,126 @@ Configure forms for each step with MultiView **items[]**.[template](/Documentati // Configure the form } +##### Angular + + + +
+ + +
+ +
+ + + + +
+ + + // ... + import { DatesFormComponent } from "./dates-form/dates-form.component"; + import { BookingFormData } from './app.types'; + + // ... + export class AppComponent { + formData: BookingFormData; + + constructor(private readonly appService: AppService) { + // ... + this.formData = this.appService.getInitialFormData(); + } + } + + @NgModule({ + // ... + declarations: [ + // ... + DatesFormComponent, + ] + }) + + +

+ + + + +This tutorial implements custom components as MultiView item templates and a custom type for form data. For more details on how this example is configured, refer to the [Stepper - Form Integration](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Stepper/FormIntegration/) demo. + +##### Vue + + + + + + + + + +This tutorial implements custom components as MultiView item templates and a custom type for form data. For more details on how this example is configured, refer to the [Stepper - Form Integration](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Stepper/FormIntegration/) demo. + +##### React + + + import DatesForm from './DatesForm.tsx'; + + // ... + export default function App () { + const renderDatesForm = useCallback(() => { + return ; + }, [formData]); + + // ... + return ( + <> + +
+ + + + + +
+ + ) + } + + + import { Form, SimpleItem } from 'devextreme-react/form'; + + // ... + const DatesForm: FC = memo(({ formData, validationGroup }) => ( + <> +

+
+ + + + )); + +This tutorial implements custom components as MultiView item templates and a custom type for form data. For more details on how this example is configured, refer to the [Stepper - Form Integration](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Stepper/FormIntegration/) demo. + --- diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md index 2378f3a45f..90e8aa77aa 100644 --- a/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/10 Synchronize Steps and Navigation Panel.md @@ -49,13 +49,32 @@ To synchronize the **selectedIndex** properties of Stepper and MultiView, create `setSelectedIndex` also updates the navigation panel with `updateStepNavigationButtons` and `setCurrentStepCaption`. -The `updateStepNavigationButtons` function displays the "Back" button on the second step and changes the "Next" button to "Confirm" on the last step. The "Confirm" button submits the form and disables interaction with the Stepper. For more details, refer to the [Configure a Readonly Stepper](/Documentation/Guide/UI_Components/Stepper/Configure_a_Read-Only_Stepper/) help topic. - -Both navigation buttons are also replaced with a "Reset" button when "Confirm" is clicked: +`setCurrentStepCaption` updates the active step indicator as users progress through the Stepper: let confirmed = false; + function setCurrentStepCaption(index) { + if (confirmed) { + $('.current-step').empty(); + } else if (!$('.current-step').text()) { + $('.current-step').append(`Step ${index + 1} of ${steps.length}`); + } else { + $('.selected-index').text(index + 1); + } + } + +`updateStepNavigationButtons` displays the "Back" button on the second step. On the last step, the "Next" button changes to "Confirm". When clicked, the "Confirm" button does the following: + +- Submits the form. +- Hides the "Back" button. +- Hides the active step indicator. +- Replaces "Confirm" with "Reset". +- Disables Stepper interactions. + +To learn how to disable Stepper interactions, refer to the [Configure a Readonly Stepper](/Documentation/Guide/UI_Components/Stepper/Configure_a_Read-Only_Stepper/) help topic. + + const nextButton = $('#nextButton').dxButton({ onClick: () => { if (selectedIndex < steps.length - 1) { @@ -68,11 +87,16 @@ Both navigation buttons are also replaced with a "Reset" button when "Confirm" i } }) + function reset() { + confirmed = false; + setSelectedIndex(0); + // ... + } + function confirm() { confirmed = true; - - setStepperReadonly(true); setSelectedIndex(steps.length - 1); + // ... } function updateStepNavigationButtons(index) { @@ -101,7 +125,7 @@ Both navigation buttons are also replaced with a "Reset" button when "Confirm" i ##### Angular -To synchronize the **selectedIndex** properties of Stepper and MultiView, assign it to a a common variable with two-way data binding syntax: +To synchronize the **selectedIndex** properties of Stepper and MultiView, assign them to a common variable with two-way data binding syntax: + +
+
+ + Step {{ selectedIndex + 1 }} of {{ steps.length }} + +
+
+ + + +
+
---- + + // ... + export class AppComponent { + // ... + isConfirmed: boolean; -`setCurrentStepCaption` updates the active step indicator as users progress through the Stepper: + constructor(private readonly appService: AppService) { + // ... + this.isConfirmed = false; + } ---- + getNextButtonText() { + if (this.selectedIndex < this.steps.length - 1) { + return 'Next'; + } -##### jQuery + return this.isConfirmed ? 'Reset' : 'Confirm'; + } - - function setCurrentStepCaption(index) { - if (confirmed) { - $('.current-step').empty(); - } else if (!$('.current-step').text()) { - $('.current-step').append(`Step ${index + 1} of ${steps.length}`); + onPrevButtonClick() { + this.selectedIndex -= 1; + } + + moveNext() { + this.selectedIndex += 1; + } + + reset(){ + this.isConfirmed = false; + this.selectedIndex = 0; + // ... + } + + confirm(){ + this.isConfirmed = true; + } + + onNextButtonClick() { + if (this.selectedIndex < this.steps.length - 1) { + this.moveNext(); + } else if (this.isConfirmed) { + this.reset(); + } else { + this.confirm(); + } + } + } + +##### Vue + +To synchronize the **selectedIndex** properties of Stepper and MultiView, assign them to a common variable using the `v-model` directive: + + + + + + +This example utilizes the `selectedIndex` variable in multiple places to implement navigation panel functionality: + +- The `onPrevButtonClick` and `onNextButtonClick` handlers move to the previous/next step by modifying `selectedIndex`. +- The `nextButtonText` function changes the text of the "Next" button to "Confirm" on the last step. + +When clicked, the "Confirm" button sets the `isConfirmed` Boolean to `true` and does the following: + +- Submits the form. +- Hides the "Back" button. +- Hides the active step indicator. +- Replaces "Confirm" with "Reset". +- Disables Stepper interactions. + +To learn how to disable Stepper interactions, refer to the [Configure a Readonly Stepper](/Documentation/Guide/UI_Components/Stepper/Configure_a_Read-Only_Stepper/) help topic. + + + + + + +##### React + +To synchronize the **selectedIndex** properties of Stepper and MultiView, define a state variable (`selectedIndex`) using the `useState` hook in the `App` function. In the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#onSelectionChanged) event handler of Stepper, set the `selectedIndex` state variable to [SelectionChangedEvent](/Documentation/ApiReference/UI_Components/dxStepper/Types/SelectionChangedEvent/).**component**.**option('selectedIndex')**. Assign the [selectedIndex](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#selectedIndex) property of MultiView to the `selectedIndex` state variable. + + + // ... + export default function App () { + const [selectedIndex, setSelectedIndex] = useState(0); + + const onSelectionChanged = useCallback(({ component }: SelectionChangedEvent) => { + setSelectedIndex(component.option('selectedIndex') ?? 0); + }, []); + + // ... + return ( + <> + + + +
+ + + + +
+ + ) + } + +This example utilizes the `selectedIndex` variable in multiple places to implement navigation panel functionality: + +- The `onPrevButtonClick` and `onNextButtonClick` handlers move to the previous/next step by modifying `selectedIndex`. +- The `nextButtonText` function changes the text of the "Next" button to "Confirm" on the last step. + +When clicked, the "Confirm" button sets the `isConfirmed` Boolean to `true` and does the following: + +- Submits the form. +- Hides the "Back" button. +- Hides the active step indicator. +- Replaces "Confirm" with "Reset". +- Disables Stepper interactions. + +To learn how to disable Stepper interactions, refer to the [Configure a Readonly Stepper](/Documentation/Guide/UI_Components/Stepper/Configure_a_Read-Only_Stepper/) help topic. + + + // ... + export default function App () { + const [isConfirmed, setIsConfirmed] = useState(false); + + const nextButtonText = useMemo(() => { + if (selectedIndex < steps.length - 1) { + return 'Next'; + } + + if (isConfirmed) { + return 'Reset'; + } + + return 'Confirm'; + }, [selectedIndex, isConfirmed]); + + const onPrevButtonClick = useCallback(() => { + setSelectedIndex((prev) => prev - 1); + }, []); + + const moveNext = useCallback(() => { + setSelectedIndex(selectedIndex + 1); + }, [selectedIndex]); + + const onConfirm = useCallback(() => { + setIsConfirmed(true); + // ... + }, []); + + const onReset = useCallback(() => { + setIsConfirmed(false); + setSelectedIndex(0); + // ... + }, []); + + const onNextButtonClick = useCallback(() => { + if (selectedIndex < initialSteps.length -1) { + moveNext(); + } else if (isConfirmed) { + onReset(); + } else { + onConfirm(); + } + }, [selectedIndex, isConfirmed, onConfirm, onReset]); + + // ... + return ( + <> + +
+
+ {!isConfirmed && ( + <> + Step {selectedIndex + 1} of {steps.length} + + )} +
+ +
+
+
+ + ) + } --- diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md index 199c0586f2..5048e52544 100644 --- a/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/15 Implement Validation.md @@ -1,4 +1,4 @@ -To configure validation, assign [validation groups]() and specify [validation rules]() in each MultiView form: +To configure validation, assign [validation groups](/Documentation/ApiReference/UI_Components/dxValidationGroup/) and specify [validation rules](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/) in each MultiView form: --- @@ -21,6 +21,127 @@ To configure validation, assign [validation groups]() and specify [validation ru ); } +##### Angular + + + + + + + + + // ... + export class DatesFormComponent { + @Input() validationGroup: string; + } + + + +
+ + +
+ +
+ + + + +
+ + + // ... + export class AppComponent { + validationGroups = ['dates', 'guests', 'roomAndMealPlan']; + } + +##### Vue + + + + + + + + + + + +##### React + + + import { Form, SimpleItem } from 'devextreme-react/form'; + + // ... + const DatesForm: FC = memo(({ formData, validationGroup }) => ( + <> +

+
+ + + + )); + + + // ... + const validationGroups = ['dates', 'guests', 'roomAndMealPlan']; + + export default function App () { + const renderDatesForm = useCallback(() => { + return ; + }, [formData]); + // ... + } + --- This tutorial validates steps only when users move forward. If a step fails validation, the step change is cancelled: @@ -46,6 +167,19 @@ This tutorial validates steps only when users move forward. If a step fails vali }, }).dxStepper('instance'); + const nextButton = $('#nextButton').dxButton({ + // ... + onClick: () => { + // ... + if (selectedIndex < steps.length - 1) { + if (validateStep(selectedIndex)) { + setSelectedIndex(selectedIndex + 1); + } + } + // ... + } + }) + function validateStep(index) { const isValid = getValidationResult(index); @@ -62,26 +196,205 @@ This tutorial validates steps only when users move forward. If a step fails vali return DevExpress.validationEngine.validateGroup(validationGroups[index]).isValid; } ---- +##### Angular -Implement validation in the `onClick` function of the "Next" button: + + + + ---- + + import validationEngine from 'devextreme/ui/validation_engine'; -##### jQuery + // ... + export class AppComponent { + onSelectionChanging(e: SelectionChangingEvent) { + if (this.isConfirmed) { + e.cancel = true; - const nextButton = $('#nextButton').dxButton({ - // ... - onClick: () => { - // ... - if (selectedIndex < steps.length - 1) { - if (validateStep(selectedIndex)) { - setSelectedIndex(selectedIndex + 1); + return; + } + + const { component, addedItems, removedItems } = e; + const { items = [] } = component.option(); + + const addedIndex = items.findIndex((item: Item) => item === addedItems[0]); + const removedIndex = items.findIndex((item: Item) => item === removedItems[0]); + const isMoveForward = removedIndex > -1 && addedIndex > removedIndex; + + if (isMoveForward) { + const isValid = this.getValidationResult(removedIndex); + + this.setStepValidationResult(removedIndex, isValid); + + if (isValid === false) { + e.cancel = true; } } - // ... } - }) + + moveNext() { + const isValid = this.getValidationResult(this.selectedIndex); + + this.setStepValidationResult(this.selectedIndex, isValid); + + if (isValid) { + this.selectedIndex += 1; + } + } + + getValidationResult(index: number){ + if (index >= this.validationGroups.length) { + return true; + } + + return validationEngine.validateGroup(this.validationGroups[index]).isValid; + } + + setStepValidationResult(index: number, isValid: boolean | undefined){ + this.steps[index].isValid = isValid; + } + } + +##### Vue + + + + + + +##### React + + + import validationEngine from 'devextreme/ui/validation_engine'; + + // ... + export default function App () { + const onSelectionChanging = useCallback((args: SelectionChangingEvent) => { + if (isConfirmed) { + args.cancel = true; + + return; + } + + const { component, addedItems, removedItems } = args; + const { items = [] } = component.option(); + + const addedIndex = items.findIndex((item: IItemProps) => item === addedItems[0]); + const removedIndex = items.findIndex((item: IItemProps) => item === removedItems[0]); + const isMoveForward = addedIndex > removedIndex; + + if (isMoveForward) { + const isValid = getValidationResult(removedIndex); + + setStepValidationResult(removedIndex, isValid); + + if (isValid === false) { + args.cancel = true; + } + } + }, [setStepValidationResult, isConfirmed]); + + const moveNext = useCallback(() => { + const isValid = getValidationResult(selectedIndex); + + setStepValidationResult(selectedIndex, isValid); + + if (isValid){ + setSelectedIndex(selectedIndex + 1); + } + }, [selectedIndex]); + + const getValidationResult = useCallback((index: number) => { + if (index >= validationGroups.length) { + return true; + } + + return validationEngine.validateGroup(validationGroups[index]).isValid; + }, []); + + const setStepValidationResult = useCallback((index: number, isValid: boolean | undefined) => { + setSteps((prev) => prev.map((step, i) => { + if (i === index) { + return { + ...step, + isValid, + } + } + + return step; + })); + }, []); + + return ( + <> + + + + + ) + } --- From a67611c2b558a59d8dc71a7faf79ff27a317b009 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 18 Jun 2025 09:44:49 +0400 Subject: [PATCH 03/10] Add final touches --- .../30 Implement a Wizard/05 Set Up App Layout.md | 12 ++++++++++-- .../10 Synchronize Steps and Navigation Panel.md | 4 ++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md index f5bfd9c568..d7d5d5e007 100644 --- a/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md +++ b/concepts/05 UI Components/Stepper/30 Implement a Wizard/05 Set Up App Layout.md @@ -19,6 +19,7 @@ To get started, add Stepper and MultiView to your project. Create a navigation p const stepper = $('#stepper').dxStepper({ + // ... items: steps, }).dxStepper('instance'); @@ -79,6 +80,7 @@ To get started, add Stepper and MultiView to your project. Create a navigation p import { DxStepperModule, DxButtonModule, DxMultiViewModule, DxFormModule } from 'devextreme-angular'; + import { AppService } from './app.service'; // ... export class AppComponent { steps: Item[]; @@ -187,12 +189,12 @@ To get started, add Stepper and MultiView to your project. Create a navigation p The "Back" button is initially hidden. This tutorial implements logic that shows the button on the second step of the wizard later (see [Synchronize Steps and Navigation Panel](/Documentation/Guide/UI_Components/Stepper/Implement_a_Wizard/#Synchronize_Steps_and_Navigation_Panel)). -Configure forms for each step with MultiView **items[]**.[template](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/#template): - --- ##### jQuery +Configure forms for each step with MultiView **items[]**.[template](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/#template): + const multiViewItems = [ { template: getDatesForm() }, @@ -239,6 +241,8 @@ Configure forms for each step with MultiView **items[]**.[template](/Documentati ##### Angular +Configure forms for each step with MultiView **items[]**.[template](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/#template): +
@@ -286,6 +290,8 @@ This tutorial implements custom components as MultiView item templates and a cus ##### Vue +Configure forms for each step with MultiView **items[]**.[template](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/#template): +