# JSLayoutContainer

## Overview

The **JSLayoutContainer** is a JavaScript object designed to facilitate the management and manipulation of layout containers in the Solution Model. It supports both hierarchical navigation and dynamic creation of containers, offering extensive control over layout structures. This object is particularly useful for building responsive designs and managing nested layouts efficiently.

The container's properties allow users to define dimensions, positions, and appearance attributes. For example, height, `x`, and `y` coordinates control spatial placement, while `cssClasses` and `tagType` customize the HTML output. Identifiers such as `elementId`, `name`, `packageName`, and `specName` ensure clear referencing and seamless integration with layout specifications.

The methods provided enable comprehensive interaction with components and containers. Users can add, retrieve, or remove components through functions like `newWebComponent(type)` or `getComponent(name)`. Attribute management is also supported, allowing customization with methods like `putAttribute(key, value)`. Additionally, hierarchical navigation is made simple with functions such as `findLayoutContainer(name)` and `getLayoutContainers()`, which aid in accessing or organizing nested structures dynamically.

These features collectively make the **JSLayoutContainer** a robust tool for developing adaptable and scalable form layouts.

## Properties Summarized

| Type                                                                         | Name                        | Summary                                    |
| ---------------------------------------------------------------------------- | --------------------------- | ------------------------------------------ |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [cssClasses](#cssclasses)   | The css classes to be output for html tag. |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [elementId](#elementid)     | The id to be output for html tag.          |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [height](#height)           | Get/set container height.                  |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [name](#name)               | The name of the component.                 |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [packageName](#packagename) | returns the layouts package name           |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [specName](#specname)       | returns the layouts spec name              |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [tagType](#tagtype)         | The tag type for html output.              |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [x](#x)                     | Get/set x location.                        |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [y](#y)                     | Get/set Y location.                        |

## Methods Summarized

| Type                                                                                                      | Name                                                                                            | Summary                                                                                                                                            |
| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [findLayoutContainer(name)](#findlayoutcontainer-name)                                          | Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.                                                           |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [findWebComponent(name)](#findwebcomponent-name)                                                | Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers                                                 |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)                              | [getAttribute(name)](#getattribute-name)                                                        |                                                                                                                                                    |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)                              | [getComment()](#getcomment)                                                                     | Returns the comment of this container.                                                                                                             |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [getComponent(name)](#getcomponent-name)                                                        | Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.   |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getComponents()](#getcomponents)                                                               | Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel. |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getComponents(returnInheritedElements)](#getcomponents-returninheritedelements)                | Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.  |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [getLayoutContainer(name)](#getlayoutcontainer-name)                                            | Returns a JSLayoutContainer that has the given name of this container.                                                                             |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getLayoutContainers()](#getlayoutcontainers)                                                   | Returns all JSLayoutContainers objects of this container.                                                                                          |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getLayoutContainers(returnInheritedElements)](#getlayoutcontainers-returninheritedelements)    | Returns all JSLayoutContainers objects of this container                                                                                           |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [getWebComponent(name)](#getwebcomponent-name)                                                  | Returns a JSWebComponent that has the given name that is a child of this form, layout container or responsive layout container.                    |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getWebComponents()](#getwebcomponents)                                                         | Returns all JSWebComponents of this form/container.                                                                                                |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                | [getWebComponents(returnInheritedElements)](#getwebcomponents-returninheritedelements)          | Returns all JSWebComponents of this form/container.                                                                                                |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [newLayoutContainer()](#newlayoutcontainer)                                                     | Create a new layout container as the last child of its parent container.                                                                           |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [newLayoutContainer(position)](#newlayoutcontainer-position)                                    | Create a new layout container.                                                                                                                     |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [newLayoutContainer(position, spec)](#newlayoutcontainer-position-spec)                         | Create a new layout container.                                                                                                                     |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) | [newLayoutContainer(spec)](#newlayoutcontainer-spec)                                            | Create a new layout container as the last child in its parent container.                                                                           |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [newWebComponent(type)](#newwebcomponent-type)                                                  | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.                                                                 |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [newWebComponent(type, position)](#newwebcomponent-type-position)                               | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.                                                                 |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [newWebComponent(name, type)](#newwebcomponent-name-type)                                       | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form, as the last component in its parent container.                  |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [newWebComponent(name, type, position)](#newwebcomponent-name-type-position)                    | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE container(form , layout container or responsive layout container).    |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)             | [newWebComponent(name, type, x, y, width, height)](#newwebcomponent-name-type-x-y-width-height) | Creates a new JSWebComponent (spec based component) object on the form.                                                                            |
| void                                                                                                      | [putAttribute(key, value)](#putattribute-key-value)                                             |                                                                                                                                                    |
| void                                                                                                      | [remove()](#remove)                                                                             | Remove a layout container (with all its children) from hierarchy.                                                                                  |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                            | [removeComponent(name)](#removecomponent-name)                                                  | Removes a component (JSLabel, JSButton, JSField, JSPortal, JSBean, JSTabpanel, JSWebComponent) that has the given name.                            |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                            | [removeWebComponent(name)](#removewebcomponent-name)                                            | Removes a JSWebComponent that has the specified name.                                                                                              |

## Properties Detailed

### cssClasses

The css classes to be output for html tag.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) A space-separated string of CSS classes applied to the layout container.

**Sample**

```js
layoutContainer.cssClasses = 'myContainer';
```

### elementId

The id to be output for html tag.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The unique element ID of the layout container.

**Sample**

```js
layoutContainer.elementId = 'rowCol';
```

### height

Get/set container height. This is only used for CSS Position Container.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The height of the layout container.

**Sample**

```js
layoutContainer.height = 300;
```

### name

The name of the component. Through this name it can also accessed in methods.\
Must be a valid javascript name. (no - in the name or start with number)

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The name of the layout container.

**Sample**

```js
layoutContainer.name = 'col1';
```

### packageName

returns the layouts package name

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The package name associated with the layout container.

### specName

returns the layouts spec name

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The specification name of the layout container.

### tagType

The tag type for html output. Default value is 'div'.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The tag type (e.g., 'div', 'span') of the layout container.

**Sample**

```js
layoutContainer.tagType = 'span';
```

### x

Get/set x location. Location is used for ordering in html output.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The X-coordinate of the layout container's position.

**Sample**

```js
layoutContainer.x = 100;;
```

### y

Get/set Y location. Location is used for ordering in html output.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The Y-coordinate of the layout container's position.

**Sample**

```js
layoutContainer.y = 100;;
```

## Methods Detailed

### findLayoutContainer(name)

Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) a JSLayoutContainer object

**Sample**

```js
var container = myForm.findLayoutContainer("row1");
application.output(container.name);
```

### findWebComponent(name)

Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the web component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var btn = myForm.findWebComponent("mycomponent");
application.output(mybean.typeName);
```

### getAttribute(name)

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the attributes name

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The value of the specified attribute, or null if the attribute is not set.

**Sample**

```js
layoutContainer.getAttribute('class');
```

### getComment()

Returns the comment of this container.

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) the comment of this container.

**Sample**

```js
var comment = solutionModel.getForm("my_form").getComment();
application.output(comment);
```

### getComponent(name)

Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSComponent object (might be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel)

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var cmp = frm.getComponent("componentName");
application.output("Component type and name: " + cmp);
```

### getComponents()

Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all the JSComponents on the form.

**Sample**

```js
var form = solutionModel.getForm("myForm");
var components = form.getComponents();
for (var i in components)
	application.output("Component type and name: " + components[i]);
```

### getComponents(returnInheritedElements)

Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from the parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all the JSComponents on the form.

**Sample**

```js
var form = solutionModel.getForm("myForm");
var components = form.getComponents();
for (var i in components)
	application.output("Component type and name: " + components[i]);
```

### getLayoutContainer(name)

Returns a JSLayoutContainer that has the given name of this container.\
Use findLayoutContainer() method to find a JSLayoutContainter through the hierarchy

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) a JSLayoutContainer object

**Sample**

```js
var container = myForm.getLayoutContainer("row1");
application.output(container.name);
```

### getLayoutContainers()

Returns all JSLayoutContainers objects of this container.\
Does not return the inherited containers, use #getLayoutContainers(true) to get the inherited as well.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all JSLayoutContainers objects of this container

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var containers = frm.getLayoutContainers();
for (var c in containers)
{
		var fname = containers[c].name;
		application.output(fname);
}
```

### getLayoutContainers(returnInheritedElements)

Returns all JSLayoutContainers objects of this container

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all JSLayoutContainers objects of this container

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var containers = frm.getLayoutContainers();
for (var c in containers)
{
		var fname = containers[c].name;
		application.output(fname);
}
```

### getWebComponent(name)

Returns a JSWebComponent that has the given name that is a child of this form, layout container or responsive layout container.\
Use findWebComponent() to find a webcomponent through the hierarchy

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the web component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var btn = container.getWebComponent("mycomponent");
application.output(mybean.typeName);
```

### getWebComponents()

Returns all JSWebComponents of this form/container.\
If this method is called on a form, then it will return all web components on that form.\
If the form is responsive, it will return the web components from all the containers.\
It does not return the inherited components, use #getWebComponents(true) to get the inherited as well.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) the list of all JSWebComponent on this forms

**Sample**

```js
var webComponents = myForm.getWebComponents();
for (var i in webComponents)
{
	if (webComponents[i].name != null)
		application.output(webComponents[i].name);
}
```

### getWebComponents(returnInheritedElements)

Returns all JSWebComponents of this form/container.\
If this method is called on a form, then it will return all web components on that form.\
If the form is responsive, it will return the web components from all the containers.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) the list of all JSWebComponents on this forms

**Sample**

```js
var webComponents = myForm.getWebComponents(false);
for (var i in webComponents)
{
	if (webComponents[i].name != null)
		application.output(webComponents[i].name);
}
```

### newLayoutContainer()

Create a new layout container as the last child of its parent container.\
This method can only be used in responsive forms.

If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model\
to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the\
packageName and specName properties. So that it works later on in the designer.

If the packageName and specName are not provided, then:\
   the packageName is the same as for the parent container\
   the specName is the first allowed child defined in the specification of the parent container

If the specification of the parent container does not defined allowed children, then if it is not empty\
   the packageName and the specName are copied from the first child layout container.

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer();
container.packageName = "12grid";
container.specName = "row";
```

### newLayoutContainer(position)

Create a new layout container. The position is used to determine the generated order in html markup.\
This method can only be used in responsive forms.

If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model\
to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the\
packageName and specName properties. So that it works later on in the designer.

If the packageName and specName are not provided, then:\
   the packageName is the same as for the parent container\
   the specName is the first allowed child defined in the specification of the parent container

If the specification of the parent container does not defined allowed children, then if it is not empty\
   the packageName and the specName are copied from the first child layout container.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1);
container.packageName = "12grid";
container.specName = "row";
```

### newLayoutContainer(position, spec)

Create a new layout container. The position is used to determine the generated order in html markup.\
This method can only be used in responsive forms.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **spec** a string of the form 'packageName-layoutName', or 'layoutName'

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1, "12grid-row");
container.newLayoutContainer(1, "column");
```

### newLayoutContainer(spec)

Create a new layout container as the last child in its parent container.\
This method can only be used in responsive forms.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **spec** a string of the form 'packageName-layoutName', or 'layoutName'

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1, "12grid-row");
container.newLayoutContainer(1, "column");
```

### newWebComponent(type)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.\
Will receive a generated name. Will be added as last position in container.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('mypackage-testcomponent');
```

### newWebComponent(type, position)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.\
Will receive a generated name.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('mypackage-testcomponent',1);
```

### newWebComponent(name, type)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form, as the last component in its parent container.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec or the JSWebComponent constant representing the webcomponent type

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('bean','mypackage-testcomponent');

var webcomponent = form.newWebComponent('mywebcomponent',JSWebComponent.mypackage.testcomponent);
```

### newWebComponent(name, type, position)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE container(form , layout container or responsive layout container).

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('bean','mypackage-testcomponent',1);
```

### newWebComponent(name, type, x, y, width, height)

Creates a new JSWebComponent (spec based component) object on the form.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **x** the horizontal "x" position of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **y** the vertical "y" position of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **width** the width of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** the height of the JSWebComponent object in pixels

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var bean = form.newWebComponent('bean','mypackage-testcomponent',200,200,300,300);
forms['newForm1'].controller.show();
```

### putAttribute(key, value)

**Parameters**

* [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) **key** ;
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **value** ;

**Returns:** void

**Sample**

```js
layoutContainer.putAttribute('class','container fluid');
```

### remove()

Remove a layout container (with all its children) from hierarchy.

**Returns:** void

**Sample**

```js
layoutContainer.remove();
```

### removeComponent(name)

Removes a component (JSLabel, JSButton, JSField, JSPortal, JSBean, JSTabpanel, JSWebComponent) that has the given name. It is the same as calling "if(!removeLabel(name) && !removeButton(name) ....)".\
Returns true if removal was successful, false otherwise.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the component to be deleted

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if component has been successfully deleted; false otherwise

**Sample**

```js
var form = solutionModel.newForm('newFormX','db:/server1/parent_table',null,true,1000,750);
var jsbutton = form.newButton('JSButton to delete',100,100,200,50,null);
jsbutton.name = 'jsb';
var jslabel = form.newLabel('JSLabel to delete',100,200,200,50,null);
jslabel.name = 'jsl';
jslabel.transparent = false;
jslabel.background = 'green';
var jsfield = form.newField('scopes.globals.myGlobalVariable',JSField.TEXT_FIELD,100,300,200,50);
jsfield.name = 'jsf';
var relation = solutionModel.newRelation('parentToChild','db:/server1/parent_table','db:/server1/child_table',JSRelation.INNER_JOIN);
relation.newRelationItem('parent_table_id', '=', 'child_table_id');
var jsportal = form.newPortal('jsp',relation,100,400,300,300);
jsportal.newField('child_table_id',JSField.TEXT_FIELD,200,200,120);
var childOne = solutionModel.newForm('childOne','db:/server1/child_table',null,false,400,300);
childOne.newField('child_table_id', JSField.TEXT_FIELD,10,10,100,20);
var childTwo = solutionModel.newForm('childTwo','server1','other_table',null,false,400,300);
childTwo.newField('some_table_id', JSField.TEXT_FIELD,10,10,100,100);
var jstabpanel = form.newTabPanel('jst',450,30,620,460);
jstabpanel.newTab('tab1','Child One',childOne,relation);
jstabpanel.newTab('tab2','Child Two',childTwo);
var jsmethod = form.newMethod("function removeMe(event) { var form = solutionModel.getForm('newFormX');\n if ((form.removeComponent('jsb') == true) && (form.removeComponent('jsl') == true) && (form.removeComponent('jsf') == true) && (form.removeComponent('jsp') == true) & (form.removeComponent('jst') == true)) application.output('Components removed ok'); else application.output('Some component(s) could not be deleted'); forms['newFormX'].controller.recreateUI();}");
var removerButton = form.newButton('Click here to remove form components',450,500,250,50,jsmethod);
removerButton.name = 'remover';
forms['newFormX'].controller.show();
```

### removeWebComponent(name)

Removes a JSWebComponent that has the specified name. Returns true if removal was successful, false otherwise.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent to be removed

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if the JSWebComponent has been removed; false otherwise

**Sample**

```js
var form = solutionModel.getForm('myform');
form.removeWebComponent('mybean')
```

***