Sidepanel

Sidepanel — componente de UI para abrir un panel lateral en la interfaz de la plataforma Flowlu

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

Constructor

Crea una instancia de Sidepanel con los parámetros dados

constructor(params: SidepanelParams)

Parámetro	Tipo	Descripción
params	SidepanelParams	Parámetros de creación del panel lateral

Propiedades

events

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

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

options

Opciones de visualización del panel lateral de tipo SidepanelOptions

options: SidepanelOptions

title

Título del panel lateral

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 el panel lateral de forma programática

async hide(): Promise<any>

show

Abre el panel lateral

async show(): Promise<any>

Eventos del método show():

Evento	Parámetro	Tipo	Descripción
'onShow'			El panel lateral se muestra
'onHide'			El panel lateral se oculta
'onClose'			El usuario cierra el panel lateral

Ejemplo

ESM

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

await App.initializeFrame()

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

await panel.show()

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

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

await panel.show();