Configure um controle deslizante decorativo

Crie uma opção de controle deslizante colorida para uma entrada numérica na tela do formulário de entrada. Os controles deslizantes decorativos contêm seções que podem ser associadas a uma cor e rótulo específicos para auxiliar na representação visual. Esses rótulos são traduzíveis.

Antes de Iniciar

Função necessária: administrador

Esta tarefa pressupõe que você já tenha a base de uma tela de formulário de entrada configurada antes de adicionar a opção de controle deslizante para uma entrada numérica. Para obter mais informações, consulte Configurar uma tela de formulário de entrada.

Por Que e Quando Desempenhar Esta Tarefa

Criar um tipo de renderização deslizante é mais envolvido do que para os outros tipos de renderização: Inteiro, linha, porcentagem. A configuração envolve a criação de vários atributos de entrada. Os atributos obrigatórios são Mínimo. E Tamanho em etapa. Para obter uma lista completa de atributos de entrada que você pode usar com um controle deslizante numérico, consulte Tipos de renderização de números e atributos de entrada compatíveis.

Você deve adicionar um atributo de entrada adicional chamado Decoração, que dá ao controle deslizante uma aparência colorida e segmentada. Um controle deslizante decorativo tem entre duas a oito seções, em que você define um valor inicial e um valor final. O valor inicial deve corresponder ao valor final da entrada anterior. Além disso, você deve selecionar uma cor para cada seção. Um script de exemplo JSON é fornecido, que contém quatro seções definidas. Este script é editável.

Ao configurar um tipo de controle deslizante decorativo, há uma opção para adicionar valores traduzidos, para que os usuários possam exibir o controle deslizante no idioma selecionado. Para obter mais informações, consulte Configure valores traduzidos para o controle deslizante decorativo.

Procedimento

1. Navegar até Tudo > Sistema Móvel > Construtor de apps para celular.
   . Construtor de apps para celular abre em uma nova guia do navegador e exibe a tela de seleção de escopo da aplicação.
2. PESQUISE o escopo da aplicação em que você está trabalhando e selecione o nome do escopo da aplicação.
   . Construtor de apps para celular a tela inicial de categorias é exibida.
3. Selecione  Telas  e selecione a tela do formulário de entrada para a qual você deseja configurar as entradas.
4. Role para baixo até a seção Entradas do formulário e selecione uma entrada para modificar ou selecionar  Novo  para criar uma entrada.
   O formulário de entrada é exibido. Para obter mais informações sobre como configurar entradas, consulte Configurar entradas da tela do formulário de entrada.
5. Em Tipo de entrada Na área Configurações, selecione Número .
6. Selecione Novo Na área Atributos de entradas.
7. Selecione RenderType em Nome campo, selecione Controle deslizante em Valor e selecione Salvar .
8. Crie e salve os atributos de entrada para Mínimo, Máximo e Tamanho em etapa e defina seus valores.
   Para obter detalhes da configuração, consulte Configure uma opção de controle deslizante para uma entrada numérica.

   Nota:

   RenderType, Min, Max e Step Size são atributos de entrada obrigatórios para os controles deslizantes. Outros atributos de entrada são opcionais. Para obter uma lista completa de atributos de entrada, consulte a seção Número de entradas no tópico Atributos da tela do formulário de entrada para entradas.
9. Selecione Novo Na área Atributos de entradas.
10. Selecione Decoração em Nome campo.
    Um script JSON é exibido com um script padrão, que você pode editar conforme necessário.

      "Range": [ 
    
        { 
          "Label": "Critically Low", 
          "StartValue": 0, 
          "EndValue": 10, 
          "Color": "#000000" 
        }, 
        { 
          "Label": "Low", 
          "StartValue": 10, 
          "EndValue": 50, 
          "Color": "Slider-2" 
        }, 
        { 
          "Label": "Medium", 
          "StartValue": 50, 
          "EndValue": 75, 
          "Color": "Slider-1" 
        }, 
        { 
          "Label": "High", 
          "StartValue": 75, 
          "EndValue": 100, 
          "Color": "Slider-0" 
        } 
      ] 
    } 

    Este script de exemplo lista quatro seções contidas em um controle deslizante. Um controle deslizante decorativo pode conter entre duas e oito seções. Cada segmento tem os seguintes valores:

    • Rótulo: Um nome atribuído a cada seção. No exemplo, eles são: Criticamente baixo, Baixo, Médio e Alto. Os nomes são editáveis.
      Nota:

      Os nomes contidos no valor do rótulo podem ser traduzidos. Para fazer isso, chaves duplas devem ser adicionadas ao Rótulo valor. Por exemplo, Médio se torna (Médio) . Para obter mais informações, consulte Configure valores traduzidos para o controle deslizante decorativo.
    • StartValue e EndValue: Podem ser qualquer valor. Normalmente, esses valores são divisíveis pelo número de seções. O StartValue de uma seção deve corresponder ao EndValue da seção anterior.
    • Cor: O valor da cor pode ser um código HEXADECIMAL ou o rótulo de uma variável do seu tema para celular atual. O script JSON fornece as seguintes cores padrão:
      • 000000 corresponde a verde.
      • Controle deslizante-1 corresponde a amarelo.
      • Controle deslizante-2 corresponde a laranja.
      • Controle deslizante-3 corresponde a vermelho.
      Para obter uma lista completa de variáveis, navegue até Tudo > sys_ux_style.list E pesquise por Cores para celular padrão.
11. Selecione Save (Salvar).

O que Fazer Depois

Você pode adicionar texto traduzido a cada um dos valores de texto exibidos no controle deslizante. Para obter mais informações, consulte Configure valores traduzidos para o controle deslizante decorativo.