Erstellen der HTML-Formulardatei

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

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, wenn auf die Schaltfläche Abbrechen geklickt wird:

   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ächenkomponenten hinzu und definieren Sie die Ereignisse, die sie auslösen, ähnlich wie Sie eine Schaltflächenkomponente im Formulargenerator konfigurieren würden .

   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.