Control Panel
  • 14 Jul 2022
  • 4 Minutes to read
  • Dark
    Light

Control Panel

  • Dark
    Light

Article summary

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

NameTypeDescription
idstringThe ID of the dialog
urlstringThe URL of the dialog
widthnumberThe width of the dialog
heightnumberThe height of the dialog

Drawer

NameTypeDescription
idstringThe ID of the dialog
urlstringThe URL of the dialog
sizeenumThe value is small or large

Page

NameTypeDescription
idGUIDThe page ID will be used in your app code.
pathstringIt 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
urlstringThe content of the extended page. The content will render in the iframe.
labelstringIt appears in the tooltip for level1Menu. Otherwise, it is the menu label.
iconstringIt 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

  1. Open a dialog with the specific URL.

Params

NameTypeDescription
urlstringIt 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.
widthnumberSet the width of the dialog. The default value is 600.
heightnumberSet 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:

NameTypeDescription
callBackfunctionWhen 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:

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

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

Params:

NameTypeDescription
urlstringIt 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.
sizeenumThe 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:

NameTypeDescription
callbackfunctionThe 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:

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

  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:

NameTypeDescription
widthstringThe 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:

NameTypeDescription
heightstringThe 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:

NameTypeDescription
tostringThe id of target page
dataanyThe 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:

NameTypeDescription
callbackfunctionThe 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:

NameTypeDescription
pathstringTarget 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/");

Was this article helpful?