MicroApp APIs

Microapps provide open APIs to obtain runtime SaaS information or assist in functionality development.

These open APIs are attached to the microProps variable in src/index.tsx. The APIs are assigned values after the microapp is attached. When using the microapp, make sure that the APIs can be called properly.

Example

In the following example, you can learn how to call the APIs in the microapp components to get the language selected by the users on the current SaaS.

Sample code

import { microProps } from 'src'; // Import an object from src/index.tsx

const Page = () => {
  const { tyLang } = microProps;

  return (
    <div className={styled['layout']}>
      <div> The language selected by the user is: {tyLang}.</div>
    </div>
  );
};

export default Page;

The open APIs are described as follows.

base

The base route of the specified microapp, also known as the route prefix. The internal routing of a microapp is based on this base route.

Sample code

const { base } = microProps;
// base => /apps/{microapp instance ID}

container

Microapps run on top of the main application container. The container object is the document object model (DOM) object of the main application where the microapp is attached.

For more information, see Terms.

Sample code

const { container } = microProps;
// container => DOM object

getOwnMenu

Get the entry object of the current microapp.

Sample code

const { getOwnMenu } = microProps;
const entry = getOwnMenu();
/**
 * {
 *   entry_id: 'x',
 *   entry_name: 'micro-test-app',
 *   micro_app_name: 'micro-test-app',
 *   oem_micro_app_id: 'z',
 *   path: '/app/{microapp instance ID}',
 *   sub_entry_list: []
 * }
 */

For more information about the entry object, see Description File > entries.

hasPermission

Check whether the user is granted a certain permission.

Request parameters

Field	Description
permissionCode	The code of the specified permission.

Response parameters

Field	Description
boolean	Specifies whether the user has the operation permission.

Sample code

const { hasPermission } = microProps;
const canDoUserDelete = hasPermission('USER_DELETE');
// canDoUserDelete: true / false

For more information about configurations of permission codes, see Description File > privileges.

mainHistory

The global history object. You can use this method to navigate to the specified microapp. The usage is the same as webApi: history.

Sample code

interface mainHistory {
  push: (path: string, state?: any) => void;
  replace: (path: string, state?: any) => void;
  go: (n: number) => void;
  goBack: () => void;
  goForward: () => void;
}

modifySelectedMenu

Fix the left-side selected menu by using the path field.

Request parameters

Field	Description
path	The path of the specified menu to be selected.

Response parameters

Field	Description
void	N/A

Sample code

const { modifySelectedMenu } = microProps;
modifySelectedMenu('selected_path');

dynamicProps

A collection of dynamic APIs. Currently, only setBreadcrumb is used to set up the breadcrumb content of the current page.

Sample code

const { dynamicProps } = microProps;
// Auto setting
dynamicProps.setBreadcrumb([{ type: 'auto' }]);
// Manual setting
dynamicProps.setBreadcrumb([
  { type: 'c', name: 'a', path: 'a' },
  { type: 'c', name: 'b', path: 'b' },
  { type: 'c', name: 'c', path: 'c' },
]);

Parameters

Field	Description
type	The type. Valid values: auto: auto setting. c: custom setting.
name	When type is set to custom, the specified display name is required.
path	When type is set to custom, the destination address is required to enable breadcrumb navigation upon clicking.

name

The unique identifier of the specified microapp.

Sample code

const { name } = microProps;
// name => xxx:string