# Widgets

Los widgets son los que te permiten crear micro frontends encapsulados para tus sitios y aplicaciones.

Al entrar en la sección Widgets del sitio, se puede ver un listado de todos los widgets que se han creado. En la barra superior se puede filtrar el listado de widgets por estado, autor o tags, o hacer una búsqueda de texto por el nombre del widget.

En la esquina superior derecha se observa un botón principal + Nuevo que permite crear un nuevo widget. Para ello, se debe escribir un nombre para luego entrar a la vista de edición del widget.

En la vista de edición del widget, se puede ver la barra superior de acciones, el área de trabajo y la columna de propiedades.

Widget Builder

En la barra superior se encuentran las siguientes secciones:

  • Borrador: Este estado aparece cuando recién se haya creado un widget o cuando se haya despublicado.
  • Publicado: Este estado aparece luego de haber hecho una publicación y cuando las versiones editable y publicada son iguales.
  • Cambios pendientes: Este estado aparece si es que ya hay una versión publicada, pero hay cambios pendientes de publicar en versión editable.
  • En revisión: Este estado aparece cuando esté habilitada la revisión en equipo y se haya enviado a revisión la versión editable.
  • Aprobado: Este estado aparece cuando esté habilitada la revisión en equipo y si es que se cumplieron las condiciones de revisión del elemento. Si se está en este estado, los templates están listos para ser publicados.

A la derecha, estas son las distintas acciones: Vista previa : Permite abrir en una nueva pestaña la vista previa de la versión editable del widget.

Atención

Puedes previsualizar los widgets como usuario sin sesión o usuario con sesión de Modyo. Para esto, es recomendable iniciar o cerrar la sesión de Modyo en el sitio antes de entrar al modo vista previa, dado que si se inicia o cierra sesión dentro del modo vista previa, podrías encontrarte con errores de seguridad del tipo x-frame-options o mixed-content, dependiendo de la configuración de dominios personalizados y SSL del sitio

Diferencias : Al hacer click en este ícono, irás a la vista de diferencias, en la cual puedes comparar los cambios que hay entre múltiples versiones del widget.

Por defecto comienzas comparando la versión publicada con la versión editable, pero al hacer uso de los selectores de versiones, se puede además con las versiones de respaldo. Si este ícono no aparece, entonces no hay ninguna versión publicada de este widget.

Actividad : Te permite desplegar una pestaña lateral que muestra la actividad y comentarios del widget.

Otras opciones: Permite archivar y crear una copia del widget actual.

Botón principal:

  • Guardar: Guarda los cambios actuales.
  • Enviar a revisión: Si está la revisión en equipo habilitada, entonces se puede enviar a revisión y notificar a los revisores de que el widget está listo para ser revisado.
  • Publicar: Te lleva a la vista de publicación conjunta donde podrás publicar tus widgets.

Otras acciones principales:

  • Despublicar: Si el widget está publicado, se puede sacar de producción usando esta opción.
  • Forzar publicación: Si eres administrador del sitio, se puede hacer uso de de esta opción para publicar inmediatamente un widget, incluso si está habilitada la Revisión en Equipo.

Tip

Sólo se pueden archivar los widgets que han sido despublicados previamente.

Tip

Los widgets archivados no aparecerán en el listado inicial ni tampoco en el modal de selección de widgets en el Page Builder. Para restaurar un widget archivado, se debe entrar a la vista de edición, usando la opción Restaurar en la esquina superior derecha de la vista.

Una vez que un widget está publicado, este será visible en el modal de selección de widgets personalizados en el Page Builder.

Tip

Para aprender más sobre el flujo de publicación, revise la sección de Versionado.

En el área de trabajo se puede ver:

  • Pestañas de código: Se tiene a disposición una pestaña de JavaScript, CSS y HTML para construir widgets.
  • Gestor de archivos: Al hacer click, se levanta el modal de gestión de archivos, donde se puede filtrar y buscar los archivos que has subido en el Gestor de Archivos y copiar su URL para usarlos en el widget. También se puede subir nuevos archivos desde este modal.
  • Atajos de teclado: Muestra una pequeña ventana informativa con algunos atajos de teclado útiles.
  • Snippets: Muestra una lista de los snippets disponibles desde el Template Builder y se copia su código para referenciarlos en el widget.
  • Cambios: Si se han guardado cambios y no han publicado, mostrará este listado de todas las veces guardadas cada uno de los archivos (JS, CSS y HTML). Al hacer click en una sub-versión, se cambia el contenido de la pestaña por el contenido de la sub-versión que se hizo click.

Tip

Para no perder los cambios que tienes actualmente, se debe guardar antes de saltar entre sub-versiones, de tal forma que siempre pueda volver a la última versión guardada en la lista de cambios.

Tip

Cuando se publica el widget, no se observarán cambios disponibles. Esto es porque cada versión parte sin cambios desde la versión productiva. Si se restaura el widget a una versión anterior, también lo harán las sub-versiones, por lo que se puede acceder a todas las instancias en que se guardaron cambios en esa versión.

En las tres pestañas del widget se puede hacer uso de Liquid. Para más información revise la documentación asociada a Liquid.

En la columna de propiedades se pueden ver:

  • Nombre: Permite cambiar el nombre del widget
  • Tags: Permite añadir tags a un widget. Los tag son de uso administrativo y sirven para buscar y filtrar los widgets y así poder encontrarlos rápidamente.
  • Páginas que usan este widget: Verás un listado de páginas que están usando este widget. Mientras veas páginas en este listado, no podrás despublicar ni archivar el widget.

Atención

Si eliminas un widget de una página y publicas, seguirás viendo esa página en este listado dado que el widget sigue referenciado en los respaldos de esa página. Desde la versión 9.1.10 en adelante, puedes despublicar cualquier widget publicado, incluso si está en uso. Las referencias activas en las páginas quedarán inactivas, por lo que no verás el widget en el sitio si lo despublicaste. Además, podrás archivar cualquier widget que no esté publicado, de tal forma que si aun existen referencias en algunas páginas del widget que quieres archivar, estas se eliminarán al momento de archivar el widget.

# Variables del widget

En la pestaña de variables puedes ver el listado de variables creadas en el widget, y sus respectivas acciones para:

  • Copiar el código liquid para usar esa variable.
  • Modificar la variable
  • Eliminar la variable.

Junto al nombre de cada variable verás un indicador "sobreescrita" si es que la variable también existe a nivel de cuenta o sitio en las variables globales.

Al modificar una variable, podrás decidir el nombre y valor por defecto que tomará esa variable en el widget. Además, podrás decidir si quieres disponibilizar un listado de valores para que al momento de instanciar el widget en una página, se pueda elegir entre estos distintos valores.

Cuando usas el listado de posibles valores, debes dejar cada valor en una linea nueva, y dejar un * delante del valor que quieres que sea tomado como valor por defecto.

Al momento de instanciar el widget en una página, verás que ahora todas las variables que se están usando (ya sean de cuenta, sitio o de widget) se listarán como "deshabilitadas" con su valor por defecto. Si quieres sobreescribir el valor de una variable en particular para esa instancia del widget en esa página, debes seleccionar el checkbox a la izquierda de la variable y cambiar el valor que toma.

Atención

Al instanciar el widget en una página se listarán todas las variables que ese widget está usando, por lo que si no ves alguna de las variables que están definidas en el widget, es muy probable que no se esté usando la variable en el código del widget.

# Carga síncrona

Atención

Esta es una funcionalidad experimental y puede estar sujeta a cambios.

Puedes decidir si quieres cargar tus widgets de forma sincrónica, es decir, que el código HTML, CSS y JavaScript de tu widget se carguen junto con el resto de la página desde el servidor, o bien, que se carguen de forma asincrónica, de tal manera que se cargará todo el contenido estático de la página y una vez que el documento principal esté cargado, el contenido de tu widget se cargará mediante JavaScript. Por defecto, todos los widgets se cargan de forma asincróica.

Para cambiar la forma en que se carga cada widget, debes ir a la vista de edición de la página que contiene el widget, seleccionar el widget y marcar o desmarcar la opción "Carga síncrona".

Atención

Debes tener en consideración que usar widgets muy pesados de forma sincrónica puede hacer que se vea disminuido el performance de tu página, por lo que debes decidir con cuidado cuales widgets se cargarán de forma síncrona y cuales de forma asíncrona

# Modyo CLI

La interfaz de línea de comandos de Modyo (CLI) es una herramienta de línea de comandos basada en dos principios de aceleración e integración, y estos principios tienen un comando get y push respectivamente.

# Introduction

Primero, necesita instalar la CLI de Modyo globalmente en su máquina local para tener disponible el comando modyo-cli, esto le permitirá inicializar un proyecto con algunas decisiones arquitectónicas de front-end ya tomadas, o usar para inicializar un widget desde catálogo si tiene acceso.

Para instalar el modyo-cli globalmente, debe usar una de estas opciones

$ npm i -g @modyo/cli #via npm
$ yarn global add @modyo/cli #via yarn

Este comando hará que el comando modyo-cli esté disponible en la sesión de terminal globalmente

Los comandos disponibles son get, push y help

# modyo-cli (-v|--version|version)

Imprima la versión modyo-cli

$ modyo-cli (-v|--version|version)
modyo-cli/3.0.6 darwin-x64 node-v12.13.1

# modyo-cli help [COMMAND]

USAGE
  $ modyo-cli help [COMMAND]

ARGUMENTS
  get   Pull a widget from our catalog into a new directory
  help  Display help for modyo-cli
  push  Push widget to Modyo platform

# Obtenga una plantilla para un proyecto

La CLI de Modyo está diseñada para funcionar en base a una arquitectura de micro front-end y acelerará el proceso de inicialización de un widget.

# modyo-cli get NAME [DIRECTORY]

En general, el comando get se usa para obtener una plantilla de widget. Si tiene un token proporcionado por Modyo, puede usar el mismo comando para extraer cualquiera de nuestros widgets premium de nuestra Biblioteca de widgets:

USAGE
  $ modyo-cli get NAME [DIRECTORY]

ARGUMENTS
  NAME       The name of the widget
  DIRECTORY  Name of directory to init

OPTIONS
  -f, --force       Override folder if exist
  -h, --help        Output usage information
  -x, --no-install  Don't install packages

EXAMPLE
  $ modyo-cli get name [directory]

Hay algunas plantillas de widgets públicos a los que se puede acceder a través de este comando

  EJEMPLOS
    $ modyo-cli get modyo-widgets-template-vue [DIRECTORY] #to initialize a widget

Desde este comando y en adelante, puede continuar utilizando el widget como cualquier otro widget vue-cli.

# modyo-cli push NAME

El comando push es el encargado del principio de integración, utilizado para enviar el widget al sitio seleccionado en la plataforma modyo.

Utilizará un argumento llamado nombre para cargar el widget en la plataforma y algunos indicadores requeridos como token site_base id o host para identificar la plataforma ®Modyo que aloja el widget y tienen un indicador adicional para evitar el flujo de proceso manual de la publicación del widget.

USAGE
  $ modyo-cli push NAME

ARGUMENTS
  NAME  The name of the widget

OPTIONS
  -b, --build-command=build-command      [default: build] Build command in package.json
  -d, --build-directory=build-directory  [default: dist] Build directory path
  -h, --help                             Output usage information
  -i, --site-id=site-id                  Id of the site where the widget will be push
  -n, --site-host=site-host              Host of the site where the widget will be push
  -p, --publish                          Force widget publication
  -t, --token=token                      (required) Modyo Api token
  -u, --account-url=account-url          (required) URL of your ®Modyo account ex("https://account.modyo.com")
  -v, --version=8|9                      [default: 9] Version of Modyo platform

EXAMPLE
  $ modyo-cli push <NAME>

Muchas de las opciones se pueden definir como variables de entorno o dentro de un archivo .env que se recomienda para evitar la publicación en el registro de github porque puede contener información delicada

MODYO_BUILD_DIRECTORY=buildDirectoryPath
MODYO_VERSION=version
MODYO_TOKEN=token
MODYO_ACCOUNT_URL=account-url
MODYO_SITE_ID=siteId
MODYO_SITE_HOST=siteHost
MODYO_BUILD_COMMAND=buildCommand
MODYO_REGEX_EXCLUDE=regexToExcludeFiles