Control Panel

How to Use API

First of all, you must understand the methods provided by the SDK. Click here for the corresponding document.

Basic Data Structure

Dialog

Drawer

Page

Objects

Control Panel provides APIs for the following objects.

• Dialog
• Drawer
• page
• 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

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:

Return: No.

Example:

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

2. Subscribe to the dialog closed event

Params:

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:

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:

Return: No.

Example:

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

2. Subscribe to the drawer closed event

Params:

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. 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:

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:

Return: No.

Example:

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

7. Send a message by page Id

Params:

Return: No.

Example:

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

Events

1. Received message

Params:

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:

Return: No.

Example:

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