Entwerfen Sie Formulare mit benutzerdefiniertem HTML

Anstatt Formulare mit uiform -Dateien zu erstellen, die Sie in Studio erstellen, können Sie benutzerdefinierte Formulare mithilfe von HTML-Dateien erstellen, die Sie in Ihrem Projekt hochladen. Dieses Tutorial zeigt, wie ein einfaches Formular mithilfe einer HTML-Datei erstellt und angezeigt wird. Dieses Formular zeigt eine kurze Nachricht, zwei Schaltflächen sowie das Live-Datum und die Uhrzeit an, wenn der Benutzer mit dem Formular interagiert.

Tipp:

Sie können diese Schritte auch anwenden, um benutzerdefinierte HTML-Callout-Dateien zu erstellen.

Um benutzerdefinierte HTML-Formulare zu erstellen, mit denen Sie Formularwerte abrufen und festlegen sowie Formularereignisse auslösen können, müssen Sie bestimmte UiPath-APIs verwenden. Das folgende Beispiel enthält drei UiPath-spezifische APIs, die Sie in Ihre benutzerdefinierten HTML-Formulare integrieren sollten:

• getValue: function (elementId) – Ermöglicht Ihnen das Abrufen von Formularwerten.
• setValue: function (elementId, value) – Ermöglicht das Festlegen von Formularwerten.
• sendMessage: function (id, value) – Ermöglicht es Ihnen, ein Formularereignis wie Geschlossen auszulösen. Innerhalb der Aktivität Form Trigger kann auf jedes Formularereignis, das Sie mit dieser API erstellen, nur als Formularnachrichtenereignis zugegriffen werden.

Fügen Sie die folgenden Beispiel-APIs in Ihren benutzerdefinierten HTML-Formulardateien hinzu:

<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>

Sehen Sie sich das Ergebnis dieses Tutorials im folgenden Video an:

Workflow-Beispiel

Um die Schritte auszuführen und das Tutorial selbst auszuprobieren, sehen Sie sich das Beispielprojekt hier an .