Swal

Swal — UI component for displaying alert, confirm and prompt dialogs

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

Constructor

Creates a Swal instance with the given parameters

constructor(params: SwalParams)

Parameter	Type	Description
params	SwalParams	Dialog creation parameters

Properties

events

Object of type EventCallbacks<SwalEventName> with event handlers

get events(): EventCallbacks
set events(value: EventCallbacks)

message

Dialog message text

message: string

title

Dialog title

title: string

view

Dialog view of type SwalView

get view(): SwalView
set view(value: SwalView)

Methods

alert

Shows an alert dialog

async alert(): Promise<any>

alert() method events:

Event	Parameter	Type	Description
'onShow'			Dialog is shown
'onHide'			Dialog is hidden
'onConfirm'			User confirmed the action

confirm

Shows a confirm dialog

async confirm(): Promise<any>

confirm() method events:

Event	Parameter	Type	Description
'onShow'			Dialog is shown
'onHide'			Dialog is hidden
'onCancel'			User cancelled the action
'onConfirm'			User confirmed the action

destroy

Removes subscriptions and frees resources

destroy(): void

prompt

Shows a prompt dialog with parameters of type SwalPromptParams

async prompt(params?: SwalPromptParams): Promise<any>

Parameter	Type	Description
params	SwalPromptParams	Input field parameters

prompt() method events:

Event	Parameter	Type	Description
'onShow'			Dialog is shown
'onHide'			Dialog is hidden
'onCancel'			User cancelled the action
'onPrompt'			User entered a value
	value	string	Entered value

Example

Displaying an informational message:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'info',
  title: 'Information',
  message: 'This is just an informational message',
  events: {
    onShow: () => console.log('Message shown'),
    onHide: () => console.log('Message hidden'),
    onCancel: () => console.log('Declined by user'),
  }
})

swal.alert();

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'info',
  title: 'Information',
  message: 'This is just an informational message',
  events: {
    onShow: () => console.log('Message shown'),
    onHide: () => console.log('Message hidden'),
    onCancel: () => console.log('Declined by user'),
  }
});

swal.alert();

Displaying a confirmation dialog:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'warning',
  title: 'Confirm action',
  message: 'Delete account',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onConfirm: () => console.log('Accepted by user')
  }
})

await swal.confirm()

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Confirm action',
  message: 'Delete account',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onConfirm: () => console.log('Accepted by user')
  }
});

await swal.confirm();

Displaying a dialog with an input field:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Specify quantity',
  message: 'Please enter the quantity:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
})

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

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Specify quantity',
  message: 'Please enter the quantity:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
});

await swal.prompt({
  type: 'input',
  placeholder: 'Enter value',
});

Displaying a dialog with a textarea field:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Specify the reason',
  message: 'Please specify the reason:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
})

await swal.prompt({
  type: 'textarea',
  placeholder: 'Enter value',
})

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Specify the reason',
  message: 'Please specify the reason:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
});

await swal.prompt({
  type: 'textarea',
  placeholder: 'Enter value',
});

Displaying a dialog with a dropdown selection:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Change status',
  message: 'Select new status:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
})

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Active'},
    {value: 'inprocessing', title: 'In progress'},
    {value: 'done', title: 'Done'}
  ],
})

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Change status',
  message: 'Select new status:',
  events: {
    onShow: () => console.log('Dialog shown'),
    onHide: () => console.log('Dialog hidden'),
    onCancel: () => console.log('Declined by user'),
    onPrompt: (value) => console.log(`Entered value: ${value}`)
  }
});

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Active'},
    {value: 'inprocessing', title: 'In progress'},
    {value: 'done', title: 'Done'}
  ],
});