# RuntimeWebComponent

## Overview

The `IRuntimeWebComponent` interface enables scripting for runtime web components in Servoy, supporting CSS positioning for NGClient in absolute position forms, offering an intuitive alternative to anchoring.

## **Extends**

[Component](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/component)

## Properties Summarized

| Type                                                                                        | Name                        | Summary                                                                                           |
| ------------------------------------------------------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------- |
| [CSSPosition](https://docs.servoy.com/reference/servoycore/dev-api/application/cssposition) | [cssPosition](#cssposition) | CSS position is a replacement for anchoring system making it more intuitive to place a component. |

## Methods Summarized

| Type                                                                         | Name                                                          | Summary                                                            |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------ |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) | [getClientProperty(key)](#getclientproperty-key)              | Gets the specified client property for the element based on a key. |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) | [getDesignProperties()](#getdesignproperties)                 | Get the design-time properties of an element.                      |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) | [getDesignTimeProperty(key)](#getdesigntimeproperty-key)      | Get a design-time property of an element.                          |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [getElementType()](#getelementtype)                           | Returns the type of a specified element.                           |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [getFormName()](#getformname)                                 | Returns the name of the form.                                      |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [getName()](#getname)                                         | Returns the name of an element.                                    |
| void                                                                         | [putClientProperty(key, value)](#putclientproperty-key-value) | Sets the value for the specified element client property key.      |

## Properties Detailed

### cssPosition

CSS position is a replacement for anchoring system making it more intuitive to place a component.\
CSS position should be set on form, an absolute position form can either work with anchoring or with css position.

This property is only available when the form in is css positioning mode, in responsive mode components don't have this property.

This is only working in NGClient.

**Type**\
[CSSPosition](https://docs.servoy.com/reference/servoycore/dev-api/application/cssposition)

**Sample**

```js
elements.button.cssPosition.r("10").b("10").w("20%").h("30px")
```

## Methods Detailed

### getClientProperty(key)

Gets the specified client property for the element based on a key.

NOTE: Depending on the operating system, a user interface property name may be available.

**Parameters**

* [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) **key** user interface key (depends on operating system)

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) The value of the property for specified key.

**Sample**

```js
var property = myElement.getClientProperty('ToolTipText');
```

### getDesignProperties()

Get the design-time properties of an element.

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) A map of all design-time properties for the element.

**Sample**

```js
var prop = forms.orders.elements.mylabel.getDesignProperties()
```

### getDesignTimeProperty(key)

Get a design-time property of an element.

**Parameters**

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

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) The value of the specified design-time property.

**Sample**

```js
var prop = forms.orders.elements.mylabel.getDesignTimeProperty('myprop')
```

### getElementType()

Returns the type of a specified element.

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) The display type of the element as String.

**Sample**

```js
var et = myElement.getElementType();
```

### getFormName()

Returns the name of the form. (may be empty string as well)

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

**Sample**

```js
var name = myElement.getFormName();
```

### getName()

Returns the name of an element. (may be null as well)

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

**Sample**

```js
var name = myElement.getName();
```

### putClientProperty(key, value)

Sets the value for the specified element client property key.

NOTE: Depending on the operating system, a user interface property name may be available.

**Parameters**

* [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) **key** user interface key (depends on operating system)
* [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) **value** a predefined value for the key

**Returns:** void

**Sample**

```js
myElement.putClientProperty('ToolTipText','some text');
```

***