API reference-Low-Code Development Platform(Mobi)-阿里云帮助中心

Global objects

The platform provides built-in, application-level global objects that contain information about the current application, user, and URL. You can access these objects through the root object mobi.

appInfo

Current application information.

Property	Type	Description
appId	string	Application ID
appName	string	Application name
mode	string	Application mode: `edit`: Edit mode. The application runs in the designer. `published`: Published mode. The application runs in the published environment.
environment	string	Application connection environment: `dev`: Development environment. `production`: Production environment.
workspaceId	string	Workspace ID

currentUser

Current user information.

Property	Type	Description
id	string	User ID
username	string	Username
nickname	string	User nickname
email	string	User email address
profilePhotoUrl	string	Profile picture URL
idpType	string	Logon identity source. Possible values include the following: ALIYUN: Alibaba Cloud logon identity LOCAL: Mobi default logon identity OIDC: OIDC logon identity DINGTALK: DingTalk logon identity WECOM: WeCom logon identity SAML2: SAML2 logon identity OAUTH2: OAuth2 logon identity
groups	{name: string}[]	Permission group information
externalInfo	object	Additional information: The following data can be obtained in a WeChat mini program: openId: The openId of the WeChat mini program. unionId: The unionId of the WeChat mini program.

URL

Current URL information.

Property	Type	Description
href	string	Full Application URL
origin	string	The URL origin, which includes the protocol, hostname, and port number.
protocol	string	The URL protocol. `http:` or `https:`.
host	string	The URL hostname, including the port number.
hostname	string	The URL hostname, without the port number.
pathname	string	The URL path, which starts with `/`.
port	string	The URL port number.
hash	string	The URL fragment identifier, which starts with `#`.
search	string	The URL query parameter string, which starts with `?`.
queryParams	object	The URL query parameter object.

hostApp

The host application object, which is used in the Web SDK integration environment.

Property	Type	Description
postMessage	(data: any, origin?: string) => Promise<any>	postMessage accepts a required `data` parameter and an optional `origin` parameter. If you configure `origin`, messages are sent only to targets that match the `origin` definition. The return value of `mobi.hostApp.postMessage` is a `Promise<any>` that can receive the return value from the host application's messageHandler.

chat

An object specific to Copilot applications that represents session-related information.

Property	Type	Description
currentMessage	string	The latest user input in the Copilot application.

Global methods

The platform provides built-in, application-level global methods. You can access them through the root object mobi. The following global methods are available only in web applications.

navigateTo()

Navigates to a page within the application or to a specified URL.

Return value type: void.

Parameters:

Parameter	Type	Description	Required
options	object	Configuration object.	Yes

The options object:

Property	Type	Description	Required
pageName	string	The name of the in-application page. This has low priority.	No
route	string	The path of the in-application page. This has medium priority.	No
url	string	The external URL address. This has high priority.	No
queryParams	object	The query parameter object. It is converted to a string and appended to the `search` part of the target page URL. This works only for in-application pages.	No
hashParam	string	The hash parameter. It is appended after the `#` in the target page URL hash. This works only for in-application pages.	No
target	string	Where to open the page: `_self`: The current window or tab. `_blank`: A new window or tab. `_parent`: The parent frame. `_top`: The top-level window or tab. The default value for internal navigation is `_self`. The default value for external navigation is `_blank`. In the application designer, navigation follows the default values.	No

Usage example:

Assume you have three pages named Homepage, page1, and page2. Their paths are /index, /page1, and /page2, respectively.

You can add a button component to the homepage and add a click event to it. For the event action, select Execute script and enter mobi.navigateTo({pageName:"page1"}) to navigate to the in-application page named page1.

You can change the script to mobi.navigateTo({route:"/page2"}) to navigate to the in-application page with the path /page2.

Changing the script to mobi.navigateTo({url:""}) navigates to the external page https://help.aliyun.com/zh/mobi/.

If you pass the `pageName`, `route`, and `url` parameters at the same time, the parameter with the highest priority takes effect. The priority order is `pageName` < `route` < `url`. For example, if you change the script to mobi.navigateTo({pageName:"page1",route:"/page2",url:"https://help.aliyun.com/zh/mobi/"}), the application navigates to the external Mobi official documentation page.

Note that `queryParams` and `hashParam` do not work for external URLs. You must append the query and hash to the `url` parameter as needed.

showMessage()

Displays a global message.

Return value type: void.

Parameters:

Parameter Name	Type	Description	Required
message	string	The message text.	Yes
options	object	Configuration object.	No

The options object:

Property Name

Type

Description

Required

type

string

Message type:

info: Notification.
success: Success.
warning: Warning.
error: Error.

Default: info.

No

duration

number

Display duration in seconds. A value of 0 means the message persists. Default: 3.

No

Usage example:

You can add a button component to the page and add a click event to it. For the event action, select Execute script and enter mobi.showMessage("Success",{type:"success",duration:1}) to display a success message for 1 second.

showModal()

Displays a dialog box.

Return value type: Promise<boolean>.

Parameters:

Parameter	Type	Description	Required
title	string	Dialog box title.	Yes
content	string	Dialog box content.	Yes
options	object	Configuration object.	No

The options object:

Property Name	Type	Description	Required
type	string	Dialog box type: `confirm`: General. `info`: Notification. `success`: Success. `warning`: Warning. `error`: Error. Default: `confirm`.	No
okText	string	Text for the confirm button.	No
cancelText	string	Text for the cancel button. This works only when the `type` property is `confirm`.	No

When the confirm button in the dialog box is clicked, the returned Promise resolves to true. If the dialog box is closed in any other way, the returned Promise resolves to false.

showPopconfirm()

Displays a pop-up confirmation box.

Return value type: Promise<boolean>.

Parameters:

Parameter name	Type	Description	Required
title	string	Pop-up confirmation box title.	Yes
description	string	Pop-up confirmation box content.	Yes

When the confirm button in the pop-up confirmation box is clicked, the returned Promise resolves to true. When the cancel button is clicked, the returned Promise resolves to false.

createTour()

Defines and runs a tour.

Return value type: Promise<boolean>.

Parameters:

Parameter	Type	Description	Required
steps	array	Step definitions.	Yes

Elements in the steps array:

Property name	Type	Description	Required
title	string	Current step title.	Yes
description	string	Current step content.	Yes
target	object	The target page component object for the current step. Reference it by the component ID, such as `button1`.	No

When the finish button of the tour is clicked, the returned Promise resolves to true. If the tour is closed in any other way, the returned Promise resolves to false.

decodeJson()

Processes a JSON string and converts it into a valid JavaScript object. For incomplete JSON strings, this method attempts to repair characters before conversion.

Return value type: object.

Parameters:

Parameter name	Type	Description	Required
jsonstr	string	JSON string.	Yes

parseTag()

Extracts content wrapped in specific HTML tags from a string.

Return value type: array. Each item in the array is the content wrapped by a single matching pair of HTML tags.

Parameters:

Parameter	Type	Description	Required
htmlstr	string	The original string that contains HTML tags.	Yes
tagName	string	The name of the tag to identify.	Yes

getProperty()

Dynamically retrieves the content of a specified path in a JavaScript object.

Return value type: any.

Parameters:

Parameter name	Type	Description	Required
obj	object	The target JavaScript object.	Yes
path	array	The path to get the value. Differentiated by array items, such as ['a', 'b', 'c'].	Yes

sendEvent()

Triggers a custom widget event. This works only in the widget designer.

Return value type: void.

Parameters:

Parameter	Type	Description	Required
eventKey	string	The name of the event to trigger. The value must be within the scope of events declared for the widget in the current edit state.	Yes
eventParams	any	The parameters passed by the triggered event. The value type must be consistent with the type constraint in the event definition. Otherwise, a forced type conversion is performed.	No

Page component API

In JavaScript code, page components are treated as page component objects. You can reference them by their component ID and use the . operator to access their properties and methods.

Property/Method	Type/Signature	Description	Example
Component property	string	Component property value.	`const v1 = input1.value` `{{ input1.value }}`
Set the component property ()	setXXX(param: any): void	Sets the component property value.	`input1.setValue("a")`
clear component properties()	clearXXX(): void	Clears the component property value. Supported by some properties.	`input1.clearValue()`
Component method()	XXX(payload?: any): any	Calls other methods of the component.	`input1.focus()`

Note:

You can access page component objects only in the page-level scope.
Copilot applications do not have page components.

Variable API

Variables defined in the platform are treated as variable objects in JavaScript code. You can reference them by their variable ID and use the . operator to access their properties and methods.

Property/Method	Type/Signature	Description	Example
value	any	Variable value.	`const v1 = variable1.value` `{{ variable1.value }}`
setValue()	setValue(value: any): void	Sets the variable value.	`variable1.setValue("a")`
setIn()	setIn(keyPath: any,value: any): void	Sets the path value of an object or array.	`variable1.setIn("a", "b")` `variable1.setIn(["a","c"], "b")` `variable1.setIn([0], "b")`

Note: The variable object itself and its `value` property cannot be modified directly with an assignment statement. For more information, see Notes on platform-encapsulated objects.

Frontend function API

Frontend functions defined in the platform are treated as frontend function objects in JavaScript code. You can reference them by their frontend function ID and use the . operator to access their properties and methods.

Property/Method	Type/Signature	Description	Example
data	any	The return value from the last execution of the frontend function.	`const data = func1.data` `{{ func1.data }}`
params	object	The parameter object from the last execution of the frontend function.	-
isExecuting	boolean	Indicates whether the frontend function is currently running.	-
error	object	The error message from the last execution of the frontend function. It includes `code` and `message`.	-
trigger()	trigger(params?: object): Promise<Result>	Calls the frontend function. The Result object contains: success: Indicates whether the execution was successful. data: The return value on successful execution. error: The error message on failed execution.	`const res = await func1.trigger()`

Computed property API

Computed properties defined in the platform are treated as computed property objects in JavaScript code. You can reference them by their computed property ID and use the . operator to access their properties.

Property

Type

Description

Example

value

any

The value of the computed property.

const value = compute1.value

{{ compute1.value }}

Note: The value of a computed property is determined entirely by its calculation logic and dependencies. You cannot directly modify the value of a computed property.

Integration action API

Integration actions defined in the platform are treated as integration action objects in JavaScript code. You can reference them by their integration action ID and use the . operator to access their properties and methods.

Property/Method	Type/Signature	Description	Example
data	any	The data from the last execution of the integration action.	`const data = action1.data` `{{ action1.data }}`
rawData	any	The data from the last execution of the integration action, before data transformation.	-
chunkData	any	For streaming data only. Stores the chunk data returned from each stream in the integration action.	-
params	object	The parameter object from the last execution of the integration action.	-
isExecuting	boolean	Indicates whether the integration action is currently running.	-
error	object	The error message from the last execution of the integration action. It includes `code` and `message`.	-
trigger()	trigger(params?: object): Promise<Result>	Calls the integration action. The Result object contains: success: Indicates whether the execution was successful. data: The return value on successful execution. error: The error message on failed execution.	`const res = await action1.trigger()`

Iterator API

In iterator components, such as lists, tables, and drop-down lists, you can access the data and index of the current iterated item using currentItem and currentIndex.

List component

You can drag a list component into the canvas and configure its data source as an array of objects. All objects in the array should have the same properties.

You can click an element in the first list item to configure the elements within all list items. For example, you can click a text component and set its content to {{currentItem.name}}. This action uses the `name` property of the current iterated data object from the data source array as the text. The first item becomes "Qwen", the second becomes "Tongyi Lingma", and so on. Because this text component is in an iterated item, it has two additional local JavaScript variables, currentItem and currentIndex, available wherever you can write JavaScript code. This differs from a normal text component.

Table component

You can drag a table component into the canvas and configure its data source as an array of objects. All objects in the array should have the same properties.

You can add a click event to the `Complete` node in the `Operation` column. Set the action to `Display message` and the content to {{currentIndex}}. When a user clicks the `Complete` action, the corresponding row number is displayed, starting from 0.

Additionally, the row click event added to the table component also provides access to currentItem and currentIndex.

Drop-down list component

Both the single-select and multi-select drop-down list components support configuring dynamic data sources and mapping rules.

Take the single-select drop-down list as an example. You can drag a single-select drop-down list component into the canvas and configure its data source as the default data source of the list component. You can then set the title and value to {{currentItem.name}} and {{currentItem.key}} respectively. This action uses the `name` and `key` properties of the current iterated data object as the title and value of the drop-down options.

Notes on platform-encapsulated objects

The platform-encapsulated root object mobi, page component objects, variable objects, frontend function objects, computed property objects, and integration action objects cannot be modified using assignment statements. This also applies to their properties. To modify the properties of an encapsulated object, you must call the corresponding method. For example, both variable1.value = "a" and variable1 = "a" are incorrect. The correct syntax is variable1.setValue("a").