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

Instead of creating forms with uiform files that you build in Studio, you can create custom forms, using HTML files that you upload inside your project. This tutorial demonstrates how to create and display a simple form using an HTML file. This form displays a short message, two buttons, and the live date and time when the user interacts with the form.

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.