Plantillas
Enlaces
Al editar plantillas puedes conectar contenido fácilmente. Puedes enlazar contenido a un botón, una imagen, una tarjeta o a un elemento desde los ajustes de contenido de cada uno.
Hay distintos tipos de enlaces; a continuación explicamos en qué consisten y cómo usarlos:
Enlace a una plantilla
Este enlace te permite vincular el elemento que estás configurando con una de las plantillas que has creado. Por ejemplo, puedes configurar un botón para llevarte a un formulario de mantenimiento o una imagen para llevarte a una página con información.
URL de Internet
Este enlace te permite vincular tu elemento a una URL. Puedes, por ejemplo, enlazar un vídeo de YouTube, tu web o una página con información adicional que quieras compartir.
Archivo
Sube un archivo o un PDF a tu Biblioteca multimedia haciendo clic en el botón y añádelo a tu enlace. Si has subido un PDF, puedes elegir que los usuarios descarguen el archivo al acceder al enlace o, marcando la opción de vista previa, acceder a una previsualización del documento. Sube manuales, catálogos o información adicional y facilita el acceso a tus usuarios.
Número de teléfono
Añade un número de teléfono como enlace y permite que tus usuarios llamen directamente con un solo clic. Crea un botón y añade un número de asistencia o de emergencia. Permite que tus usuarios accedan a tu número desde la propia app.
Contactar por correo electrónico
Vincula un correo electrónico a un botón, imagen o elemento para que tus usuarios puedan acceder a tu correo y enviarte un email directamente al hacer clic en el enlace. Perfecto para enlazar información o correos de contacto.
Enlace según la aplicación
Un enlace condicional es un tipo de enlace que te permite usar cualquiera de los tipos de enlace vistos anteriormente según la app a la que pertenezca la etiqueta visitada. Podrás generar distintos tipos de apps y, con la misma plantilla, mostrar contenido diferente según la app que visites.
Entidad
Entity es un tipo de enlace que te permite vincular tu bloque con la entidad actual, su padre o su padre actual, siempre que el bloque permita verlos.
En el caso de otras plantillas, URL de Internet y archivo, puedes elegir si quieres que el enlace se abra en una nueva ventana, lo que te permitirá mantener la app abierta mientras ves el contenido del enlace.
Cómo crear un enlace
Primero tendrás que seleccionar el tipo de Content en el que quieres añadir el enlace. Para ello, cuando añadas algún tipo de contenido a tu App, como una imagen o un botón, la opción para añadir un enlace aparecerá dentro de su configuración.
En el ejemplo siguiente, se muestra el menú que aparece al añadir el bloque de contenido que contiene una "Image".
En el tipo de enlace podemos seleccionar la clase de enlace tal como hemos descrito al inicio de este artículo. Desde aquí, introduce las especificaciones que necesites en cada momento para ofrecer a tu App la mejor navegabilidad posible.
Menú
El menú de la App en TicTAP es un elemento esencial para que el usuario pueda navegar por las distintas secciones de la App. Es un elemento muy importante, ya que es lo primero que ve el usuario al abrir la App y lo primero que utilizará para moverse por ella.
El menú se crea externamente; es decir, como si fuera otro elemento independiente fuera de tu App, en este caso una nueva plantilla de tipo menú. Después volveremos a nuestra App y, desde la opción de Configuración y Menú lateral, seleccionaremos la plantilla de menú creada.
Vamos paso a paso:
Crear la plantilla
Para crear un menú tienes que crear una nueva Template desde el menú izquierdo en la Home de la plataforma (fuera de la App). Elegimos el tipo Menú y le asignamos un nombre. La plantilla 'menu' solo permite añadir un tipo de bloque: 'Menu item with image'.
Diseñar tu menú
Para crear tu menú, arrastra tantos bloques 'item' como quieras y asígnales contenido. Puedes enlazar los elementos de tu menú con otras plantillas, URLs, números de teléfono, correos, archivos y muchos más iconos o imágenes para acompañar el texto del menú, pero recuerda que se mostrará en un tamaño muy pequeño, así que evita poner contenido demasiado detallado o iconos con líneas excesivamente finas.
También puedes añadir color a tu menú y asignar colores específicos a cada uno de los elementos. Cuando termines, guarda los cambios.
Vincular el menú a tus plantillas
El menú ya está creado, pero debes añadirlo al resto de plantillas de tu app. Para ello, entra en cada una de las plantillas (o en la plantilla si solo tienes una), ve a la pestaña de configuración y elige la opción 'Side Menu'. Busca tu menú y as ígnalo con la opción 'browse templates', como se muestra en la imagen inferior.
Consejo: Tendrás que vincular tu menú en la plantilla principal para que esté siempre visible.
Comprobar que todo está bien
Comprueba que el menú está correctamente vinculado haciendo una vista previa de tu App, donde verás que se ha añadido un menú en la parte superior de tipo hamburger. Si todo está bien, disfruta de una forma rápida de acceder a todo tu contenido desde cualquier plantilla de tu app.
Cómo usar variables en las plantillas
Variables de texto
Para usar variables en las plantillas debes utilizar la notación *|VARIABLE_NAME|* . De este modo, el contenido entre los delimitadores *| y |* será sustituido por el valor que tenga esa variable. Aquí tienes algunos ejemplos de variables que puedes usar:
Variables de Etiqueta
*|tag.name|* contiene el nombre de la etiqueta
*|tag.description|* contiene la descripción de la etiqueta
Variables de App
*|app.name|* contiene el nombre de la App a la que pertenece la etiqueta visitada.
*|app.description|* contiene la descripción de la App a la que pertenece la etiqueta visitada.
Variables de Usuario
*|user.name|* contiene el nombre del usuario conectado
*|user.email|* contiene el correo electrónico del usuario conectado
Variables de Activo
Como en TicTAP una etiqueta puede estar "pegada" a un activo, la información del activo puede consultarse mediante variables de activo.
*|asset.name|* contiene el nombre del activo. Todo activo siempre tiene un nombre
*|asset.external-reference|* contiene una referencia externa del activo. Suele usarse cuando el activo tiene un ID distinto al de TicTAP y resulta útil guardarlo por motivos de integración.
*|asset.end-of-life-at|* contiene la fecha en la que el activo fue dado de baja o está programado para darse de baja.
*|asset.is-eol|* contiene un valor booleano que indica si el activo está dado de baja o no.
*|asset.breadcrumbs|* contiene una cadena con la ruta de ancestros hasta el activo actual
*|asset.state|* contiene el nombre del estado actual del activo
*|asset.definition|* contiene la "definición" actual del activo, es decir, su configuración. Esto es útil cuando quieres acceder a propiedades concretas del tipo de activo: *|asset.definition.{system-field-name}|* . Por ejemplo, podrías acceder al "name" o al "icon":
*|asset.definition.name|*el nombre del "Asset type"*|asset.definition.icon:url('page_card')|*el icono del "Asset type"
*|asset.parent|* contiene el padre del activo. No lo uses directamente, sino que accede a cualquier propiedad del padre igual que harías con el propio activo. Por ejemplo, si quieres acceder al nombre del padre, debes usar *|asset.parent.name|*
Algunos ejemplos:
*|asset.parent.state|* contiene el estado del padre del activo.
*|asset.parent.breadcrumbs|* contiene las migas de pan del padre del activo.
*|asset.parent.definition.name|* contiene el nombre del tipo de activo del padre
*|asset.parent.definition.icon:url('page_card')|* contiene el icono del tipo de activo del padre.
También puedes acceder a los ancestros del activo. El merge tag
*|asset.parents.{asset-type}|* permite buscar cualquier ancestro del activo. Debes usar este merge tag junto con el "slug" del asset-type para determinar qué tipo de padre estás buscando.
Por ejemplo:
*|asset.parents.warehouse|* encontraría el primer ancestro de este activo de tipo "warehouse". Una vez encontrado, también puedes usarlo para extraer propiedades de ese activo en la plantilla: *|asset.parents.warehouse.address|*
Variables de planes de mantenimiento
*|asset.plannings|* contiene las planificaciones del activo, pero no puedes usarlo directamente.
Puedes hacer referencia a una planificación concreta usando su planning-slug
*|asset.plannings.planning-slug.next-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.last-date:date('d/m/Y')|*
*|asset.plannings.planning-slug.status|*
O también puedes acceder a una planificación por su posición en la lista de planificaciones disponibles para este activo. Por ejemplo, si quieres acceder a la primera planificación de este activo, solo tienes que hacer:
*|asset.plannings[0].next-date:date('d/m/Y')|*
*|asset.plannings[0].last-date:date('d/m/Y')|*
*|asset.plannings[0].status|*
Los activos también pueden tener un conjunto de campos personalizados que pueden configurarse según el equipo en el que trabajes. Cuando necesites mostrar la información de ese campo para tu activo, es necesario anteponer "asset" al nombre de sistema del campo personalizado. Por ejemplo, si tienes un campo personalizado llamado "My custom field", debes usar la siguiente notación para acceder a él:
*|asset.my-custom-field|*
Variables de campos personalizados
Los campos personalizados pueden configurarse para usarse en Tags, Apps y Assets (o Entities). Según el origen de ese campo personalizado, debes añadir el prefijo que indica la ubicación donde reside ese campo.
Por ejemplo, podemos configurar un campo personalizado llamado "My custom field", que puede referenciarse así:
*|tag.my-custom-field|* *|app.my-custom-field|* *|asset.my-custon-field|* , según si el campo se ha colocado como parte de un TAG, una App o un ASSET.
Valor alternativo: valor por defecto
Es posible especificar un valor por defecto si la VARIABLE a la que nos referimos no tiene valor.
Así, por ejemplo, puedes especificar:
*|asset.field||tag.field|*
Lo que significa: cuando TAG_VARIABLE no tenga valor, usa el valor de TAG_FALLBACK_VARIABLE
Filtros
También puedes usar filtros en tus variables para transformar el valor de una variable. Estos son los filtros compatibles actualmente:
url
El filtro url permite extraer una URL de un archivo/imagen presente en una variable
*|tag.photo:url('page_card')|*
El parámetro opcional especifica el "formato" de ese medio, que hace referencia a las "dimensiones" de la imagen indicada. Actualmente están disponibles: "page_card" y "page_thumbnail"
localize
Usa la "locale actual" para mostrar un texto de forma condicional.
*|FILTER:localize({"en":"English","pt":"Portuguese"})|*
date
Un filtro de tipo "date" te permite formatear de distintas maneras una variable que contenga una fecha:
*|tag.date:date('Y')|**|asset.last-maintenance-at:date('Y')|**|asset.last-maintenance-at:date('m-Y')|*
Pero también puedes usar date con now para crear una marca temporal, por ejemplo:
*|now:date('YmdHis')|*
Puedes encontrar todos los formatos disponibles en Formatos de fecha
Funciones
También puedes usar funciones en tus plantillas para controlar la información mostrada en función de una variable. Estas son las funciones compatibles actualmente:
IF / ELSE
Puedes usar la función IF() para controlar la información mostrada en función de una variable
Aquí tienes algunos ejemplos de uso de IF:
{{ IF(*|asset.field|*, "A2 was true", "A2 was false" ) }}
{{ IF(*|asset.field|*, *|asset.field|*,"A2 was false") }}
{{ IF(*|asset.field|*, *|asset.field|*, *|asset.another-field|*) }}
{{ IF(*|asset.field|* = "foo", "<div>Your HTML HERE!!</div>" ) }
ASSET_URL
Puedes usar la función ASSET_URL para obtener un enlace directo a un activo, incluso si no tiene una etiqueta pegada. Requiere el id del activo como único argumento:
{{ASSET_URL(*|asset.id|*)}}
ASSET_QR
Puedes usar la función ASSET_QR para obtener un código QR de un activo, incluso si no tiene una etiqueta pegada.
{{ASSET_QR(*|asset.id|*)}}