Saltar al contenido

Ocultar elementos específicos de la interfaz de usuario de controles en Jitterbit App Builder

Descripción general

El área Look and Feel de App Builder permite personalizar la apariencia de tus aplicaciones mediante temas, que emparejan un elemento de interfaz de usuario de destino con las propiedades de estilo aplicadas a él; consulta Temas para ver cómo se relacionan los temas, los componentes y los estilos. Esta página muestra dos ejemplos de uso de un estilo personalizado para ocultar un pequeño elemento de interfaz de usuario integrado en un control, en ambos casos estableciendo la propiedad Display del elemento en none:

Ocultar el control hacia arriba-abajo en un campo numérico

Los campos numéricos muestran un control hacia arriba-abajo, un pequeño selector con flechas hacia arriba y hacia abajo, por defecto cuando el campo está en estado de edición, permitiendo que los usuarios incrementen o disminuyan su valor haciendo clic en las flechas en lugar de escribir. Dado que este selector no es una Interfaz de Tema predefinida, ocultarlo significa crear una primero, luego aplicar un estilo de ocultación a ella, ya sea en toda tu aplicación o en un control específico.

image.png

Ejemplo que muestra el control hacia arriba-abajo visible

shipcostthemed.png

Ejemplo que muestra el control hacia arriba-abajo oculto

Para ocultar el control hacia arriba-abajo:

Crear las Interfaces de Tema de Control Hacia Arriba-Abajo

Crea una Interfaz de Tema personalizada para cada motor de navegador, siguiendo el procedimiento general en Configurar interfaces de tema:

  • Chrome, Safari, Edge y Opera: Establece Real Estate en Controls, Group en Fields, Collection en la colección a la que deseas que pertenezca la Interfaz de Tema (por ejemplo, Customer), Name en Up-Down Control, y Selector en input::-webkit-outer-spin-button, input::-webkit-inner-spin-button.
  • Firefox: Establece Real Estate en Controls, Group en Fields, Collection en la misma colección que arriba, Name en Up-Down Control (Firefox), y Selector en input[type=number].

Con ambas Interfaces de Tema creadas, aplica el estilo de ocultación a ellas utilizando uno de los dos métodos siguientes.

Aplicar el estilo en todo el sitio

Sigue estos pasos para aplicar el estilo de ocultación en toda tu aplicación, agregándolo al Tema Base de tu aplicación:

  1. Selecciona IDE > Look and Feel.
  2. Selecciona la Collection asignada a tu aplicación.
  3. Ve al Base Theme, que se aplica en toda tu aplicación.
  4. Selecciona Controls bajo Components, haciendo coincidir el Real Estate que estableciste al crear la Interfaz de Tema.
  5. Selecciona Fields bajo Subcomponents, haciendo coincidir el Group que estableciste.
  6. Haz clic en el botón + Style.

  7. Proporciona las siguientes entradas:

    • Area: Establécelo en Up-Down Control.
    • Style Type: Establécelo en Display.
    • 1-Display: Establécelo en ; -webkit-appearance: none; margin: 0.
    • 2-Opacity: Establécelo en 0.

  8. Haz clic en Save.

  9. Haz clic nuevamente en el botón + Style y proporciona las siguientes entradas:

    • Area: Establécelo en Up-Down Control (Firefox).
    • Style Type: Establécelo en Display.
    • 1-Display: Establécelo en ;-moz-appearance: textfield.

  10. Haz clic en Save.

Aplicar el estilo a un control específico

Sigue estos pasos para aplicar el estilo de ocultación a un nivel más granular, en un control específico en lugar de toda tu aplicación:

  1. Selecciona IDE > Apariencia y comportamiento.
  2. Selecciona la Colección en la que creaste las Interfaces de Tema.
  3. Haz clic en el botón + Tema para crear un nuevo tema personalizado para este control.
  4. Asigna un Nombre de Tema. Por ejemplo: Ocultar Control Arriba-Abajo.
  5. Establece el Tipo en Campo.
  6. Haz clic en Guardar.
  7. Selecciona Controles bajo Componentes, coincidiendo con la Propiedad que estableciste al crear la Interfaz de Tema.
  8. Selecciona Campos bajo Subcomponentes, coincidiendo con el Grupo que estableciste.
  9. Haz clic en el botón + Estilo.

  10. Proporciona las siguientes entradas:

    • Área: Establece en Control Arriba-Abajo.
    • Tipo de Estilo: Establece en Visualización.
    • 1-Visualización: Establece en ; -webkit-appearance: none; margin: 0.
    • 2-Opacidad: Establece en 0.

  11. Haz clic en Guardar.

  12. Haz clic en el botón + Estilo nuevamente y proporciona las siguientes entradas:

    • Área: Establece en Control Arriba-Abajo (Firefox).
    • Tipo de Estilo: Establece en Visualización.
    • 1-Visualización: Establece en ;-moz-appearance: textfield.

  13. Haz clic en Guardar.

Asignar el tema al control

Crear el tema personalizado anterior no lo aplica a nada por sí solo. Asigna el tema al control específico en el que deseas ocultar el control arriba-abajo:

  1. Navega a la página con el control que deseas modificar.
  2. Selecciona Panel de acciones > Diseñador en vivo.
  3. Selecciona el control desde la vista de diseño de la página.
  4. Selecciona Más > Estilos.
  5. Haz clic en + Formato condicional.
  6. Selecciona Incondicional para que el estilo siempre se aplique independientemente del valor del control.
  7. Haz clic en el botón Elegir Estilo.
  8. Localiza el tema personalizado que creaste anteriormente. Por ejemplo: Ocultar Control Arriba-Abajo.
  9. Haz clic en el botón + Elegir.
  10. Actualiza el navegador y confirma que el control arriba-abajo ya no aparece en el control.

Ocultar el chevron en un campo de texto con un evento

Un campo de texto con un evento adjunto muestra un pequeño icono de chevron de forma predeterminada, indicando que hacer clic en él hace algo. Para eliminar esa pista visual con un estilo personalizado, sigue estos pasos:

  1. Selecciona IDE > Apariencia y comportamiento.
  2. Selecciona la Colección que contiene el tema de la aplicación.
  3. Abre el tema para editar.
  4. Selecciona Controles bajo Componentes.
  5. Haz clic en el botón + Estilo.
  6. Selecciona Chevron para el Área.
  7. Selecciona Visualización como el Tipo de Estilo.
  8. Selecciona none para el valor de Visualización.
  9. Haz clic en Guardar.