Concevoir des formulaires à l’aide de code HTML personnalisé

Au lieu de créer des formulaires avec des fichiers uiform que vous créez dans Studio, vous pouvez créer des formulaires personnalisés à l'aide de fichiers HTML que vous téléchargez dans votre projet. Ce tutoriel montre comment créer et afficher un formulaire simple en utilisant un fichier HTML. Ce formulaire affiche un court message, deux boutons, ainsi que la date et l'heure en direct lorsque l'utilisateur interagit avec le formulaire.

Astuce :

Vous pouvez également appliquer ces étapes pour créer des fichiers de légende HTML personnalisés.

Pour créer des formulaires HTML personnalisés qui vous permettent d'obtenir et de définir des valeurs de formulaire, ainsi que de déclencher des événements de formulaire, vous devez utiliser des API UiPath spécifiques. L'exemple ci-dessous contient trois API spécifiques à UiPath que vous devez intégrer dans vos formulaires HTML personnalisés :

• getValue: function (elementId) - vous permet de récupérer les valeurs du formulaire.
• setValue: function (elementId, value) : vous permet de définir des valeurs de formulaire.
• sendMessage: function (id, value) : vous permet de déclencher un événement de formulaire, tel que Clôturé. Dans l’ activité Déclencheur de formulaire, tout événement de formulaire que vous créez à l’aide de cette API, n’est accessible qu’en tant qu’événement de message de formulaire .

Ajoutez les exemples d'API ci-dessous dans vos fichiers de formulaire HTML personnalisés :

<script type="text/javascript">
    var uiPathApi = {
        getValue: function (elementId) {
            // this is a callback, being called from the workflow
            // enter your own code to get element values
            var el = document.getElementById(elementId);
            if (el.value == undefined) {
                return el.innerHTML;
            } else {
                if (el.checked == undefined) {
                    return el.value;
                } else {
                    return el.checked;
                }
            }
        },

        setValue: function (elementId, value) {
            // this is a callback, being called from the workflow
            // enter your own code to set element values
            var el = document.getElementById(elementId);
            if (el.value == undefined) {
                el.innerHTML = value;
            } else {
                if (el.checked == undefined) {
                    el.value = value;
                } else {
                    el.checked = value;
                }
            }
        },

        // Call this to trigger a "Form Message" event
        // This function is set by the forms engine after the page loads,
        // but declaring it here as empty helps with code autocompletion
        sendMessage: function (id, value) { },
    };
</script>

Découvrez le résultat de ce tutoriel dans la vidéo ci-dessous :

Exemple de workflow

Pour suivre les étapes et essayer vous-même le tutoriel, consultez l'exemple de projet ici.