# Form Component

## Overview

**Form Component** in the Solution Explorer Tree is a special contained form used for simplified design and runtime optimization for the NGClient. The same behavior can be achieved via tabless tabpanel, but form component has optimized display because all elements are part of the same form, taking away the overhead of tabpanel and loading of another form.

Such a Form Component Form can be places on the form by UI Components which do have a model property that is of type 'formcomponent', Servoy ships for absolute and the bootstrap layout a FormComponentContainer component. This is a UI Component with a single 'formcomponent' property that displays the form as a a tabless tabpanel.

A Form Component Form can't have its own logic (js file), it is also not available at runtime under "forms.xxx" because there is no instance of such a form, Only the template and its properties are used, events like onclick of a button can be assigned but only to scopes or entity methods (if the datasource is specified). Also because it does not have its own instance at runtime also all the form component events and commands like onLoad are not available for it.

## Property Summary

| Type                                                     | Name                                          | Summary                                                                              |
| -------------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| [String](/reference/servoycore/dev-api/js-lib/string.md) | [comment](#comment)                           | Additional information, such as programmer notes about the form component's purpose. |
| [String](/reference/servoycore/dev-api/js-lib/string.md) | [dataSource](#datasource)                     | The names of the database server and table that this form component is linked to.    |
| [String](/reference/servoycore/dev-api/js-lib/string.md) | [deprecated](#deprecated)                     | Gets the deprecate info for this element.                                            |
| [Object](/reference/servoycore/dev-api/js-lib/object.md) | [designTimeProperties](#designtimeproperties) | Property to get and add design-time properties for a component.                      |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [extendsForm](#extendsform)                   | The selected parent (extended element) for the element (form component).             |
| [String](/reference/servoycore/dev-api/js-lib/string.md) | [name](#name)                                 | The name of the form component.                                                      |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [width](#width)                               | The width of the form component in pixels.                                           |

## Properties Details

### comment

This is a field for additional information, such as programmer notes about the form component's purpose.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```javascript
"shows 'save', 'cancel' and 'exit' buttons, with additional error messages"
```

### dataSource

The names of the database server and table that this form component is linked to. It is selectable from all available tables and has this format: "server-name.table-name".

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```javascript
example_data.order_details
```

### deprecated

Gets the deprecate info for this element

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md) the deprecate info for this element or null if it is not deprecated

**Sample**

```javascript
"empty field error message is not used anymore"
```

### designTimeProperties

Property to get and add design-time properties for a component.

**Type**\
[Object](/reference/servoycore/dev-api/js-lib/object.md) map of the design-time properties

**Sample**

```javascript
{formComponentType:"Save and Cancel Buttons"}
```

### extendsForm

The selected parent (extended element) for the element (form component).

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md) the parent

**Sample**

```javascript
"fc_save_and_cancel"
```

### name

The name of the form component.

**Type**\
[String](/reference/servoycore/dev-api/js-lib/string.md)

**Sample**

```javascript
"fc_save_cancel_exit"
```

### width

The width of the form component in pixels.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```javascript
640
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoycore/object-model/solution/form-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.