Base de connaissances

Retour à la vue d’ensemble de l’assistance

Champ de texte

  • « inputType » : « textinput »
    • Description : un champ de texte libre simple
    • Exemple:
« text_input » : {
    "title » : « Saisie de texte »,"inputType » :
    « textinput »,
    "value » : « Valeur de texte libre »,
    "info » : « Un champ de texte libre"
}

Zone de texte

  • « inputType » : « zone de texte »
    • Description : zone de texte permettant une saisie de texte plus longue.
    • Exemple:
« textarea_input » : {
    "title » : « Zone de texte »,
    "inputType » : « textarea »,
    "value » : « Vérifiez ceci »,
    "info » : « Maintenant avec 20 % d’espace en plus pour votre dissertation."
}

Champs de texte multiples

  • « inputType » : « saisie de texte multiple »
    • Description : l’utilisateur peut ajouter plusieurs champs de texte de saisie avec des valeurs distinctes. Permet maxValue de définir le nombre maximal de valeurs pouvant être saisies.
    • Exemple:
« multiple_text_input » : {
    "title » : « Saisie de texte multiple »,
    "inputType » : « entrée-de-texte multiple »,
    "value » : [
        {
            "element » : « Bonjour"
        },
        {
            "element » : « World"
        }
    ],
    "maxValue » : 4,
    "info » : « Un maximum de 4 valeurs est autorisé"
}

Champ déroulant

  • « inputType » : « entrée-déroulante »
    • Description : champ déroulant avec des options sélectionnables. Utilisez-le elements comme attribut spécifique pour ajouter les valeurs souhaitées en tant qu’éléments JSO anonymes représentant les options de liste déroulante. Chaque élément doit contenir un nom et une valeur.
    • Exemple:
« bluetooth_connect_mode » : {
    "title » : « Mode de connexion »,
    "inputType » : « dropdown-input »,
    "value » : « search »,
    "elements » : [
        {
            "name » : « Rechercher et trouver »,
            "value » : « search"
        },
        {
            "name » : « Code de numérisation »,
            "value » : « scan"
        }
    ],
    "showIfComputed« : true,
    "info » : « 'Rechercher et trouver' découvrira tous les appareils disponibles et les filtrera en fonction du type. 'Code Scan' vous permet de scanner l’adresse MAC ou le nom de l’appareil."
}

Plusieurs champs déroulants

  • « inputType » : « entrée-déroulante multiple »
    • Description : à l’aide du champ de saisie déroulant à plusieurs niveaux, l’utilisateur peut ajouter plusieurs instances du même champ déroulant et ainsi sélectionner plusieurs valeurs pour sa commande. Les attributs spécifiques sont les suivants :
      • maxValue pour définir le nombre maximal de valeurs pouvant être sélectionnées
      • elements: pour ajouter des éléments JSON anonymes représentant les options déroulantes (chaque élément doit contenir un nom et une valeur)
    • Exemple:
« multiple_dropdown_input » : {
            "title » : « Entrée déroulante multiple »,
            "inputType » : « entrée-déroulante multiple »,
            "value » : [
                {
                    "name » : « Valeur affichée"
                },
                {
                     "name » : « Valeur affichée 2"
                },
            ],
            "elements » : [
                {
                    "name » : « Valeur affichée"
                },
                {
                    "name » : « Valeur affichée 2« 
                },
                {
                    "name » : « Valeur affichée 3"
                }
            ],
            "maxValue » : 2
        }

Case à cocher

  • « inputType » : « checkbox-input »
    • Description : une entrée à bascule booléenne
    • Exemple:
« checkbox_input » : {
    "title » : « Entrée de case à cocher »,
    "inputType » : « checkbox-input »,
    "value » : « true"
}

Plage de numéros

  • « inputType » : « plage »
    • Description : entrée d’une plage de nombres
    • Exemple:
« range » : {
    "title » : « Plage de lecture »,
    "inputType » : « range »,
    "rangeMin » : « 1 »,
    "rangeMax » : « 20 »,
    "value » : 15
}

Téléchargement de fichiers

  • « inputType » : « téléchargement de fichiers »
    • Description : permet à l’utilisateur de télécharger un fichier image.
    • Exemple:
« sensor_type » : {
    "inputType » : « file-upload »,
    "title » : « Icône »,
    "accept » : « image/png »,
    "multiple » : false,
    "showIf » : « root. Value_1.sensor_shown.value »,
    "value » : « xai :/wf-editor/2c639f9c-a3d5-4830-9e55-092fe98d92a4/component_sensor_1563203048508_image001.png ?version=1 »,"showIfComputed » :
    true
}

Sélecteur de couleurs

  • « inputType » : « entrée-couleur »
    • Description : Entrée permettant de sélectionner une couleur. Les utilisateurs peuvent définir une liste de valeurs hexadécimales à sélectionner ou utiliser le sélecteur de couleurs complet.
    • Exemple:
« color » : {
    "inputType » : « color-input »,
    "title » : « Sélecteur de couleurs »,
    "list » : [
        "#fcba03 »,
        "#1d6280"
    ],
    "showIfComputed » : true,
    "value » : « #fcba03"
}

Entrée de carte

  • « inputType » : « entrée-carte »
    • Description : Champ de saisie de texte qui associe une clé et une valeur comme dans une carte. Par défaut, les espaces réservés dans les champs de texte seront « Clé » et « Valeur ». Ils peuvent être modifiés comme indiqué dans l’exemple ci-dessous.
    • Exemple:
« headers » : {
    "title » : « En-têtes Http »,
    "inputType » : « map-input »,
    "placeholder » : {
        "key » : « Nom de l’en-tête »,
        "value » : « Valeur de l’en-tête"
    },
    "value » : [
        {
            "key » : « Content-Type »,
            "value » : « application/json"
        },
        {
            "key » : « Accepter »,
            "valeur« : « application/json"
        }
    ]
}

Pour enregistrer les données d’entrée de carte dans une carte Javascript réelle, suivez cette approche :

<setvar id="save_headers">
    <context_of>workflow</context_of>
    <context_update>
        <param name="headers » type="object">< ![ CDATA[ ?{ var headers = { §{#each configuration.headers.value}§'§{key}§' : '§{value}§',§{/each}§ } ; headers } ?]] ></param>      
    </context_update>
</setvar>

Entrée de la source de données

  • « inputType » : « sélection de la source-de-données »
    • Description : champ déroulant qui vous permet de sélectionner parmi toutes les sources de données téléchargées dans le centre de commandement de première ligne. Cela vous permet d’associer dynamiquement votre composant à différentes sources de données.
    • Exemple:
« datasource » : {
            "noOptionsInfo » : « Aucune source de données trouvée ! »,
            "title » : « Datasource »,
            "inputType » : « datasource-selection »,
            "revisionSelection » : true,
            "required » : true,
            "info » : « Sélectionnez la source de données que vous souhaitez utiliser. »,
            "value » : null
        }

Cette configuration est généralement utilisée en conjonction avec les actions de source de données. Par exemple, vous pouvez enregistrer la première ligne de la tâche de source de données actuelle dans le contexte, manipuler la ligne selon vos besoins (extraire ou modifier des données), puis enregistrer la ligne modifiée dans la tâche de source de données.

Enregistrement de la première ligne ([0] peut être remplacée par une variable d’index) dans votre contexte. La variable supplémentaire contenant la version chaîne de la ligne est pratique pour le débogage, mais peut être laissée de côté.

<setvar id="row_to_context">
  <context_of>root</context_of>
  <context_update>
    <param name="current_row » type="objet"> ?{ context.ds_§{ remplacer validation.datasource.value.id '-' ''  }§[0] } ?</param>
    <param name="current_row_to_string » type="chaîne">< ![ CDATA[ ?{ JSON.stringify(context.current_row)} ?]] ></param>
  </context_update>
</setvar>

Extraction de données (par exemple, pour les afficher dans l’interface utilisateur) :

<setvar id="get_row_data">
    <context_of>workflow</context_of>
    <context_update>
       <param name="material » type="string">< ![ CDATA[ ?{ context.current_row.payload["Nom de l’article"].value } ? ]] ></param>
    </context_update>
</setvar>

Modification des colonnes de données présentes dans votre source de données :

<setvar id="set_counts">
    <context_of>root</context_of>
    <context_update>
        <param name="current_row » type="objet">< ![ CDATA[ ?{
            context.current_row.payload["Résultat"].value = contexte.résultat ;
            context.current_row.payload["Attribué à l’utilisateur"].value = appcontext.client.user.id ;
            context.current_row.payload["Nom de l’affectation"].value = appcontext.task.name ;
            context.current_row.payload["Date de réalisation"].value = new Date(Date.now()).toUTCString() ;
            context.current_row.status = 'FAIT' ;
            context.current_row ;
        } ? ]]></param>
        <param name="current_row_to_string » type="string">< ![ CDATA[ ?{ JSON.stringify(context.current_row)} ?]] ></param>
    </context_update>
</setvar>

Propagation de la ligne modifiée à la tâche de source de données :

<update_datasource_task id="update_ds_with_row">
    <param name="datasource_task_id » type="string"> ?{ context.ds_§{ remplacer validation.datasource.value.id '-' '' }§_task.id} ?</param>
    <param name="rows">#{current_row}</param>
    <param name="payload_variable_name">ds_§{ remplacer validation.datasource.value.id '-' ''  }§</param>
</update_datasource_task>