Cómo ocultar un control arriba-abajo en un campo numérico en Jitterbit App Builder

Los campos numéricos muestran un control de incremento de arriba a abajo, por defecto, cuando el campo está en estado de edición. El usuario puede hacer clic en los botones de incremento o decremento para aumentar o disminuir el valor numérico correspondiente. En algunos casos, puede que desee ocultar este control de incremento y este artículo le explicará cómo hacerlo.

Ejemplo que muestra el control de subida y bajada visible

Ejemplo que muestra el control Arriba-Abajo oculto

Crear una interfaz de tema personalizada (Chrome, Safari, Edge, Opera)

1. Vaya a IDE > Configuración adicional
2. Haga clic en el botón Interfaces de tema
3. Haga clic en + Interfaz

4. Introduzca los siguientes datos:

   • Inmueble = Controles
   • Grupo = Campos
   • Colección = Cliente
   • Nombre = Control arriba-abajo
   • Selector = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Haz clic en el icono de marca de verificación para guardar.

Crear una interfaz de tema personalizada (Firefox)

1. Vaya a IDE > Configuración adicional
2. Haga clic en el botón Interfaces de temas
3. Haga clic en + Interfaz

4. Proporcione las siguientes entradas:

   • Bienes raíces = Controles
   • Grupo = Campos
   • Colección = Cliente
   • Nombre = Control Arriba-Abajo (Firefox)
   • Selector = input[type=number]

5. Haz clic en el icono de marca de verificación para guardar.

Opción 1: Aplicar el tema personalizado en todo el sitio

Sigue estos pasos si quieres aplicar esta personalización a toda la aplicación.

1. Ve a IDE > Apariencia
2. Selecciona la Colección asignada a tu aplicación
3. Ve al Tema base
4. Selecciona Controles en Componentes
5. Selecciona Campos en Subcomponentes
6. Haz clic en el botón + Estilo

7. Introduce los siguientes datos:

   1. Área = Control arriba-abajo
   2. Tipo de estilo = Pantalla
   3. 1-Pantalla = ; -webkit-appearance: none; margin: 0
   4. 2-Opacidad = 0

8. Haga clic en Guardar

9. Haga clic en el botón + Estilo

10. Proporcione las siguientes entradas:

    1. Área = Control arriba-abajo (Firefox)
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ;-moz-appearance: textfield

11. Haz clic en Guardar

Opción 2: Aplicar el tema personalizado a un control específico

Siga estos pasos si desea aplicar esta personalización a nivel granular, por ejemplo, a un control específico.

1. Vaya a IDE > Apariencia
2. Seleccione la Colección del cliente
3. Haga clic en el botón + Tema
4. Asigne un Nombre del tema. Por ejemplo: Ocultar control arriba-abajo
5. Establezca el Tipo en Campo
6. Haga clic en Guardar
7. Seleccione Controles en Componentes
8. Seleccione Campos en Subcomponentes
9. Haga clic en el botón + Estilo

10. Introduzca los siguientes datos:

    1. Área = Control arriba-abajo
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ; -webkit-appearance: none; margin: 0
    4. 2-Opacidad = 0

11. Haga clic en Guardar

12. Haga clic en el botón + Estilo

13. Proporcione las siguientes entradas:

    1. Área = Control arriba-abajo (Firefox)
    2. Tipo de estilo = Pantalla
    3. 1-Pantalla = ;-moz-appearance: textfield

14. Haz clic en Guardar

Aplicar tema a un control

1. Navega a la página con el control que deseas modificar.
2. Ve a Panel de acciones > Diseñador dinámico.
3. Selecciona el control en la vista de diseño de página.
4. Ve a Más > Estilos.
5. Haz clic en + Formato condicional.
6. Selecciona Incondicional.
7. Haz clic en el botón Elegir estilo.
8. Localiza el tema personalizado. Por ejemplo: Ocultar control arriba-abajo.
9. Haz clic en el botón + Elegir.
10. Vuelve a la vista de la aplicación, actualiza el navegador y prueba la actualización.