---
title: "Control Panel"
slug: "app-api-control-panel-api"
updated: 2022-07-14T08:33:41Z
published: 2022-07-14T08:33:41Z
canonical: "developer.comm100.com/app-api-control-panel-api"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.comm100.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Control Panel

## How to Use API

First of all, you must understand the methods provided by the SDK. Click [here](/docs/guides-app-how-to-use-app-sdk-to-call-api) for the corresponding document.

## Basic Data Structure

**Dialog**

| Name | Type | Description |
| --- | --- | --- |
| id | string | The ID of the dialog |
| url | string | The URL of the dialog |
| width | number | The width of the dialog |
| height | number | The height of the dialog |

**Drawer**

| Name | Type | Description |
| --- | --- | --- |
| id | string | The ID of the dialog |
| url | string | The URL of the dialog |
| size | enum | The value is `small` or `large` |

**Page**

| Name | Type | Description |
| --- | --- | --- |
| id | GUID | The page ID will be used in your app code. |
| path | string | It describes the position of the menu for this page. It is part of the page address displayed in the location. For how to configure path, click [here](/docs/app-api-control-panel-api#path) |
| url | string | The content of the extended page. The content will render in the iframe. |
| label | string | It appears in the tooltip for level1Menu. Otherwise, it is the menu label. |
| icon | string | It is optional. The size is 30*30. This field is required for level1Menu. It can be a relative or absolute path. If it is a relative path, the root folder is your package. |

## Objects

Control Panel provides APIs for the following objects.

- [Dialog](/docs/app-api-control-panel-api#dialog)
- [Drawer](/docs/app-api-control-panel-api#drawer)
- [page](/docs/app-api-control-panel-api#page)
- [Navigation](/docs/app-api-control-panel-api#navigation)

### Dialog

Open a dialog when you want to confirm something on the extended page.

**Actions**

1. Open a dialog with the specific URL.

`Params`

| Name | Type | Description |
| --- | --- | --- |
| url | string | It will be loaded in the iframe in the dialog. It is an absolute/relative URL. If it is a relative URL, it is relative to the root of the app's package. |
| width | number | Set the width of the dialog. The default value is 600. |
| height | number | Set the height of the dialog. The default value is 480. |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.do("controlpanel.dialog.open", {
  url: "./dialog.html",
});
```

2. Close the current dialog

`Params`: No.

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.do("controlpanel.dialog.close");
```

**Events**

1. Subscribe to the dialog opened event

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callBack | function | When a dialog is opened in the current app, the callback function will be fired with the [Dialog](/docs/app-api-control-panel-api#dialog) object being passed. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.on("controlpanel.dialog.opened", (dialog: Dialog) => {
  // do stuff
});
```

2. Subscribe to the dialog closed event

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired with [Dialog](/docs/app-api-control-panel-api#dialog) object when one dialog is closed in the current app. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.on("controlpanel.dialog.closed", (dialog: Dialog) => {
  // do stuff
});
```

### Drawer

Pull out a drawer in the extended page.

**Actions**

1. Pull out a drawer with the specific URL from the right side

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| url | string | It will be loaded in the iframe in the drawer. It is an absolute/relative URL. If it is a relative URL, it is relative to the root of the app's package. |
| size | enum | The value is `small` or `large`. The default value is `small`. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.do("controlpanel.drawer.open", {
  url: "./drawer.html",
});
```

2. Close the drawer

`Params:` No.

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.do("controlpanel.drawer.close");
```

**Events**

1. Subscribe drawer opened event

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired with [Drawer](/docs/app-api-control-panel-api#drawer) object when one drawer is opened in the current app. |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.on("controlpanel.drawer.opened", (drawer: Drawer) => {
  // do stuff
});
```

2. Subscribe to the drawer closed event

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired with [Drawer](/docs/app-api-control-panel-api#drawer) object when one drawer is closed in the current app. |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.on("controlpanel.drawer.closed", (drawer: Drawer) => {
  // do stuff
});
```

### Page

**Actions**

1. Get configured pages

`Params:` No.

`Return:` Return a array of [Page](/docs/app-api-control-panel-api#page). The return data is as follows:

`Example:`

```
const client = APPClient.init();
const pages = await client.get("controlpanel.pages");
```

2. Get current query arguments

`Params:` No.

`Return:` Query arguments.

`Example:`

```
const client = APPClient.init();
const queryParams = await client.get("controlpanel.page.queryParams");
```

3. Get page's width

`Params:` No.

`Return:` The value of the page's width.

`Example:`

```
const client = APPClient.init();
const pageWidth = await client.get("controlpanel.page.width");
```

4. Set page's width

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| width | string | The value of page's width |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.set("controlpanel.page.width", 200);
```

5. Get page's height

`Params:` no parameters.

`Return:` the value of the page's height.

`Example:`

```
const client = APPClient.init();
const pageHeight = await client.get("controlpanel.page.height");
```

6. Set page's height

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| height | string | The value of page's height |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.set("controlpanel.page.height", 200);
```

7. Send a message by page Id

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| to | string | The id of target page |
| data | any | The data send to the target page |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.do("controlpanel.page.sendMessage", {
  to: "custom-page",
  data: "Hello",
});
```

**Events**

1. Received message

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired with the message object when others send a message to it. |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.on("controlpanel.page.messageReceived", (message: any) => {
  // do stuff
});
```

### Navigation

Controls page's behavior.

**Actions**

1. Go to another page

`Parameters`:

| Name | Type | Description |
| --- | --- | --- |
| path | string | Target path, you can use `..` go to parent's page, e.g. current page is the detail page, you can use it go to list page. Learn more about path view [here](/docs/how-to-config-path) |

`Return`: No.

`Example:`

```
const client = APPClient.init();
client.do("navigation.goto", "/app/");
```