Componentes del generador de páginas

Familiarícese con el generador de páginas y sus componentes para poder crear páginas de acciones. Los diferentes componentes y secciones del generador de páginas se describen en las siguientes secciones. Puede agregar y personalizar campos y botones adicionales en función de sus propios requisitos.

En la siguiente captura de pantalla, se muestra el generador de páginas:

  • Los componentes se encuentran en el panel izquierdo.
  • El lienzo del generador está en la sección central.
  • Los detalles de la página y las propiedades y acciones del componente se encuentran en el panel derecho.

Vista completa del generador de páginas

Plantillas de página

Al crear una página, puede seleccionar entre los siguientes diseños de página básicos, dependiendo de la información que desee. Cada plantilla está destinada únicamente a acelerar su actividad para producir la página que quiere.

  • Detalles: Plantilla de página que proporciona detalles estáticos.
  • Formulario: Genera una página que proporciona detalles estáticos, además de la posibilidad de introducir datos de usuario en la página.
  • Tabla: Genera una página basada en las tablas de datos que se cargan a partir de la integración de la aplicación de destino.
  • Contenido estático: Configura componentes de página que proporcionan información estática y no procesable, como titulares, mensajes de error y recordatorios.

Componentes del generador de páginas

El generador de páginas le permite elegir entre diversos componentes de página que le permiten personalizar y configurar la salida, la información y la presentación de la microaplicación. Utilice componentes para crear una microaplicación de página basada en sus expectativas y necesidades. Por ejemplo, si quiere mostrar una lista de usuarios, utilice el componente Tabla para crearla. Las diferentes páginas de plantilla tienen diferentes funciones de componentes disponibles de forma predeterminada. Las siguientes listas cubren todas las opciones disponibles.

Componentes de entrada: Entrada proporciona los componentes para crear secciones procesables en su página, incluidos botones, entrada de texto, botones de radio, etc.

Vista detallada de los componentes de entrada

  • Botón: Agrega a la página un componente en el que se puede hacer clic con acciones y lógica. El tamaño y el estilo de los botones se pueden ajustar. Existen acciones, como opciones para Ejecutar acción de servicio, Ir a URL y Ejecutar desencadenante de notificación. Por ejemplo, mediante acciones, el botón puede dirigir a los usuarios a otra página o enviar una entrada.
  • Entrada de texto: Define el origen de texto especificando la tabla de datos, la columna y el valor que el usuario puede cargar en la página. El componente se puede marcar como opcional. El ancho del campo se puede modificar. Las reglas de validación se pueden configurar en función de una longitud mínima o máxima o un patrón de texto para identificar la entrada del usuario.
  • Área de texto: Define el origen de texto especificando la tabla de datos, la columna y el valor que el usuario puede cargar en la página. El componente se puede marcar como opcional. Las reglas de validación se pueden configurar en función de una longitud mínima o máxima o un patrón de texto para identificar la entrada del usuario.
  • Entrada núm: Define el origen numérico especificando la tabla de datos, la columna y el valor que un usuario puede cargar en la página. Puede definir el formato como hora, fecha, etc. El componente se puede marcar como opcional y el ancho del campo se puede modificar. Las reglas de validación se pueden configurar en función de una longitud mínima o máxima o un patrón de texto para identificar la entrada del usuario.
  • Seleccionar: Permite a los usuarios elegir entre una lista de valores (límite de 100 valores). Se puede rellenar con datos del sistema de origen o puede introducirse la lista de valores manualmente. El componente se puede marcar como opcional y el ancho del campo se puede modificar. Puede definir el formato como hora, fecha, etc., así como el ancho del campo.
  • Buscar: Permite a los usuarios buscar a través de una gran cantidad de valores y seleccionar un valor al buscar otra cosa. Es necesario especificar de dónde se agrupan los datos, así como cuál debe ser el valor de búsqueda. El componente se puede marcar como opcional.
  • Casilla de verificación: Agrega un componente seleccionable en la página definiendo el origen (tabla de datos y columna) y el valor predeterminado (bien seleccionado o inhabilitado). El componente se puede marcar como opcional.
  • Radio: Permite agregar un conjunto de opciones entre las que seleccionar solo una. Se puede rellenar con datos del sistema de origen o puede introducirse la lista de valores manualmente. El componente se puede marcar como opcional.
  • Fecha/Hora: Permite definir la fecha y la hora que se mostrarán en la microaplicación y la hora predeterminada (la hora mostrada antes de la selección) que se cargarán en la página. El componente se puede marcar como opcional y el ancho del campo se puede modificar.

Componentes de presentación: Presentación proporciona los componentes necesarios para mostrar la información a los usuarios finales de las microaplicaciones, incluidas tablas, texto estático e imágenes, etc.

Vista detallada de los componentes de visualización

  • Tabla: Agrega una tabla definiendo el origen de la tabla, los filtros y las columnas. Se pueden agregar acciones de enlace a páginas que dirigen al usuario a otra página. La alineación se puede modificar. Se deben configurar consultas personalizadas para limitar la exposición de los datos. Una tabla sin consulta personalizada muestra todos los registros que coinciden con un filtro de tabla, independientemente de la relación de los datos con los suscriptores. Sus datos confidenciales pueden estar expuestos a todos los usuarios de microaplicaciones, a menos que limite la exposición. Para controlar el acceso a los datos de las páginas, utilice la función Personalizar. Seleccione la tabla en el panel del generador de componentes. Seleccione Propiedades de tabla y, a continuación, PERSONALIZAR. Seleccione +Agregar condición y agregue las restricciones necesarias.
  • Texto: Define el origen del texto procedente de tablas y el formato para carga en la página. Origen de datos, Tabla y Columna se seleccionan para rellenar con texto. Se puede dar un formato de texto como hora, fecha, etc., o bien uno condicional basado en parámetros. Puede agregar acciones para ir a una página, URL, enviar correo electrónico o llamar por teléfono.
  • Texto estático: Define texto estático que aparecerá en la página. Se pueden agregar acciones. La alineación se puede modificar. Puede hacer una distinción si el texto es un encabezado. Están disponibles los estilos de fuente negrita y cursiva. El tamaño de fuente se puede cambiar de Normal, Delgada, Pequeña y Pequeña y delgada. Puede agregar acciones para ir a una página, URL, enviar correo electrónico o llamar por teléfono.
  • Imagen estática: Hace referencia a una imagen estática de una fuente URL predefinida y la muestra. Se pueden especificar el tamaño y la alineación de las imágenes. No se pueden agregar acciones.
  • Imagen: Define el origen de la imagen (columna y tabla de datos) y el formato que mostrar en la página. Se puede agregar texto para mostrarlo si la imagen no se puede cargar. Se puede configurar el formato de imagen, como la alineación, el tamaño y la forma.
  • Separador de líneas: El separador sirve para separar la información no relacionada y la información relacionada con el grupo. No se pueden modificar las propiedades.
  • Botón Atrás: Permite a los usuarios volver a la página anterior. Debe especificarse una variable, es decir, tabla de datos, columna de datos y formato. Se puede asignar una etiqueta.
  • Power BI: Muestra un informe de inteligencia empresarial. Defina el origen y el formato.
  • Visor de recibos de Concur: Muestra una imagen de un recibo. Defina el origen con la tabla de datos, columna de datos y formato.
  • Tableau: Muestra un informe de Tableau. Defina el origen con la tabla de datos y la columna.
  • Contenido HTML: Sirve para mostrar correctamente contenido HTML de fuentes extraídas (por ejemplo, fuentes RSS) Defina el origen con la tabla de datos y la columna. Se admiten elementos de texto básicos. Los elementos permitidos son:

    • “p”, “div”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “ul”, “ol”, “li”, “blockquote”, “b”, “i”, “font”, “s”, “u”, “o”, “sup”, “sub”, “ins”, “del”, “strong”, “strike”, “tt”, “code”, “big”, “small”, “br”, “span” y “em”.
    • El elemento “a” solo con los atributos “target” y “href”.
    • El elemento “img” solo con los atributos “height”, “width” y “src”.
    • Además, el atributo “style” está permitido con cualquier elemento.

Componente de diseño: Proporciona el componente de cuadrícula para configurar el diseño de la página.

Vista detallada de los componentes de diseño

  • Cuadrícula flexible: Le ofrece un mayor control sobre el posicionamiento de los componentes en las páginas, ya que posibilita un “encaje” más fácil de los mismos. Es útil al diseñar páginas destinadas a dispositivos con pantallas más grandes. Establezca la etiqueta y el número total de celdas que desee en la cuadrícula.

Detalles de página

Los detalles de la página permiten configurar la página que está creando y establecer filtros para la información, además de proporcionar una serie de funciones informativas de depuración:

  • Nombre de página: Establece el nombre de la página.
  • Filtro de datos: Sirve para establecer restricciones en los datos de acción.
  • Mostrar SQL: Sirve para mostrar el código SQL con fines de depuración.
  • Lógica: Sirve para agregar la lógica del componente y mostrarla. Encontrará detalles de AGREGAR LÓGICA en la siguiente sección.

Lógica

Seleccione el botón AGREGAR LÓGICA en la ficha Detalles de la página para abrir la configuración lógica. Esto le permite configurar la lógica para el componente de página en particular. Utilice argumentos lógicos estándar para crear condiciones y lograr diferentes resultados, en función del comportamiento del componente. Puede agregar varias acciones apiladas a cualquier botón para crear efectos de acción múltiples con un solo clic. Cuando cada acción de servicio se ejecuta correctamente, el sistema se desplaza en la cadena de acciones hasta completar todas. Entre las acciones se incluyen:

  • Evaluar condición: Establece y modifica una condición a través de un argumento lógico.
  • Establecer valor de componente: Establece el valor de componente del botón para confirmar una acción.
  • Mostrar componente: Configura las condiciones para mostrar el componente.
  • Ocultar componente: Configura las condiciones para ocultar el componente.
  • Habilitar componente: Configura las condiciones para habilitar el componente.
  • Inhabilitar componente: Configura las condiciones para inhabilitar el componente.
  • Definir componente como requerido: Configura las condiciones para requerir el componente.
  • Definir componente como no requerido: Configura las condiciones para excluir el componente.

Propiedades de componente

Cada componente del generador de páginas tiene su propio menú de propiedades específicas con varias opciones entre las que elegir, dependiendo del componente, lo que incluye:

  • Etiqueta: Personaliza la etiqueta del botón, texto, imagen, etc.
  • Tamaño: Define el tamaño del botón, texto, etc.
  • Estilo: Cambia entre diferentes colores y formatos para el texto, botón, etc.
  • Mostrar en pie de página Blade: Muestra u oculta el elemento en la página blade.
  • Origen de datos: Selecciona el origen de datos para el elemento mostrado.
  • Tabla de datos: Selecciona la tabla de datos para el elemento mostrado.
  • Columna de datos: Selecciona la columna de datos para el elemento mostrado.
  • Formato condicional: Configura el formato condicional para el elemento de página.
  • Insertar variables: Agrega variables al elemento de página para mostrar automáticamente los datos de integración de aplicaciones.
  • Mostrar conmutadores: Muestra u oculta la forma en que se representa el elemento en el generador de páginas.

Acciones

El menú de acciones está presente para el componente Botón para permitir que los destinatarios de la microaplicación (usuarios de Workspace) respondan con una entrada procesable. Define la acción que el botón ejecuta a partir de las acciones configuradas en la integración. Entre las acciones se incluyen:

  • Ejecutar acción de servicio
  • Enviar correo electrónico
  • Agregar evento de G Suite
  • Atrás
  • Ir a la página
  • Ir a la URL
  • Ejecutar desencadenante de notificaciones

Puede utilizar valores de componentes como parámetros en las acciones Enviar correo electrónico e Ir a la URL. Esta funcionalidad permite:

  • (Enviar correo electrónico) Los usuarios de Workspace pueden introducir destinatarios de correo electrónico en un campo de Workspace para una acción determinada.
  • (Ir a la URL) La entrada del usuario desde un formulario de Workspace se puede utilizar como parte de una plantilla de URL abierta en Workspace.

Siga los pasos que se indican a continuación, conforme a su caso de uso.

Agregar una acción Enviar correo electrónico

  1. Después de agregar un componente Botón al generador y completar las Propiedades del botón según sea necesario, seleccione la ficha Acciones.
  2. Inhabilite la opción Botón de acción de página. En el campo Agregar acción, seleccione Enviar correo electrónico.
  3. En A, seleccione INSERTAR VARIABLE.

    Pasos de acción de página

  4. En la pantalla Insertar variable, en el menú Tipo, seleccione Valor de componente.
  5. En Componente, seleccione el componente de entrada que un usuario deberá introducir en el formulario de Workspace. El campo A se rellena con el ID del componente.
  6. Agregue un Asunto y un Cuerpo para el mensaje, según corresponda. En Workspace, los usuarios pueden introducir una dirección de correo electrónico en el campo habilitado por este componente. Cuando envían la dirección de correo electrónico, su programa de correo electrónico se abre con un mensaje rellenado previamente que se puede modificar si es necesario y enviar.

Agregar una acción Ir a la URL

  1. Después de agregar un componente Botón al generador y completar las Propiedades del botón según sea necesario, seleccione la ficha Acciones.
  2. Deje el Botón de acción de página habilitado. En el campo Agregar acción, seleccione Ir a la URL.
  3. En el campo Plantilla de URL, escriba la dirección URL del sitio de destino que quiere abrir.
  4. En el campo Plantilla de URL, seleccione INSERTAR VARIABLE
  5. En la pantalla Insertar variable, en el menú Tipo, seleccione Valor de componente.
  6. En Componente, seleccione el componente necesario. El campo Plantilla de URL se rellena con el ID de componente agregado a la dirección URL especificada. En Workspace, los usuarios pueden introducir un valor en el campo habilitado por este componente. Cuando envían la consulta, el valor del componente seleccionado se utiliza como variable en la dirección URL que se abre en su navegador.

Nota:

Seleccione el icono de información situado junto a los campos de plantilla para ver una anotación detallada sobre los componentes usados.

Componentes del generador de páginas