Erstellen der HTML-Formulardatei

Dieser Teil des Tutorials zeigt, wie eine benutzerdefinierte HTML-Formulardatei mithilfe der UiPath-APIs entworfen wird.

1. Erstellen Sie eine HTML-Datei und geben Sie dem Formular mit dem Tag <title> einen Titel.
   Beispiel: <title>My HTML Form</title>.
2. Wenden Sie ein Design basierend auf Ihrem Anwendungsfall auf das Formular an.
   In diesem Beispiel wird das CSS-Design mit dem <style type="text/css"> -Tag angewendet.
3. Nachdem Sie das Styling angewendet haben, fügen Sie die UiPath-APIs wie folgt als JavaScript in Ihre HTML-Datei ein:

   <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. Erstellen Sie ein Formularereignis für jede Schaltfläche, indem Sie uipathAPI.sendMessageinnerhalb eines <script> -Tags verwenden.
   Erstellen Sie in diesem Beispiel ein Ereignis für das Klicken auf die Schaltfläche „ OK “:

   function okClicked() {
   			uiPathApi.sendMessage("ok clicked");
   		}

   Und erstellen Sie dann ein Ereignis für das Klicken auf die Schaltfläche Abbrechen :

   function cancelClicked() {
   			uiPathApi.sendMessage("cancel clicked");
   		}

5. Beginnen Sie mit dem Erstellen des Formulars, indem Sie Komponenten hinzufügen.
6. Fügen Sie den Titel des Formulars in einem <div> -Tag hinzu.
   Verwenden Sie in diesem Beispiel den folgenden Titel:

   <div>Welcome to UiPath! Click OK to continue or Cancel to close this automation.</div>

7. Fügen Sie die Schaltflächen- Komponenten hinzu und definieren Sie die Ereignisse, die sie auslösen, ähnlich wie beim Konfigurieren einer Schaltflächen- Komponente im Form Builder.
   Fügen Sie in diesem Beispiel die folgenden Schaltflächen und die entsprechenden Ereignisse hinzu:

   <div class="actions">
   		<button class="confirm" onclick="okClicked()">OK</button>
   		<button class="cancel" onclick="cancelClicked()">Cancel</button>
   	</div>

8. Fügen Sie das Live-Datum und die Uhrzeit am unteren Rand des Formulars mit einem Argument namens time.

   <div class="bottom">Current date/time is <span id="time">N/A</span></div>

Nachdem Sie mit dem Entwerfen Ihrer HTML-Datei fertig sind, erstellen Sie Ihr Projekt in Studio mithilfe dieser Datei.