Design forms using custom HTML

Instead of creating forms with uiform files that you build in Studio, you can create custom forms, using HTML files that you upload inside your project. This tutorial demonstartes how to create and display a simple form using an HTML file. This form displays a short message, two buttons, and the live date and time when the user interacts with the form.

Tip: You can apply these steps to create custom HTML callout files, too.

To build custom HTML forms that allow you to get and set form values, as well as trigger form events, you need to use specific UiPath APIs. The sample below contains three UiPath-specific APIs that you should integrate in your custom HTML forms:

• getValue: function (elementId) - allows you to retrieve form values.
• setValue: function (elementId, value) - allows you to set form values.
• sendMessage: function (id, value) - allows you to trigger a form event, such as Closed. Inside the Form trigger activity, whatever form event that you create using this API, can be accessed only as a Form message event.

Add the sample APIs below in your custom HTML form files:

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

Check out the result of this tutorial in the video below:

Workflow example

To follow the steps and try out the tutorial yourself, check out the sample project here.