Frame

Frame — o principal objeto do SDK que representa a miniaplicação atual dentro do iframe da plataforma Flowlu. É um singleton — criado uma única vez através de initialize() ou do wrapper App.initializeFrame().

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

Propriedades

Event

Referência à classe Event

static Event: typeof Event

Modal

Referência à classe Modal

static Modal: typeof Modal

Sidepanel

Referência à classe Sidepanel

static Sidepanel: typeof Sidepanel

Swal

Referência à classe Swal

static Swal: typeof Swal

Toast

Referência à classe Toast

static Toast: typeof Toast

domain

Domínio atual da conta do Flowlu

get domain(): string

events

Objeto EventCallbacks<FrameEventName> com os manipuladores de eventos

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

https

Indicador de conexão HTTPS

get https(): boolean

language

Idioma atual da interface da plataforma

get language(): string

options

Instância de Options para gerenciamento das configurações da aplicação

get options(): Options

rest

Instância de Rest para chamadas à Rest API

get rest(): Rest

targetOrigin

Origem da janela pai, calculada automaticamente

get targetOrigin(): string

uniqid

Identificador único do local de incorporação da aplicação

get uniqid(): string

user

Instância de User para verificar as permissões do usuário atual, gerenciar suas configurações, etc.

get user(): User

userOptions

Instância de UserOptions para gerenciamento das configurações do usuário atual

get userOptions(): UserOptions

Métodos

initialize

Inicializa uma miniaplicação dentro do iframe da plataforma Flowlu e retorna uma instância singleton de Frame. Recomenda-se utilizar o wrapper App.initializeFrame()

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

Parâmetro	Tipo	Descrição
params	FrameParams	Parâmetros de inicialização

Eventos do método initialize():

Evento	Parâmetro	Tipo	Descrição
'onReady'			Disparado após o carregamento do conteúdo do iframe (DOMContentLoaded), o Frame ser inicializado e o contexto ser recebido, e o conteúdo incorporado ser exibido
	context	FrameContext	Contexto da aplicação

Erros

O método lançará um erro se:

• a aplicação não estiver sendo executada em um navegador
• a aplicação não estiver dentro de um iframe
• o domínio da conta da plataforma não puder ser determinado

getInstance

Retorna a instância singleton atual de Frame. Chame apenas após initialize()

static getInstance(): Frame

destroy

Remove inscrições e libera recursos

destroy(): void

getContext

Retorna FrameContext — o contexto atual da aplicação

async getContext(): Promise<FrameContext>

getScopes

Retorna um array de strings Scope ('code:access') — os scopes da versão instalada da aplicação disponíveis para o usuário atual

async getScopes(): Promise<Scope[]>

hasScope

Verifica se a versão instalada da aplicação possui ao menos um dos scopes informados no formato Scope ('code:access'). Um nível de acesso mais amplo inclui um mais restrito, portanto na verificação basta informar o nível mínimo necessário. Por exemplo, a verificação 'users:read' retorna true se a aplicação recebeu o nível full para o código users — ele cobre read. Ao passar um array, o método retorna true se ao menos um dos scopes for satisfeito

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

Parâmetro	Tipo	Descrição
scope	Scope | Scope[]	Um scope ou um array de scopes a verificar

openHomepage

Abre a página inicial da aplicação na interface da plataforma, caso a página inicial esteja listada nos locais de incorporação do manifesto da versão da aplicação atualmente instalada

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

Parâmetro	Tipo	Descrição
params	FrameOpenHomepageParams	Parâmetros

Eventos do método openHomepage():

Evento	Parâmetro	Tipo	Descrição
'onOpen'			Página inicial da aplicação foi aberta
'onCancel'			Abertura cancelada

openUrl

Abre uma URL na interface da plataforma. Ao navegar para um recurso externo, a plataforma solicitará a confirmação do usuário e abrirá o link em uma nova aba do navegador

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

Parâmetro	Tipo	Descrição
params	FrameOpenUrlParams	Parâmetros

Eventos do método openUrl():

Evento	Parâmetro	Tipo	Descrição
'onOpen'			URL aberta com sucesso
'onCancel'			Usuário cancelou a ação

Exemplo

ESM

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

const frame = await App.initializeFrame({
  events: {
    onReady: (context) => {
      console.log(`A aplicação está pronta, contexto recebido: ${context}`)
    }
  }
})

// navegar para uma página dentro da plataforma
await frame.openUrl({
  url: '/_module/crm/view/account_view/47547'
})

// navegar para um recurso externo (abre em uma nova aba com confirmação)
await frame.openUrl({
  url: 'https://www.flowlu.com/',
  events: {
    onOpen: () => console.log('Navegação concluída'),
    onCancel: () => console.log('O usuário cancelou a navegação')
  }
})

// scopes da versão instalada da aplicação
console.log(`Scopes da aplicação: ${await frame.getScopes()}`) // ex.: ['users:full']

// o nível full cobre read, portanto a verificação users:read passa quando users:full é concedido
if (await frame.hasScope('users:read')) {
  console.log('Há acesso de leitura aos usuários')
}

UMD

const App = window.FlowluMiniApp;

const frame = await App.initializeFrame({
  events: {
    onReady: (context) => {
      console.log(`A aplicação está pronta, contexto recebido: ${context}`);
    }
  }
});

// navegar para uma página dentro da plataforma
await frame.openUrl({
  url: '/_module/crm/view/account_view/47547'
});

// navegar para um recurso externo (abre em uma nova aba com confirmação)
await frame.openUrl({
  url: 'https://www.flowlu.com/',
  events: {
    onOpen: () => console.log('Navegação concluída'),
    onCancel: () => console.log('O usuário cancelou a navegação')
  }
});

// scopes da versão instalada da aplicação
console.log(`Scopes da aplicação: ${await frame.getScopes()}`); // ex.: ['users:full']

// o nível full cobre read, portanto a verificação users:read passa quando users:full é concedido
if (await frame.hasScope('users:read')) {
  console.log('Há acesso de leitura aos usuários');
}