Como ocultar um controle para cima e para baixo em um campo numérico no Jitterbit App Builder

Campos numéricos exibem um incrementador de controle para cima e para baixo, por padrão, quando o campo está no estado de edição. Um usuário pode clicar nos botões para cima ou para baixo para incrementar ou decrementar um valor numérico correspondente. Pode haver casos em que você queira ocultar esse controle para cima e para baixo, e este artigo explicará como fazê-lo.

Exemplo mostrando o Controle Cima-Baixo visível

Exemplo mostrando o Controle Cima-Baixo oculto

Crie uma interface de tema personalizada (Chrome, Safari, Edge, Opera)

1. Navegue até IDE > Configurações Adicionais
2. Clique no botão Interfaces do Tema
3. Clique em + Interface

4. Forneça as seguintes entradas:

   • Imóveis = Controles
   • Grupo = Campos
   • Coleção = Cliente
   • Nome = Controle Cima-Baixo
   • Seletor = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Clique no ícone de marca de seleção para salvar

Crie uma interface de tema personalizada (Firefox)

1. Navegue até IDE > Configurações adicionais
2. Clique no botão Interfaces de tema
3. Clique em + Interface

4. Forneça as seguintes informações:

   • Imóveis = Controles
   • Grupo = Campos
   • Colecionador = Cliente
   • Nome = Controle para cima e para baixo (Firefox)
   • Seletor = input[type=number]

5. Clique no ícone de marca de seleção para salvar

Opção 1: aplicar o tema personalizado em todo o site

Siga estes passos se desejar aplicar esta personalização a um aplicativo inteiro.

1. Navegue até IDE > Aparência
2. Selecione a Coleção atribuída ao seu aplicativo
3. Acesse o Tema Base
4. Selecione Controles em Componentes
5. Selecione Campos em Subcomponentes
6. Clique no botão + Estilo

7. Forneça as seguintes informações:

   1. Área = Controle Cima-Baixo
   2. Tipo de Estilo = Exibição
   3. 1-Exibição = ; -webkit-appearance: none; margin: 0
   4. 2-Opacidade = 0

8. Clique em Salvar

9. Clique no botão + Estilo

10. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Exibição = ;-moz-appearance: textfield

11. Clique em Salvar

Opção 2: aplicar o tema personalizado a um controle específico

Siga estes passos se desejar aplicar esta personalização em um nível granular, por exemplo, a um controle específico.

1. Navegue até IDE > Aparência
2. Selecione a Coleção do Cliente
3. Clique no botão + Tema
4. Atribua um Nome de Tema. Por exemplo: Ocultar Controle Cima-Baixo
5. Defina o Tipo como Campo
6. Clique em Salvar
7. Selecione Controles em Componentes
8. Selecione Campos em Subcomponentes
9. Clique no botão + Estilo

10. Forneça as seguintes informações:

    1. Área = Controle Cima-Baixo
    2. Tipo de Estilo = Exibição
    3. 1-Exibição = ; -webkit-appearance: none; margin: 0
    4. 2-Opacidade = 0

11. Clique em Salvar

12. Clique no botão + Estilo

13. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Exibição = ;-moz-appearance: textfield

14. Clique em Salvar

Aplicar tema a um controle

1. Navegue até a página com o controle a ser modificado
2. Acesse Gaveta de Ações > Live Designer
3. Selecione o controle na visualização de design da página
4. Acesse Mais > Estilos
5. Clique em + Formatação Condicional
6. Selecione Incondicional
7. Clique no botão Escolher Estilo
8. Localize o tema personalizado. Por exemplo: Ocultar Controle Cima-Baixo
9. Clique no botão + Escolher
10. Navegue de volta para a visualização do aplicativo, atualize o navegador e teste a atualização