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>

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");
   		}

   Ensuite, créez un événement à utiliser en cas de clic sur le bouton Annuler (Cancel) :

   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>

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>

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>

Une fois que vous avez terminé de concevoir votre fichier HTML, commencez à créer votre projet dans Studio à l'aide de ce fichier.