Modal

Modal — componente de UI para abrir una ventana modal en la interfaz de la plataforma Flowlu

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

Constructor

Crea una instancia de Modal con los parámetros dados

constructor(params: ModalParams)

Parámetro	Tipo	Descripción
params	ModalParams	Parámetros de creación de la ventana modal

Propiedades

events

Objeto de tipo EventCallbacks<ModalEventName> con los manejadores de eventos

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

options

Opciones de visualización de la ventana modal de tipo ModalOptions

options: ModalOptions

title

Título de la ventana modal

title: string

url

URL de la página a abrir

url: string

Métodos

destroy

Elimina las suscripciones y libera los recursos

destroy(): void

hide

Cierra la ventana modal de forma programática

async hide(): Promise<any>

show

Abre la ventana modal

async show(): Promise<any>

Eventos del método show():

Evento	Parámetro	Tipo	Descripción
'onShow'			La ventana modal se muestra
'onHide'			La ventana modal se oculta
'onClose'			El usuario cierra la ventana modal

Ejemplo

ESM

import { App, Modal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

const modal = new Modal({
  title: 'Acme Corp',
  url: '/_module/crm/view/account_view/2332?tab=account_info',
  options: {
    width: 'lg'
  },
  events: {
    onShow: () => console.log('Ventana modal mostrada'),
    onHide: () => console.log('Ventana modal ocultada'),
    onClose: () => console.log('Ventana modal cerrada por el usuario')
  }
})

await modal.show()

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

const modal = new App.Frame.Modal({
  title: 'Acme Corp',
  url: '/_module/crm/view/account_view/2332?tab=account_info',
  options: {
    width: 'lg'
  },
  events: {
    onShow: () => console.log('Ventana modal mostrada'),
    onHide: () => console.log('Ventana modal ocultada'),
    onClose: () => console.log('Ventana modal cerrada por el usuario')
  }
});

await modal.show();