Creating the HTML form file

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

1. Create an HTML file, and give the form a title, using the <title> tag.
   For example, <title>My HTML Form</title>
2. 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.
3. 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>

4. 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");
   		}

5. Start building the form by adding components.
6. 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>

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

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