CustomJS: funciones para personalizar apps del Marketplace

CustomJS

Funciones auxiliares (wrappers)

La plataforma ofrece funciones para renderizar datos contextuales y utilidades que ayudan a tu equipo de desarrollo a personalizar la experiencia dentro de una app del Marketplace, sin tener que construir todo desde cero.

1. Manejo de Local Storage y Cookies

Esta funcionalidad ofrece metodos utilitarios para trabajar con localStorage y cookies de forma eficiente.

Wrapper de Local Storage:

• Guarda datos con un tamaño máximo de 5KB por entrada.
• El wrapper agrega automáticamente el prefijo custom_ a las llaves para evitar colisiones con otras.
• Los datos guardados se limpian automáticamente cuando la instancia de Vue se destruye.

Uso:

await  AppUtils.Storage.setData(key,  value); //  Guardar  datos
await  AppUtils.Storage.getData(key); //  Recuperar  datos

Wrapper de Cookies:

• Guarda datos con un tamaño máximo de 5KB por entrada.
• Permite definir cookies con expiracion opcional (máximo 2 días desde su creacion).
• El wrapper agrega automáticamente el prefijo custom_ a las llaves.

Uso:

await AppUtils.Storage.setCookie(key, value, expiryInHours)
//o
await AppUtils.Storage.setCookie(key, value) // Guardar datos en una cookie

await AppUtils.Storage.getCookie(key) // Recuperar el valor de una cookie

2. Eventos personalizados

Puedes escuchar eventos personalizados de la aplicación para ciertos puntos del ciclo de vida o actividades específicas.

Eventos:

• routeLoaded: se emite cuando se carga la primera ruta después de iniciar la aplicación.
• routeChangeEvent: se emite en cada cambio de ruta posterior a la carga inicial.

Uso:

window.addEventListener('routeLoaded',callback)
window.addEventListener('routeChangeEvent',callback)

3. Metodos de navegacion (routing)

Los scripts personalizados ahora pueden controlar la navegacion dentro de la aplicación mediante los metodos expuestos.

Metodos:

• getCurrentRoute(): obtiene la información de la ruta actual.
• navigate(options:INavigationOptions): permite navegar a otra ruta por nombre o por path.

 interface INavigationOptions{
  name?: string
  path?: string
  params?: Record<string,  string>
  query?: Record<string,  string>
  replace?: boolean
  append?: boolean
}

Uso:

await AppUtils.RouteHelper.navigate({name: 'integrations-settings-v2'}); // Navega a la pagina de integraciones en la sede actual

const path = '/integration'
await AppUtils.RouteHelper.navigate({path}) // Navega a la pagina de apps del marketplace

const currentRoute = await AppUtils.RouteHelper.getCurrentRoute();
console.log(currentRoute); // Muestra la informacion de la ruta actual {fullPath, name, params, path, query}

4. Metodos utilitarios

Este conjunto de metodos ofrece datos contextuales esenciales para tus scripts personalizados — muy útil, por ejemplo, si tu app necesita saber en que sede o para que usuario se esta ejecutando.

Metodos:

• Información del usuario: getCurrentUser() — obtiene la información del usuario actual.
• Sede actual: getCurrentLocation() — obtiene los datos de la sede actual del usuario.
• Información de la empresa: getCompany() — obtiene la información de la empresa actual.

Uso:

const userInfo = await AppUtils.Utilities.getCurrentUser();//{id, name, firstName, lastName, email, type, role}

const currentLocation = await AppUtils.Utilities.getCurrentLocation();//{id, name, address: {address, city, country}}

const companyInfo = AppUtils.Utilities.getCompany();//{id, name}