# io.Connect Windows

Source: https://docs.interop.io/desktop/developers/configuration/io-connect-windows/index.html

## Overview

> ⚠️ *Note that this section is relevant only for the **io.Connect Desktop** 9.0 version stream. The `stickywindows.json` file has been [deprecated](https://docs.interop.io/desktop/getting-started/changelog/platform/10-0/index.md#breaking_changes-platform_configuration_files) in **io.Connect Desktop** 10.0. For the 10.0 version stream, most of the [window management configuration](https://docs.interop.io/desktop/developers/configuration/system/index.md#window_management) properties have been moved under the `"windowManagement"` top-level key of the `system.json` configuration file and some have been deprecated altogether.*

## io.Connect Windows Configuration

The global behavior of [io.Connect Windows](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md) in **io.Connect Desktop** is controlled via the `stickywindows.json` configuration file located in the `<installation_location>/interop.io/io.Connect Desktop/Desktop/config` folder. Some of the configurable properties are described in the following sections.

> ℹ️ *For more details on the available io.Connect Window settings, see the [io.Connect Windows configuration schema](https://docs.interop.io/desktop/assets/configuration/9-0/stickywindows.json).*

> ⚠️ *Note that some properties in the `stickywindows.json` may be overridden by properties defined in the [app definition](https://docs.interop.io/desktop/developers/configuration/application/index.md) file of your app.*

## io.Connect Window Properties

### Classic & Web Groups

Switch from the default io.Connect [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups) to the io.Connect [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups):

```json
// The default value is `"Classic"`.
{
    "groupType": "Web"
}
```

### Renderer Transparency Mode

To specify how to handle the transparency of the HTML elements that determine the bounds of app windows in [io.Connect Window groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups) and [Workspaces](https://docs.interop.io/desktop/capabilities/windows/workspaces/overview/index.md), use the `"rendererTransparencyMode"` property. These HTML elements are placed over the app windows and must be transparent in order for the app windows to be visible and for the mouse clicks to reach the app windows. For Windows 7 the mode is fixed to `"Regions"`. For Windows 8+, you can use `"KeyColor"` or `"Transparent"`. The `"KeyColor"` value selects a color that will be used as a background for the overlaying HTML elements and will always be transparent. To specify which color will always be transparent, use the `"rendererTransparencyKeyColor"` property. The `"Transparent"` value enables true transparency in io.Connect [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups) and [Workspaces](https://docs.interop.io/desktop/capabilities/windows/workspaces/overview/index.md), but won't work if you are using io.Connect [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups). In this case, if you set `"Transparent"` as a value, it will be used only for Workspaces, and the classic groups will fall back to `"KeyColor"` or `"Regions"`. Setting `"rendererTransparencyMode"` to `"Auto"` will select `"KeyColor"` (for Windows 8+) or `"Regions"` (for Windows 7) depending on your OS:

```json
{
    "rendererTransparencyMode": "KeyColor",
    "rendererTransparencyKeyColor": "#FE0000"
}
```

> ⚠️ *Note that it's strongly recommended for any popup windows in your custom Workspaces App or Web Group App to use shadows or transparency only if `"rendererTransparencyMode"` is set to `"Transparent"`. Otherwise, the shadow or the transparency will blend with the color specified in the `"rendererTransparencyKeyColor"` property which will result in an undesirable visual effect. Also, the color specified in `"rendererTransparencyKeyColor"` shouldn't be used individually or in a gradient, because it will always be rendered as transparent.*

### Renaming Group & Window Captions

#### In Classic Groups

Users can manually change the caption titles of [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups), as well as the captions of flat and tab io.Connect Windows participating in them. The user-defined names of groups and windows saved in a [Layout](https://docs.interop.io/desktop/capabilities/windows/layouts/overview/index.md) will be preserved when the Layout is restored.

To allow the users to manually modify the caption titles of groups and of the windows participating in them when using [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups), set the `"enableWindowGroupsCaptionEdit"` and `"enableWindowsCaptionEdit"` properties to `true`:

```json
{
    "enableWindowGroupsCaptionEdit": true,
    "enableWindowsCaptionEdit": true
}
```

#### In Web Groups

Renaming the captions of groups and of flat and tab windows participating in them is possible also for [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups). No additional configuration is necessary to allow caption editing when using [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups).

#### Individual Windows

You can rename the captions of individual (not joined in a group) flat and tab windows when using [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups) or [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups):

To allow caption editing when using [classic groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-classic_groups), you must set the `"enableWindowsCaptionEdit"` property to `true`:

```json
{
    "enableWindowsCaptionEdit": true
}
```

When using [web groups](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md#window_groups-web_groups), no configuration change is necessary.

### Window Stickiness

Disable the stickiness of io.Connect Windows:

```json
// Disabling io.Connect Window stickiness (valid for both classic and web groups).
{
    "enableStickiness": false
}
```

### Edge Distance

Configure the distance between the edges of neighboring io.Connect Windows:

```json
// Constrained to values between `1-9`.
{
    "edgeDistance": 9
}
```

### Group Header

Hide or show the group header:

```json
{
    "hideGroupCaption": true
}
```

> ℹ️ *For details on how to control the group header visibility programmatically, see the [Capabilities > Windows > Window Management](https://docs.interop.io/desktop/capabilities/windows/window-management/javascript/index.md#window_groups-group_operations-group_header) section.*

### Resizing with Windows Gestures

Configure the resize behavior of io.Connect Windows in a group when resizing the group with Windows gestures. Some io.Connect Windows may have size restrictions in their configuration - e.g., `"maxWidth": 200`. Specify whether the rest of the windows in the group should stay relative in size to the restricted windows or should fill the rest of the space:

```json
{
    "groupMaximizedMode": "Fill"
}
```

### Flydown Windows

*All values for the flydown delay times and intervals are in milliseconds.*

To set the delay time for showing the flydown window after the user hovers over the flydown zone:

```json
{
    "flydownShowDelay": 250
}
```

To set the delay time for allowing the callback for handling the flydown window to return a result when changing the flydown zone:

```json
{
    "flydownChangeDelay": 200
}
```

To set the delay time for hiding the flydown window (e.g., when the user moves the cursor out of the flydown zone):

```json
{
    "flydownHideDelay": 600
}
```

To set the interval at which the system will check whether the flydown window should be hidden:

```json
{
    "flydownHideCheckInterval": 150
}
```

> ⚠️ *Note that the value of `flydownHideCheckInterval` should be less than the value of `flydownHideDelay`, otherwise the flydown window will be hidden at the end of the interval specified in `flydownHideCheckInterval` and not at the end of the delay time specified in `flydownHideDelay`.*

### Tab Header Buttons

Keep buttons on tab windows always visible or show them only on hover:

```json
{
    "tabs": {
        "buttonsAlwaysVisible": false
    }
}
```

### Flat When Single

Show tab windows as flat windows (without a tab header) when they are single:

```json
{
    "tabs": {
        "flatWhenSingle": true
    }
}
```