UI Components

The SDK allows you to invoke platform interface elements from a mini‑application and respond to their events.

Available:

• Toast — notification
• Swal — alert/confirm/prompt
• Modal — modal window
• Sidepanel — side panel

Example Toast

Displaying a success notification that auto-hides after 5 seconds:

import { Toast } from '@aspro-cloud/miniapp-jssdk'

const toast = new Toast({
  view: 'success',
  title: 'Saved',
  message: 'Settings were successfully updated',
  options: {
    timeOut: 5000
  },
  events: {
    onClose: () => console.log('Notification dismissed by user')
  }
})

await toast.show()

Example Swal

Displaying a confirmation dialog:

import { Swal } from '@aspro-cloud/miniapp-jssdk'

const swal = new Swal({
  view: 'warning',
  title: 'Confirm action',
  message: 'Are you sure?',
  events: {
    onCancel: () => console.log('Confirmation declined by user'),
    onConfirm: () => console.log('Confirmation accepted by user')
  }
})

await swal.confirm()

Displaying a dialog with an input field:

import { Swal } from '@aspro-cloud/miniapp-jssdk'

const swal = new Swal({
  view: 'info',
  title: 'Enter quantity',
  message: 'Please enter the quantity:',
  events: {
    onCancel: () => console.log('Input declined by user'),
    onPrompt: (value) => console.log(`User entered value: ${value}`)
  }
})

await swal.prompt({
  type: 'input',
})

Example Modal

Displaying a modal window with a custom URL and close event handling:

import { Modal } from '@aspro-cloud/miniapp-jssdk'

const modal = new Modal({
  title: 'Acme Corp',
  url: '/_module/crm/view/account_view/2332?tab=account_info',
  options: {
    width: 'lg'
  },
  events: {
    onClose: () => console.log('Modal window closed by user'),
    onHide: () => console.log('Modal window hidden')
  }
})

await modal.show()

Example Sidepanel

Displaying a side panel with a custom URL and close event handling:

import { Sidepanel } from '@aspro-cloud/miniapp-jssdk'

const panel = new Sidepanel({
  title: 'User Profile',
  url: '/_module/company/view/member/433772?tab=contacts',
  options: {
    width: 'md'
  },
  events: {
    onClose: () => console.log('Side panel closed by user'),
    onHide: () => console.log('Side panel hidden')
  }
})

await panel.show()