Building the project in Studio

This part of the tutorial shows how to create the Studio project to display the HTML form file that you previously created.

1. Add the HTML file you created inside the project.
   For this example, the form.html file is inside the welcome folder of the project.
2. In the Main file add the following activities:
   1. Show Form - select the uploaded HTML form file from the dropdown list.
   2. Run Local Triggers - to start the triggers you'll create for the button events.
3. Create a trigger workflow that displays the live date and time inside the form (tick.xaml).
   1. Add a Repeat trigger activity, to make sure that the date and time updates every other second. For this, set the Interval as 00h 00m 01.000s.
   2. Add a Set Form Values activity to bind the data to the form. When you created the HTML form file, at step 8, you configured to display the date and time using an argument named time. Add this argument in the Arguments collection, using the same name:

      Key	Type	Value
      time	String	DateTime.Now.ToString()

4. Create a trigger workflow for the event when the OK button is clicked (on ok clicked.xaml).
   1. Add a Form trigger activity. Select the HTML file you uploaded from the Select Form dropdown. Choose Form messageas the event, because any event configured inside an HTML form, is represented in Studio as a Form message event. In the Message ID type the message you created for the okClicked() function to send.
      
      

      

      
      
   2. Add a Disable Local Trigger activity to stop sending data about the live date and time to the form. Choose the tick.xaml file as the TriggerId.
   3. Add a Close Form activity, and select the HTML file, so you can close the form after the OK button was clicked.
5. Create a trigger workflow for the event when the Cancel button is clicked (on cancel clicked.xaml).
   1. Add a Form trigger activity. Select the HTML file you uploaded from the Select Form dropdown. Choose Form messageas the event, because any event configured inside an HTML form, is represented in Studio as a Form message event. In the Message ID type the message you created for the cancelClicked() function to send.
      
      

      

      
      
   2. Add a Disable Local Trigger activity to stop sending data about the live date and time to the form. Choose the tick.xaml file as the TriggerId.
   3. Add a Close Form activity, and select the HTML file, so you can close the form after the Cancel button was clicked.
   4. Aditionally, you can add a Stop Local Triggers activity, so you can stop the entire automation.