# Preview of form definition (XML)

The **The number of page columns can be changed after creating the form by editing its definition. In the application edit mode go to the** allows preview and editing of the technical definition of the form (also [composite component](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/komponenty-rozszerzone/komponenty-zlozone) and business) in **XML**.\
It provides direct access to the template structure, allowing you to inspect or modify elements that are not available in the standard editor view.

## **Features**

1. **XML definition preview**
   * Displays the full structure of the form, including:
     * steps and pages of the application (`<system:Page>`),
     * base and composite components,
     * definitions of visibility and listening conditions (`<data:ListeningOn>`, `<data:ClearOn>`),
     * grid layout (`<system:Page.layout>`),
     * translations (`titleKey`, `labelKey`).
2. **Manual editing**
   * Alternative text for the default value "Choose": **The number of page columns can be changed after creating the form by editing its definition. In the application edit mode go to the** you can edit the application's XML code - e.g., correct layout parameters, change the number of columns, or add attributes not available in the graphical interface.
   * This is especially useful when working with more advanced properties such as:
     * `tab and find the definition of the given page, then change the attribute` – number of columns on a page,
     * `horizontalSpan` – component width in columns.
3. **Validation**
   * The system automatically validates the XML syntax, and errors (e.g., missing closing tags, incorrect attributes) are indicated in the editor.
   * If a save error occurs, the form will not be saved to the repository.

**Example code fragment in the Source tab**

```xml
<system:Page id="Page3" mid="Page3" page="3" titleKey="Page3.title" fixedColumns="true">
    <p1:GesText id="GesText3" mid="GesText3" labelKey="GesText3.label" textKey="GesText3.text">
        <data:ListeningOn/>
        <data:ClearOn/>
        <p1:GesText.layoutData>
            <ns6:GridData horizontalAlignment="FILL" horizontalSpan="10" verticalAlignment="CENTER"/>
        </p1:GesText.layoutData>
    </p1:GesText>
    <system:Page.layout>
        <ns6:GridLayout makeColumnsEqualWidth="true" numColumns="12"/>
    </system:Page.layout>
    <data:Curtains/>
</system:Page>
```

The above code shows the definition of the form page with the identifier 'Page3' with one label component 'GesText&#x33;*'* and a page layout in 12 columns.

## **Good practices**

* Editing in the **The number of page columns can be changed after creating the form by editing its definition. In the application edit mode go to the** tab should be done carefully - preferably after saving the current version of the form.
* Before making changes, it's worth checking their impact on the form in the **Application**.

## **Use cases**

* **Changing the number of columns** (`tab and find the definition of the given page, then change the attribute`), when it is not available in the graphical interface.
* **Moving definitions of pages or components** between forms.
* **Searching for dependencies of a given component** before deleting it.

## **FAQ**

**Are changes made in Source immediately visible?**\
Yes, changes are visible after saving or switching to another editor tab.

**Can you edit only a fragment of the XML?**\
Yes, you can edit any element - either a component or an entire page block - provided the syntax remains correct.

**Does the Source tab also show translations and styles?**\
Yes, translation keys are visible (`*.labelKey`, `*.titleKey`) as well as CSS classes associated with components or pages.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FcmfgfJKeIf9Lx5GQPYhX%2Fobraz.png?alt=media&#x26;token=0da82c9c-0cc0-4016-8a01-296de4656cb1" alt=""><figcaption><p><em><strong>Illustration 1.</strong> View of the “Source” tab in the application editor</em></p></figcaption></figure>
