# Data confirmation - ConfirmationSection

The data confirmation section is used to define a summary with the values of selected application fields before submission. Additionally, it allows updating specified application fields that are linked to the components placed in the section.

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/VLt6SFPr20xn5InKfq95/35k_files/image2025-5-15_15-57-58.png)

## Description of operation

* To link a field placed in the section with a specific application field, you must indicate that application field as the **Data source from another field** (valueSourceId) of the component in the section.
* After confirming the data entered in the section, it will be copied to the field indicated as valueSourceId.
* If we also want a change in the application field's value to trigger an update of the linked field in the section, for the component in the section you should [define a dependency](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/dynamicznosc-formularza/nasluchiwanie-i-czyszczenie) on the application field.&#x20;

The data confirmation component works in two modes: edit and preview.

{% stepper %}
{% step %}

### Preview mode

In preview mode the section displays the field **Label**, **Content** and a link used to switch to edit mode. After clicking the link, the component switches to edit mode.
{% endstep %}

{% step %}

### Edit mode

In edit mode the section displays all components placed on it according to the section layout and additionally places a link on the right side used to confirm the entered changes.

Fields in the section are validated similarly to all other application fields. After confirming changes and successful validation, the data is sent to the component on the application linked by **Data source from another field**.

Data confirmation is not possible in case of any validation errors in the section fields. After successful confirmation of changes the section returns to preview mode.

When the page containing the section is reopened, the component returns to its initial state (i.e., it takes values from the linked application fields).

In the case of discarding changes using the **Cancel** the decisive setting is the section configuration in Eximee Designer - the checked option **Preserve values on cancel** (preserveValuesOnCancel) will keep the previous values entered in the section components; unchecked will clear them.
{% endstep %}
{% endstepper %}

## Component dependencies

A change in the value of a component on which the section depends causes recalculation of its state and the state of all components contained within it.

When any component in the section changes, the values of all components dependent on it are recalculated.

## Arranging components (layout)

Within the section you can define a layout analogous to the layout for the application page.

## Validation errors

Validation errors on the ConfirmationSection do not cause the Send application button to be hidden. **Submit application.**

![Illustration 1. Component appearance on the application](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/cMYeo7uVp2EN2QJrm4QQ/35k_files/image2025-5-16_8-53-25.png)

<p align="center"></p>

## Component properties

| Eximee Designer property                                       | Attribute name in the Source | Description                                                    |
| -------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------- |
| **ARIA description for the Edit button** (section **WCAG**)    | editLinkAriaDescriptionKey   | Aria description (aria-description) for the button **Edit**    |
| **ARIA description for the Confirm button** (section **WCAG**) | submitLinkAriaDescriptionKey | Aria description (aria-description) for the button **Confirm** |

> More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

{% hint style="info" %}
Demo application: demoConfirmationSection
{% endhint %}

{% hint style="info" %}
&#x20;♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}
