Creating the HTML form file

This part of the tutorial shows how to design a custom HTML form file, using the UiPath APIs.

Create an HTML file, and give the form a title, using the <title> tag.
For example, <title>My HTML Form</title>
Apply some styling to the form, based on your use case.
For this example, CSS styling is applied, using the <style type="text/css"> tag.

After you apply styling, add the UiPath APIs as JavaScript inside your HTML file, as follows:

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

Create a form event for each button, using uipathAPI.sendMessage, inside a <script> tag.
For this example, create an event for when the OK button is clicked:
```
function okClicked() {
			uiPathApi.sendMessage("ok clicked");
		}function okClicked() {
			uiPathApi.sendMessage("ok clicked");
		}
```
And then create an event for when the Cancel button is clicked:
```
function cancelClicked() {
			uiPathApi.sendMessage("cancel clicked");
		}function cancelClicked() {
			uiPathApi.sendMessage("cancel clicked");
		}
```
Start building the form by adding components.

Add the title of the form inside a <div> tag.

For this example, use the following title:

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

Add the Button components and define the events that they trigger, similarly to how you would configure a Button component inside the Form Builder.
For this example, add the following buttons and the corresponding events:
```
<div class="actions">
		<button class="confirm" onclick="okClicked()">OK</button>
		<button class="cancel" onclick="cancelClicked()">Cancel</button>
	</div><div class="actions">
		<button class="confirm" onclick="okClicked()">OK</button>
		<button class="cancel" onclick="cancelClicked()">Cancel</button>
	</div>
```

Add the live date and time at the bottom of the form, using an argument named as time.

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

After you finish designing your HTML file, start building your project in Studio using this file.

Was this page helpful?

PREVIOUSAPIs for HTML forms and callouts

NEXTBuilding the project in Studio

Support and Services

Get The Help You Need

UiPath Academy

Learning RPA - Automation Courses

UiPath Forum

UiPath Community Forum

Trust and Security

Cookies Policy