Frame

Frame — objeto principal del SDK que representa la miniaplicación actual dentro del iframe de la plataforma Flowlu. Es un singleton: se crea una sola vez mediante initialize() o el wrapper App.initializeFrame().

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

Propiedades

Event

Referencia a la clase Event

static Event: typeof Event

Modal

Referencia a la clase Modal

static Modal: typeof Modal

Sidepanel

Referencia a la clase Sidepanel

static Sidepanel: typeof Sidepanel

Swal

Referencia a la clase Swal

static Swal: typeof Swal

Toast

Referencia a la clase Toast

static Toast: typeof Toast

domain

Dominio actual de la cuenta de Flowlu

get domain(): string

events

Objeto EventCallbacks<FrameEventName> con los manejadores de eventos

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

https

Indicador de conexión HTTPS

get https(): boolean

language

Idioma actual de la interfaz de la plataforma

get language(): string

options

Instancia de Options para gestionar la configuración de la aplicación

get options(): Options

rest

Instancia de Rest para llamadas a la Rest API

get rest(): Rest

targetOrigin

Origen de la ventana padre, calculado automáticamente

get targetOrigin(): string

uniqid

Identificador único de la ubicación de incrustación de la aplicación

get uniqid(): string

user

Instancia de User para comprobar los permisos del usuario actual, gestionar su configuración, etc.

get user(): User

userOptions

Instancia de UserOptions para gestionar la configuración del usuario actual

get userOptions(): UserOptions

Métodos

initialize

Inicializa una miniaplicación dentro del iframe de la plataforma Flowlu y devuelve una instancia singleton de Frame. Se recomienda usar el wrapper App.initializeFrame()

static async initialize(params?: FrameParams): Promise<Frame>

Parámetro	Tipo	Descripción
params	FrameParams	Parámetros de inicialización

Eventos del método initialize():

Evento	Parámetro	Tipo	Descripción
'onReady'			Se dispara después de que el contenido del iframe se haya cargado (DOMContentLoaded), Frame esté inicializado, se haya recibido el contexto y se muestre el contenido incrustado
	context	FrameContext	Contexto de la aplicación

Errores

El método lanzará un error si:

• la aplicación no se ejecuta en un navegador
• la aplicación no está dentro de un iframe
• no se pudo determinar el dominio de la cuenta de la plataforma

getInstance

Devuelve la instancia singleton actual de Frame. Llamar solo después de initialize()

static getInstance(): Frame

destroy

Elimina las suscripciones y libera los recursos

destroy(): void

getContext

Devuelve FrameContext — el contexto actual de la aplicación

async getContext(): Promise<FrameContext>

getScopes

Devuelve un arreglo de cadenas Scope ('code:access') — los scopes de la versión instalada de la aplicación disponibles para el usuario actual

async getScopes(): Promise<Scope[]>

hasScope

Comprueba si la versión instalada de la aplicación tiene al menos uno de los scopes indicados en el formato Scope ('code:access'). Un nivel de acceso más amplio incluye uno más restringido, por lo que en la comprobación basta con indicar el nivel mínimo necesario. Por ejemplo, la comprobación 'users:read' devuelve true si a la aplicación se le concedió el nivel full para el código users — este cubre read. Si se pasa un arreglo, el método devuelve true si se cumple al menos uno de los scopes

async hasScope(scope: Scope | Scope[]): Promise<boolean>

Parámetro	Tipo	Descripción
scope	Scope | Scope[]	Un scope o un arreglo de scopes a comprobar

openHomepage

Abre la página de inicio de la aplicación en la interfaz de la plataforma si la página de inicio está incluida en las ubicaciones de incrustación del manifiesto para la versión actualmente instalada de la aplicación

async openHomepage(params: FrameOpenHomepageParams): Promise<any>

Parámetro	Tipo	Descripción
params	FrameOpenHomepageParams	Parámetros

Eventos del método openHomepage():

Evento	Parámetro	Tipo	Descripción
'onOpen'			Página de inicio de la aplicación abierta
'onCancel'			Apertura cancelada

openUrl

Abre una URL en la interfaz de la plataforma. Al navegar a un recurso externo, la plataforma pedirá confirmación al usuario y abrirá el enlace en una nueva pestaña del navegador

async openUrl(params: FrameOpenUrlParams): Promise<any>

Parámetro	Tipo	Descripción
params	FrameOpenUrlParams	Parámetros

Eventos del método openUrl():

Evento	Parámetro	Tipo	Descripción
'onOpen'			URL abierta correctamente
'onCancel'			El usuario canceló la acción

Ejemplo

ESM

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

const frame = await App.initializeFrame({
  events: {
    onReady: (context) => {
      console.log(`La aplicación está lista, contexto recibido: ${context}`)
    }
  }
})

// navegar a una página dentro de la plataforma
await frame.openUrl({
  url: '/_module/crm/view/account_view/47547'
})

// navegar a un recurso externo (se abre en una nueva pestaña con confirmación)
await frame.openUrl({
  url: 'https://www.flowlu.com/',
  events: {
    onOpen: () => console.log('Navegación completada'),
    onCancel: () => console.log('El usuario canceló la navegación')
  }
})

// scopes de la versión instalada de la aplicación
console.log(`Scopes de la aplicación: ${await frame.getScopes()}`) // p. ej. ['users:full']

// el nivel full cubre read, por lo que la comprobación users:read pasa si se concede users:full
if (await frame.hasScope('users:read')) {
  console.log('Hay acceso de lectura a los usuarios')
}

UMD

const App = window.FlowluMiniApp;

const frame = await App.initializeFrame({
  events: {
    onReady: (context) => {
      console.log(`La aplicación está lista, contexto recibido: ${context}`);
    }
  }
});

// navegar a una página dentro de la plataforma
await frame.openUrl({
  url: '/_module/crm/view/account_view/47547'
});

// navegar a un recurso externo (se abre en una nueva pestaña con confirmación)
await frame.openUrl({
  url: 'https://www.flowlu.com/',
  events: {
    onOpen: () => console.log('Navegación completada'),
    onCancel: () => console.log('El usuario canceló la navegación')
  }
});

// scopes de la versión instalada de la aplicación
console.log(`Scopes de la aplicación: ${await frame.getScopes()}`); // p. ej. ['users:full']

// el nivel full cubre read, por lo que la comprobación users:read pasa si se concede users:full
if (await frame.hasScope('users:read')) {
  console.log('Hay acceso de lectura a los usuarios');
}