Componentes de UI

El SDK permite invocar elementos de la interfaz de la plataforma desde una miniaplicación y responder a sus eventos.

Disponibles:

• Toast — notificación
• Swal — alert/confirm/prompt
• Modal — ventana modal
• Sidepanel — panel lateral

Ejemplo Toast

Mostrar una notificación de éxito que se oculta automáticamente después de 5 segundos:

import { Toast } from '@flowlu/miniapp-jssdk'

const toast = new Toast({
  view: 'success',
  title: 'Guardado',
  message: 'La configuración se actualizó correctamente',
  options: {
    timeOut: 5000
  },
  events: {
    onClose: () => console.log('Notificación descartada por el usuario')
  }
})

await toast.show()

Ejemplo Swal

Mostrar un diálogo de confirmación:

import { Swal } from '@flowlu/miniapp-jssdk'

const swal = new Swal({
  view: 'warning',
  title: 'Confirmar acción',
  message: '¿Está seguro?',
  events: {
    onCancel: () => console.log('Confirmación rechazada por el usuario'),
    onConfirm: () => console.log('Confirmación aceptada por el usuario')
  }
})

await swal.confirm()

Mostrar un diálogo con un campo de entrada:

import { Swal } from '@flowlu/miniapp-jssdk'

const swal = new Swal({
  view: 'info',
  title: 'Introducir cantidad',
  message: 'Introduzca la cantidad:',
  events: {
    onCancel: () => console.log('Entrada rechazada por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido por el usuario: ${value}`)
  }
})

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

Ejemplo Modal

Mostrar una ventana modal con una URL personalizada y manejo del evento de cierre:

import { Modal } from '@flowlu/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('Ventana modal cerrada por el usuario'),
    onHide: () => console.log('Ventana modal ocultada')
  }
})

await modal.show()

Ejemplo Sidepanel

Mostrar un panel lateral con una URL personalizada y manejo del evento de cierre:

import { Sidepanel } from '@flowlu/miniapp-jssdk'

const panel = new Sidepanel({
  title: 'Perfil de usuario',
  url: '/_module/company/view/member/433772?tab=contacts',
  options: {
    width: 'md'
  },
  events: {
    onClose: () => console.log('Panel lateral cerrado por el usuario'),
    onHide: () => console.log('Panel lateral ocultado')
  }
})

await panel.show()