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

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

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

Actions

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

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

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

Subscribe drawer opened event

Params:

Name	Type	Description
callback	function	The callback function will be fired with 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 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

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:

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

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

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

Return: No.

Example:

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