# Frame

**Kind**: interface | **Module**: [Workspaces](https://docs.interop.io/desktop/reference/javascript/workspaces/index.md)

**Source**: https://docs.interop.io/desktop/reference/javascript/workspaces/frame/index.html

Describes a Frame (a Workspaces App instance).

## Properties

- **`id`** (`string`, required)
  An unique string identifier of the frame
- **`isInitialized`** (`boolean`, required)
  Indicates whether the frame has been initialized or not

## Methods

### close

Closes the Frame.
The result from using this method in **io.Connect Browser** projects may vary depending on whether the browser will allow the closing operation.

```ts
(options?: FrameCloseOptions) => Promise<void>
```

**Parameters**

- **`options`** (`FrameCloseOptions`, optional)
  Options for closing the Frame.

**Returns**: `Promise<void>`

### createWorkspace

Opens a new workspace in this frame based on the provided definition.

```ts
(definition: WorkspaceDefinition, config?: WorkspaceCreateConfig) => Promise<Workspace>
```

**Parameters**

- **`definition`** (`WorkspaceDefinition`, required)
  An object describing the shape and options of the workspace.
- **`config`** (`WorkspaceCreateConfig`, optional)

**Returns**: `Promise<Workspace>`

### focus

Focuses the Frame.

```ts
() => Promise<void>
```

**Returns**: `Promise<void>`

### getBounds

Retrieves the current bounds of the Frame.

```ts
() => Promise<FrameBounds>
```

**Returns**: `Promise<FrameBounds>`

### getConstraints

Returns the current size constraints this frame. The constraints are calculated using all of the individual constraints of the elements within the workspaces in the frame.

```ts
() => Promise<FrameConstraints>
```

**Returns**: `Promise<FrameConstraints>`

### getIcon

Retrieves the taskbar icon of the `Frame` instance.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.9*

```ts
() => Promise<Icon>
```

**Returns**: `Promise<Icon>`

### hide

Hides the Workspaces Frame instance if it's currently visible.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.10*

```ts
() => Promise<void>
```

**Returns**: `Promise<void>`

### init

Initializes an empty `Frame` with the Workspaces provided via the `FrameInitializationConfig` object.
The order of the Workspaces loaded in the `Frame` depends solely on the order in the provided array (the `positionIndex` property in the Workspace configuration has no effect).

```ts
(config: FrameInitializationConfig) => Promise<void>
```

**Parameters**

- **`config`** (`FrameInitializationConfig`, required)
  Configuration for initializing an empty `Frame`.

**Returns**: `Promise<void>`

### isVisible

Retrieves the current visibility state of the Workspaces Frame instance.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.10*

```ts
() => Promise<boolean>
```

**Returns**: `Promise<boolean>`

### maximize

Maximizes the Frame.
*Available only in **io.Connect Desktop**.*

```ts
() => Promise<void>
```

**Returns**: `Promise<void>`

### minimize

Minimizes the Frame.
*Available only in **io.Connect Desktop**.*

```ts
() => Promise<void>
```

**Returns**: `Promise<void>`

### move

Moves the Frame.

```ts
(config: MoveConfig) => Promise<void>
```

**Parameters**

- **`config`** (`MoveConfig`, required)
  Options for moving the Frame.

**Returns**: `Promise<void>`

### onClosed

Notifies when this frame is closed.

```ts
(callback: (closed: FrameClosedData) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(closed: FrameClosedData) => void`, required)
  Callback function to handle the event.

**Returns**: `Promise<Unsubscribe>`

### onClosing

Notifies when the Frame is about to be closed.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.9*

```ts
(callback: (options: FrameClosingData) => void | Promise<void>) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(options: FrameClosingData) => void | Promise<void>`, required)
  Callback function for handling the event. Receives as an argument an object with options for closing the Frame.

**Returns**: `Promise<Unsubscribe>`

### onFocusChanged

Triggered when either a window in the frame is focused or the frame itself.
*Available only in **io.Connect Desktop**.*

```ts
(callback: (data: FrameFocusChangedData) => void) => Promise<IOConnectWorkspaces.Unsubscribe>
```

**Parameters**

- **`callback`** (`(data: FrameFocusChangedData) => void`, required)
  Callback function to handle the event. It receives a data oject which indicates how the focus has changed.

**Returns**: `Promise<IOConnectWorkspaces.Unsubscribe>`

### onInitializationRequested

Notifies when a the frame is created without being initialized.

```ts
(callback: (context?: IOConnectWorkspaces.FrameInitializationContext) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(context?: IOConnectWorkspaces.FrameInitializationContext) => void`, required)
  Callback function to handle the event. Receives a context for the initialization request

**Returns**: `Promise<Unsubscribe>`

### onMaximized

Notifies when this frame is maximized.
This event is not supported in **io.Connect Browser**.

```ts
(callback: () => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`() => void`, required)
  Callback function to handle the event.

**Returns**: `Promise<Unsubscribe>`

### onMinimized

Notifies when this frame is closed.
This event is not supported in **io.Connect Browser**.

```ts
(callback: () => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`() => void`, required)
  Callback function to handle the event.

**Returns**: `Promise<Unsubscribe>`

### onNormal

Notifies when this frame is closed.
This event is not supported in **io.Connect Browser**.

```ts
(callback: () => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`() => void`, required)
  Callback function to handle the event.

**Returns**: `Promise<Unsubscribe>`

### onWindowAdded

Notifies when a new window was added to a workspace part of this frame and returns an unsubscribe function.
An added window means that the window has a place in the workspace (it is a valid workspace element), but does not guarantee that the contents of the window are loaded.

```ts
(callback: (window: WorkspaceWindow) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(window: WorkspaceWindow) => void`, required)
  Callback function to handle the event. Receives the added window as a parameter.

**Returns**: `Promise<Unsubscribe>`

### onWindowLoaded

Notifies when a window's content was loaded in a workspace part of this frame and returns an unsubscribe function.
A loaded window is a window, which was added to a workspace, it's contents were loaded and is present in the windows collection.

```ts
(callback: (window: WorkspaceWindow) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(window: WorkspaceWindow) => void`, required)
  Callback function to handle the event. Receives the loaded window as a parameter.

**Returns**: `Promise<Unsubscribe>`

### onWindowRemoved

Notifies when a window was removed from a workspace part of this frame and returns an unsubscribe function.

```ts
(callback: (removed: { windowId?: string; workspaceId: string; frameId: string }) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(removed: { windowId?: string; workspaceId: string; frameId: string }) => void`, required)
  Callback function to handle the event. Receives an object containing the ids of the removed window, and the respective workspace and frame as a parameter.

**Returns**: `Promise<Unsubscribe>`

### onWorkspaceClosed

Notifies when a workspace present in this frame was closed and returns an unsubscribe function.

```ts
(callback: (closed: { frameId: string; workspaceId: string }) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(closed: { frameId: string; workspaceId: string }) => void`, required)
  Callback function to handle the event. Receives an object with the closed workspace id and frame id as a parameter.

**Returns**: `Promise<Unsubscribe>`

### onWorkspaceOpened

Notifies when a new workspace was opened in this frame and returns an unsubscribe function.

```ts
(callback: (workspace: Workspace) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(workspace: Workspace) => void`, required)
  Callback function to handle the event. Receives the added workspace as a parameter.

**Returns**: `Promise<Unsubscribe>`

### onWorkspaceSelected

Notifies when a workspace is selected in this frame and returns an unsubscribe function.

```ts
(callback: (workspace: Workspace) => void) => Promise<Unsubscribe>
```

**Parameters**

- **`callback`** (`(workspace: Workspace) => void`, required)
  Callback function to handle the event. Receives the selected workspace as a parameter.

**Returns**: `Promise<Unsubscribe>`

### registerShortcut

Registers a keyboard shortcut for the current Frame.

```ts
(shortcut: string, callback: () => void) => Promise<Unsubscribe>
```

**Parameters**

- **`shortcut`** (`string`, required)
  Keyboard combination to register as a shortcut for the Frame (e.g., "ctrl+w").
- **`callback`** (`() => void`, required)
  Callback that will be invoked when the Frame for which the shortcut is registered
  is on focus and the user presses the registered keyboard combination.
  *Available only in **io.Connect Desktop**.*

**Returns**: `Promise<Unsubscribe>`

### resize

Resizes the Frame.

```ts
(config: ResizeConfig) => Promise<void>
```

**Parameters**

- **`config`** (`ResizeConfig`, required)
  Options for resizing the Frame.

**Returns**: `Promise<void>`

### restore

Restores the Frame.
*Available only in **io.Connect Desktop**.*

```ts
() => Promise<void>
```

**Returns**: `Promise<void>`

### restoreWorkspace

Opens a new workspace in this frame by restoring a previously saved workspace layout.

```ts
(name: string, options?: RestoreWorkspaceConfig) => Promise<Workspace>
```

**Parameters**

- **`name`** (`string`, required)
  The name of a saved workspace layout, which will be restored.
- **`options`** (`RestoreWorkspaceConfig`, optional)
  An optional object containing various workspace restore options.

**Returns**: `Promise<Workspace>`

### setIcon

Sets the taskbar icon of the `Frame` instance.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.9*

```ts
(icon: Icon) => Promise<void>
```

**Parameters**

- **`icon`** (`Icon`, required)
  New icon to be displayed in the taskbar for the `Frame` instance. The icon must be encoded as a Base64 string.

**Returns**: `Promise<void>`

### setOnTop

Sets the on-top state of the Frame.
*Available only in **io.Connect Desktop**.*

```ts
(options: FrameSetOnTopOptions) => Promise<void>
```

**Parameters**

- **`options`** (`FrameSetOnTopOptions`, required)
  Options for setting the on-top state.

**Returns**: `Promise<void>`

### show

Shows the Workspaces Frame instance if it has been previously hidden.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 9.10*

```ts
(config?: FrameShowConfig) => Promise<void>
```

**Parameters**

- **`config`** (`FrameShowConfig`, optional)

**Returns**: `Promise<void>`

### showDialog

Shows a dialog with a title, message, and response buttons to the user.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 10.0*

```ts
<T>(options: FrameDialogOptions) => Promise<T>
```

**Parameters**

- **`options`** (`FrameDialogOptions`, required)

**Returns**: `Promise<T>`

### showPopup

Creates a popup window.
*Available only in **io.Connect Desktop**.*

*Since: io.Connect Desktop 10.0*

```ts
(config: PopupOptions) => Promise<any>
```

**Parameters**

- **`config`** (`PopupOptions`, required)
  Options for creating a popup window.

**Returns**: `Promise<any>`

### snapshot

Returns an object detailing the current state of this frame.

```ts
() => Promise<FrameSnapshot>
```

**Returns**: `Promise<FrameSnapshot>`

### state

Returns the current state of the Frame.
*Available only in **io.Connect Desktop**.*

```ts
() => Promise<FrameState>
```

**Returns**: `Promise<FrameState>`

### workspaces

Returns a collection of all workspaces present in this frame.

```ts
() => Promise<Workspace[]>
```

**Returns**: `Promise<Workspace[]>`

## Related types

- [FrameBounds](https://docs.interop.io/desktop/reference/javascript/workspaces/framebounds/index.md)
- [FrameCloseOptions](https://docs.interop.io/desktop/reference/javascript/workspaces/framecloseoptions/index.md)
- [FrameClosedData](https://docs.interop.io/desktop/reference/javascript/workspaces/framecloseddata/index.md)
- [FrameClosingData](https://docs.interop.io/desktop/reference/javascript/workspaces/frameclosingdata/index.md)
- [FrameConstraints](https://docs.interop.io/desktop/reference/javascript/workspaces/frameconstraints/index.md)
- [FrameDialogOptions](https://docs.interop.io/desktop/reference/javascript/workspaces/framedialogoptions/index.md)
- [FrameFocusChangedData](https://docs.interop.io/desktop/reference/javascript/workspaces/framefocuschangeddata/index.md)
- [FrameInitializationConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/frameinitializationconfig/index.md)
- [FrameInitializationContext](https://docs.interop.io/desktop/reference/javascript/workspaces/frameinitializationcontext/index.md)
- [FrameSetOnTopOptions](https://docs.interop.io/desktop/reference/javascript/workspaces/framesetontopoptions/index.md)
- [FrameShowConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/frameshowconfig/index.md)
- [FrameSnapshot](https://docs.interop.io/desktop/reference/javascript/workspaces/framesnapshot/index.md)
- [FrameState](https://docs.interop.io/desktop/reference/javascript/workspaces/framestate/index.md)
- [Icon](https://docs.interop.io/desktop/reference/javascript/workspaces/icon/index.md)
- [MoveConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/moveconfig/index.md)
- [PopupOptions](https://docs.interop.io/desktop/reference/javascript/workspaces/popupoptions/index.md)
- [ResizeConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/resizeconfig/index.md)
- [RestoreWorkspaceConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/restoreworkspaceconfig/index.md)
- [Unsubscribe](https://docs.interop.io/desktop/reference/javascript/workspaces/unsubscribe/index.md)
- [Workspace](https://docs.interop.io/desktop/reference/javascript/workspaces/workspace/index.md)
- [WorkspaceCreateConfig](https://docs.interop.io/desktop/reference/javascript/workspaces/workspacecreateconfig/index.md)
- [WorkspaceDefinition](https://docs.interop.io/desktop/reference/javascript/workspaces/workspacedefinition/index.md)
- [WorkspaceWindow](https://docs.interop.io/desktop/reference/javascript/workspaces/workspacewindow/index.md)