Configurer un curseur décoratif

Créez une option de curseur colorée pour une entrée numérique sur l’écran de votre formulaire d’entrée. Les curseurs décoratifs contiennent des sections qui peuvent être associées à une couleur et une étiquette spécifiques pour faciliter la représentation visuelle. Ces étiquettes sont traduisibles.

Avant de commencer

Rôle requis : admin

Cette tâche suppose que vous avez déjà configuré la base d’un écran de formulaire d’entrée avant d’ajouter l’option de curseur pour une entrée numérique. Pour plus d'informations, consultez Configurer un écran de formulaire d'entrée.

Pourquoi et quand exécuter cette tâche

La création d’un type de rendu de curseur est plus compliquée que pour les autres types de rendu : entier, ligne, pourcentage. La configuration implique la création de plusieurs attributs d’entrée. Les attributs requis sont Min. Max et StepSize. Pour obtenir la liste complète des attributs d’entrée que vous pouvez utiliser avec un curseur numérique, reportez-vous à la section Numéroter les types de rendu et les attributs d’entrée compatibles.

Vous devez ajouter un attribut d’entrée supplémentaire appelé Décoration, qui donne au curseur un aspect coloré et segmenté. Un curseur décoratif comporte entre deux et huit sections, dans lesquelles vous définissez une valeur de début et une valeur de fin. La valeur de début doit correspondre à la valeur de fin de l’entrée précédente. De plus, vous devez sélectionner une couleur pour chaque section. Un exemple de script JSON est fourni, qui contient quatre sections définies. Ce script est modifiable.

Lors de la configuration d’un type de curseur décoratif, il existe une option permettant d’ajouter des valeurs traduites, afin que les utilisateurs puissent afficher le curseur dans la langue sélectionnée. Pour plus d'informations, consultez Configurer les valeurs traduites pour le curseur décoratif.

Procédure

1. Accédez à la Tous > Mobile système > Mobile App Builder.
   Générateur d'apps mobiles s'ouvre dans un onglet de navigateur séparé et affiche l'écran de sélection du périmètre de l'application.
2. Recherchez le périmètre de l’application dans lequel vous travaillez, puis sélectionnez le nom du périmètre de l’application.
   L'écran d'accueil des catégories Générateur d'apps mobiles s'affiche.
3. Sélectionnez la catégorie Écrans, puis sélectionnez l’écran du formulaire d’entrée pour lequel vous souhaitez configurer les entrées.
4. Faites défiler la page vers le bas jusqu’à la section Entrées du formulaire, puis sélectionnez une entrée à modifier ou sélectionnez Nouveau pour créer une entrée.
   Le formulaire « Entrée » s'affiche. Pour plus d’informations sur la configuration des entrées, reportez-vous à la section Configurer les entrées de l'écran de formulaire d'entrée.
5. Dans le champ Type d’entrée de la zone Paramètres, sélectionnez Numéro.
6. Sélectionnez Nouveau dans la zone Attributs d’entrées.
7. Sélectionnez RenderType dans le champ Nom , sélectionnez Curseur dans le champ Valeur , puis sélectionnez Enregistrer.
8. Créez et enregistrez les attributs d’entrée pour Min, Max et StepSize, et définissez leurs valeurs.
   Pour plus de détails sur la configuration, reportez-vous à la section Configurer une option de curseur pour une entrée numérique.

   Remarque :

   RenderType, Min, Max et StepSize sont des attributs d’entrée requis pour les curseurs. D’autres attributs d’entrée sont facultatifs. Pour obtenir la liste complète des attributs d’entrée, reportez-vous à la section Entrées de numéro dans la rubrique Attributs d'écran du formulaire d'entrée pour les entrées.
9. Sélectionnez Nouveau dans la zone Attributs d’entrées.
10. Sélectionnez Décoration dans le champ Nom .
    Un script JSON s’affiche avec un script par défaut, que vous pouvez modifier si nécessaire.

      "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" 
        } 
      ] 
    } 

    Cet exemple de script répertorie quatre sections contenues dans un curseur. Un curseur décoratif peut contenir entre deux et huit sections. Chaque segment a les valeurs suivantes :

    • Étiquette : Nom attribué à chaque section. Dans l’exemple, ils sont : Critique faible, Faible, Moyen et Haut. Les noms sont modifiables.
      Remarque :

      Les noms contenus dans la valeur de l’étiquette peuvent être traduits. Pour ce faire, des accolades doubles doivent être ajoutées à la valeur Étiquette . Par exemple, Medium devient {{Medium}}. Pour plus d'informations, consultez Configurer les valeurs traduites pour le curseur décoratif.
    • StartValue et EndValue : il peut s’agir de n’importe quelle valeur. Habituellement, ces valeurs sont divisibles par le nombre de sections. La StartValue d’une section doit correspondre à la EndValue de la section précédente.
    • Couleur : la valeur de couleur peut être un code HEX ou l’étiquette d’une variable de votre thème mobile actuel. Le script JSON fournit les couleurs par défaut suivantes :
      • #000000 correspond au vert.
      • Le curseur-1 correspond au jaune.
      • Le curseur-2 correspond à l’orange.
      • Le curseur-3 correspond au rouge.
      Pour obtenir la liste complète des variables, accédez à Tous > sys_ux_style.liste et recherchez Mobile Colors Default.
11. Sélectionnez Enregistrer.

Que faire ensuite

Vous pouvez ajouter du texte traduit à chacune des valeurs de texte affichées sur votre curseur. Pour plus d'informations, consultez Configurer les valeurs traduites pour le curseur décoratif.