Web Mini Program Runtime Library

We provide a runtime library for Web Mini Programs that can conveniently call some methods.

You can install through package management tools:

npm

npm install @agilebot/extension-runtime

yarn

yarn add @agilebot/extension-runtime

pnpm

pnpm add @agilebot/extension-runtime

You can also reference directly in the browser:

<script src="https://unpkg.com/@agilebot/extension-runtime/dist/browser.js"></script>

When you use the <script> tag to directly import the runtime library in the browser, all exported methods will be mounted on the global namespace gbtExtension .

For example, if you need to get the current language, you don't need to use import, but can directly call:

<script>
  gbtExtension.getLanguage().then(function (lang) {
    console.log(`Current language is: ${lang}`);
  });
</script>

Multi-language

When a Web Mini Program is opened in AgileLink, it needs to get the current language of the App and then switch the user's Web Mini Program language to be consistent with the App. This functionality can be implemented in the following way.

Example code:

import { getLanguage } from '@agilebot/extension-runtime';

const currentLang = await getLanguage();
console.log(`Current language: ${currentLang}`);

Enable Shortcuts

When the extension's Web page is opened, some shortcuts will be disabled, such as physical buttons on industrial teaching pendants. You can enable shortcuts in the following way:

import { enableShortcut } from '@agilebot/extension-runtime';

enableShortcut();

DANGER

If this method is not called, it may lead to the following consequences:

• After the industrial teaching pendant screen locks, the screen cannot be awakened through physical buttons
• You can only force shutdown and restart by pressing and holding the teaching pendant power button for more than 15 seconds

Display Components like Popups

To maintain a consistent style with AgileLink, we provide some common functions for displaying notification messages and popups.

rtmNotification - Notification Messages

Notification messages are used to display brief tips to users, supporting four types:

import { rtmNotification } from '@agilebot/extension-runtime';

// Show info notification
rtmNotification.info('This is an info message');
// Show error notification
rtmNotification.error('This is an error message');
// Show success notification
rtmNotification.success('Operation successful');
// Show warning notification
rtmNotification.warning('This is a warning message');

All notification methods support an optional detail parameter for displaying detailed information:

// Notification with detail
rtmNotification.error('Operation failed', 'Please check your input and try again');
rtmNotification.info('System notification', 'You have 3 new messages');

API Reference

Method	Parameters	Return Value	Description
info(message, detail?)	message: string detail?: string	void	Show info notification
error(message, detail?)	message: string detail?: string	void	Show error notification
success(message, detail?)	message: string detail?: string	void	Show success notification
warning(message, detail?)	message: string detail?: string	void	Show warning notification

rtmMessageBox - Dialog Boxes

Dialog boxes are used for scenarios requiring user confirmation or input, supporting three types:

confirm - Confirmation Dialog

import { rtmMessageBox } from '@agilebot/extension-runtime';

// Basic usage
rtmMessageBox
  .confirm('Are you sure you want to delete?')
  .then(() => {
    console.log('User confirmed the operation');
  })
  .catch(() => {
    console.log('User cancelled the operation');
  });

// Using async/await
async function deleteItem() {
  try {
    await rtmMessageBox.confirm('Are you sure you want to delete this item?');
    console.log('Deletion confirmed');
    // Perform delete operation...
  } catch {
    console.log('Deletion cancelled');
  }
}

alert - Alert Dialog

// Show alert dialog
rtmMessageBox
  .alert('Please note: this operation cannot be undone!')
  .then(() => {
    console.log('User has read the alert');
  });

prompt - Input Dialog

// Get user input
rtmMessageBox
  .prompt('Please enter your name:', {
    inputPlaceholder: 'Enter name here',
    inputValue: 'Default name',
    inputValidator: (value: string) => {
      if (!value) return 'Name cannot be empty';
      if (value.length < 2) return 'Name must be at least 2 characters';
      return true;
    },
    inputErrorMessage: 'Invalid input'
  })
  .then((result) => {
    // prompt returns { value: string, action: string } on success
    console.log('User entered:', result);
  })
  .catch(() => {
    console.log('User cancelled input');
  });

Advanced Configuration Options

All MessageBox methods support an optional second options parameter to customize the appearance and behavior of the dialog:

rtmMessageBox.confirm('Delete this item?', {
  title: 'Confirm Deletion',
  type: 'warning',
  confirmButtonText: 'Yes, Delete',
  cancelButtonText: 'Cancel',
  center: true,
  closeOnClickModal: false,
  closeOnPressEscape: false
});

Configuration Options

All MessageBox methods are based on Element UI's MessageBox component and support the following configuration options:

Parameter	Description	Type	Accepted Values	Default
title	Title of the MessageBox	string	—	—
message	Content of the MessageBox	string / VNode	—	—
dangerouslyUseHTMLString	Whether message is treated as HTML string	boolean	—	false
type	Message type, used for icon display	string	success / info / warning / error	—
iconClass	Custom icon's class, overrides type	string	—	—
customClass	Custom class name for MessageBox	string	—	—
callback	Callback when MessageBox closes if you don't prefer Promise	function(action, instance)	—	—
showClose	Whether to show close button	boolean	—	true
beforeClose	Callback before MessageBox closes, and it will prevent MessageBox from closing	function(action, instance, done)	—	—
distinguishCancelAndClose	Whether to distinguish between canceling (clicking cancel button) and closing (clicking close button, overlay, or pressing ESC)	boolean	—	false
lockScroll	Whether to lock body scroll when MessageBox prompts	boolean	—	true
showCancelButton	Whether to show a cancel button	boolean	—	false (true when called with confirm and prompt)
showConfirmButton	Whether to show a confirm button	boolean	—	true
cancelButtonText	Text content of cancel button	string	—	Cancel
confirmButtonText	Text content of confirm button	string	—	OK
cancelButtonClass	Custom class name of cancel button	string	—	—
confirmButtonClass	Custom class name of confirm button	string	—	—
closeOnClickModal	Whether MessageBox can be closed by clicking the mask	boolean	—	true (false when called as alert)
closeOnPressEscape	Whether MessageBox can be closed by pressing the ESC key	boolean	—	true (false when called as alert)
closeOnHashChange	Whether to close MessageBox when hash changes	boolean	—	true
showInput	Whether to show an input	boolean	—	false (true when called as prompt)
inputPlaceholder	Placeholder of input	string	—	—
inputType	Type of input	string	—	text
inputValue	Initial value of input	string	—	—
inputPattern	Regexp for the input	regexp	—	—
inputValidator	Validation function for the input. Should return a boolean or string. If a string is returned, it will be assigned to inputErrorMessage	function	—	—
inputErrorMessage	Error message when validation fails	string	—	Illegal input
center	Whether to align the content in center	boolean	—	false
roundButton	Whether to use round button	boolean	—	false

Note

• callback parameter: function(action, instance), where action can be 'confirm', 'cancel', or 'close', and instance is the MessageBox instance
• beforeClose parameter: function(action, instance, done), where done is used to close the MessageBox instance
• For more details, please refer to Element UI MessageBox Documentation

API Reference

Method	Parameters	Return Value	Description
alert(message, options?)	message: string options?: ElMessageBoxOptions	Promise<MessageBoxData>	Show alert dialog
confirm(message, options?)	message: string options?: ElMessageBoxOptions	Promise<MessageBoxData>	Show confirmation dialog
prompt(message, options?)	message: string options?: ElMessageBoxOptions	Promise<MessageBoxData>	Show input dialog

Get Extension Status

You can get the current status of an extension in the following way:

import { getExtensionState } from '@agilebot/extension-runtime';

const extension = await getExtensionState('myService');
console.log(`Extension enabled: ${extension.enabled}, Port: ${extension.port}`);

Whether in Extension Environment

When debugging Web pages locally, you can determine whether currently running in the extension environment or local computer:

import { isInExtension } from '@agilebot/extension-runtime';

console.log(`Currently in extension environment: ${isInExtension()}`);