activities
latest
false
Important :
Veuillez noter que ce contenu a été localisé en partie à l’aide de la traduction automatique.
Activités de workflow
Last updated 4 oct. 2024

Création du fichier de formulaire HTML

Cette partie du tutoriel montre comment concevoir un fichier de formulaire HTML personnalisé à l’aide des API UiPath.
  1. Créez un fichier HTML et donnez un titre au formulaire, en utilisant la balise <title> .
    Par exemple : <title>My HTML Form</title>.
  2. Appliquez un style au formulaire, en fonction de votre cas d'utilisation.
    Pour cet exemple, le style CSS est appliqué, en utilisant la balise <style type="text/css"> .
  3. Après avoir appliqué le style, ajoutez les API UiPath en tant que JavaScript dans votre fichier HTML, comme suit :
    <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><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>
  4. Créez un événement de formulaire pour chaque bouton, en utilisant uipathAPI.sendMessage, à l'intérieur d'une balise <script> .
    Pour cet exemple, créez un événement lorsque le bouton OK est cliqué :
    function okClicked() {
    			uiPathApi.sendMessage("ok clicked");
    		}function okClicked() {
    			uiPathApi.sendMessage("ok clicked");
    		}
    Ensuite, créez un événement à utiliser en cas de clic sur le bouton Annuler (Cancel) :
    function cancelClicked() {
    			uiPathApi.sendMessage("cancel clicked");
    		}function cancelClicked() {
    			uiPathApi.sendMessage("cancel clicked");
    		}
  5. Commencez à créer le formulaire en ajoutant des composants.
  6. Ajoutez le titre du formulaire à l'intérieur d'une balise <div> .
    Pour cet exemple, utilisez le titre suivant :
    <div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div><div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>
  7. Ajoutez les composants Bouton (Button) et définissez les événements qu'ils déclenchent, de la même manière que vous configureriez un composant Bouton (Button) dans le générateur de formulaires.
    Pour cet exemple, ajoutez les boutons suivants et les événements correspondants :
    <div class="actions">
    		<button class="confirm" onclick="okClicked()">OK</button>
    		<button class="cancel" onclick="cancelClicked()">Cancel</button>
    	</div><div class="actions">
    		<button class="confirm" onclick="okClicked()">OK</button>
    		<button class="cancel" onclick="cancelClicked()">Cancel</button>
    	</div>
  8. Ajoutez la date et l'heure de mise en production au bas du formulaire, à l'aide d'un argument nommé time.
    <div class="bottom">Current date/time is <span id="time">N/A</span></div><div class="bottom">Current date/time is <span id="time">N/A</span></div>
Une fois que vous avez terminé de concevoir votre fichier HTML, commencez à créer votre projet dans Studio à l'aide de ce fichier.

Cette page vous a-t-elle été utile ?

Obtenez l'aide dont vous avez besoin
Formation RPA - Cours d'automatisation
Forum de la communauté UiPath
Uipath Logo White
Confiance et sécurité
© 2005-2024 UiPath Tous droits réservés.