Modal

Modal — componente de UI para abertura de uma janela modal na interface da plataforma Flowlu

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

Construtor

Cria uma instância de Modal com os parâmetros fornecidos

constructor(params: ModalParams)

Parâmetro	Tipo	Descrição
params	ModalParams	Parâmetros de criação da janela modal

Propriedades

events

Objeto do tipo EventCallbacks<ModalEventName> com os manipuladores de eventos

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

options

Opções de exibição da janela modal, do tipo ModalOptions

options: ModalOptions

title

Título da janela modal

title: string

url

URL da página a ser aberta

url: string

Métodos

destroy

Remove inscrições e libera recursos

destroy(): void

hide

Fecha a janela modal programaticamente

async hide(): Promise<any>

show

Abre a janela modal

async show(): Promise<any>

Eventos do método show():

Evento	Parâmetro	Tipo	Descrição
'onShow'			Janela modal foi exibida
'onHide'			Janela modal foi ocultada
'onClose'			Janela modal foi fechada pelo usuário

Exemplo

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('Janela modal exibida'),
    onHide: () => console.log('Janela modal ocultada'),
    onClose: () => console.log('Janela modal fechada pelo usuário')
  }
})

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('Janela modal exibida'),
    onHide: () => console.log('Janela modal ocultada'),
    onClose: () => console.log('Janela modal fechada pelo usuário')
  }
});

await modal.show();