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>

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");
        }
```
And then create an event for when the Cancel button is 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>

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

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