Advanced tutorial
A simple guide on how to install the package and a simple sample explained can be found in the Basic Tutorial page.
1. Interactive Form Launcher Description First, Display: Secondly, Input: Thirdly, Options: 2. Complex sample Description Overview - UiPath Studio Overview - JavaScript
1. Interactive Form Launcher Description
This is the default layout of the Interactive Form launcher. The activity is composed first of o textbox where you can add the path to the HTML file that contains your form, a second textbox where you can define the Properties dictionary that is used to store all the parameters sent to and from the form and a ‘Do’ container where you can add your logic to process the information retrieved from the activity.
As you can see from the warning signal from the top right corner of the activity, there are a few mandatory properties. The following properties are mandatory:
Communication Channel Name HTML Form Path Input Variable Name
These properties will be discussed later in the documentation. These are the properties available to the Interactive Form Launcher activity.
There are the categories that the properties can be found in (marked in red), namely Common, Display, input, Misc, Options. In this document, we will describe 3 of these categories.
First, Display:
Fixed-size
Checkbox By checking this property you can restrict the option for the end-user to resize the window that contains the form, thus the window having the given dimensions or the default ones. Disclaimer: Incompatible with fullscreen option.
Fixed-size not checked
Fixed-size option checked
Form Height
Textbox – Int32 This textbox only accepts int type values and it sets the form Height to the desired height set in the textbox. If no value is passed to this property the default value is used. The default value is 600.
Form Width
Textbox – Int32 This textbox only accepts int type values and it sets the form Width to the desired width set in the textbox. If no value is passed to this property the default value is used. The default value is 800.
Fullscreen
Checkbox By checking this property you specify that on start-up the form is maximized. This only affects the form when starting it leaving the option for the end-user to resize the windows. Disclaimer: Incompatible with fixed-size option.
Fullscreen option not checked
Fullscreen option checked
Hide Title bar
By checking this property you specify that the form should have no title bar and it will be replaced with a white strip to make it easier for the end-user to move the window around.
The title bar is visible
The title bar is hidden
Observation: Hiding the title bar will make the form impossible to move.
Icon Path
Textbox – String You can set the path to the icon that you want to replace the default UiPath icon of the form window. Warning, if an invalid path is used or a path to a file that is not supported will cause the robot to fail and the process to be aborted.
Default UiPath icon
Custom icon set as a path in properties
Position on screen
Dropdown The form window will be placed in the selected position on the primary screen. Available options from the dropdown: Center, TopLeft, TopRight, BottomLeft, BottomRight and by their name they are self-explanatory.
Title
Textbox – String The title of the form window can be set in this property. If no specific title is given, then the default empty title is used.
No title provided
Title provided in properties
Use the last position on the screen
Checkbox By checking this option the form window will save the position where it was last opened at and it will start in the same location on the screen. Disclaimer: This option overrides any other set properties regarding the window position
Secondly, Input:
HTML Form Path
Textbox – String This option is bound to the textbox from the Interactive Form Launcher activity layout. It contains the path to the HTML file that contains the form. Disclaimer: If the path provided is not valid or the file is not .html then an exception will appear on runtime.
Input Variable Name
Textbox – String This contains the name of the variable that is used to send any information back to the form from the robot. Disclaimer: The variable needs to be declared as a string variable in the scope that contains the Interactive Form Launcher.
Suppress Script Errors
Checkbox With this option checked no JavaScript errors will pop-up
Thirdly, Options:
Communication Channel Name
Textbox – String The name of the channel used to send instructions to this form (this is used only for multi-process automation – we can provide an example for that if needed too)
2. Complex sample
DESCRIPTION
This sample shows how data can be passed to the robot and after processing of said data response is sent back to the form and some UI elements are updated.
Running this workflow prompts a form to appear that requests the user to input some information, First Name, Last Name, and Company.
Also, after the page is loaded an initial call to the robot is made in order to check the connection between the form and the robot. If everything is ok, a simple message appears in the form("Robot connection status: Ok")
After entering the info and clicking submit the user can see the message from the upper part of the page(“Robot connection status: Ok”) change to something like “Welcome to Company, the time is …” where the time is sent by the robot.
Also, after completing the form we can see in the output windows from UiPath Studio that the information was printed by the robot. OVERVIEW - UIPATH STUDIO
This is the big picture of the process. When first running the process prints that the “Form opened” and the “HTMLSamples/ComplexIFL.html” is opened in the Interactive Form Launcher. The Interactive Form launcher activity contains a switch activity as its child. This method looks for a specific entry in the PropertiesDictionary, entry that is set by the function of the Submit button, and for any given entry we can decide that the robot can do different things, like invoking a workflow that uses the data from the form to perform separate operations.
After the switch, given that the “PropertiesDictionary("uipath-method").ToString” is set to “getResposeFromRobot” then the robot will print all the info it has from the form and will set the payload variable the value of a JSON containing information that needs to be return to the form, in our case its set to “"{ ""status"" : ""Welcome To " + PropertiesDictionary("Company").ToString + ", the time Is " + Now.ToString() + """}"”.
When exiting the switch case the Interactive Form Launcher activity will call the given JavaScript function(“uipath-invokemethodwithinput”) from the page with the given value of the “payload” variable. It’s important to note that a variable of type string named the same as the input into the In put Variable Name property needs to be declared in the same scope as the Interactive Form Launcher or higher.
OVERVIEW - JAVASCRIPT
LogicToExecute.js contains a few functions that are used by some functionalities present in the form. A fist example is a function CancelForm() th at is used to create the “Exit” button from the form and also the function Minimize() is used to create the “__” button to minimize the form.
function Minimize() { // Creating the PropertiesDictionary that will be sent to the UiPath Robot var props = {}; props["uipath-minimizeform"] = "2";
window.external.TriggerActivities(JSON.stringify(props)); }
function CancelForm() { var props = {}; props["uipath-killform"] = "1"; //launch initial Job to kill the current usecase window.external.TriggerActivities(JSON.stringify(props)); }
Other important functions are the ShowLoadingScreen() and the RemoveLoadingScreen() that is used to create a “Loading” animation in the form. These functions are also important because the Interactive Form Launcher looks for them and also calls them from the code. function ShowLoadingScreen() { var elem = document.getElementById("mainLoader"); elem.style.display = "block"; }
function RemoveLoadingScreen() { var elem = document.getElementById("mainLoader"); elem.style.display = "none"; }
For this loading screen, there needs to be an
The form page contains a function on the body that is called when the page finished loading. This function is OnLoad() and it's used to showcase how multiple calls can be made between the form and the robot. SetRobotStatus(status) sets a visual aid saying the connection status with the robot. function OnLoad() { var props = {}; // This property contains the name of the Javascript method to be executed after the UiPath nested activities have been run props["uipath-invokemethodwithinput"] = "SetRobotStatus"; // SetRobotStatus is a function in this js file props["uipath-method"] = "getRobotStatus"; // getRobotStatus is the string switch from the robot
// Send all data to the UiPath Executor and launch the activities inside the form window.external.TriggerActivities(JSON.stringify(props));
// Showing the loading screen ShowLoadingScreen(); }
function SetRobotStatus(status) { // Getting the response json from the robot and parsing it; it can contain any json string var obj = JSON.parse(status);
// Updating an element document.getElementById('statusCheck').innerHTML = "Robot connection status: " + obj['status'];
// Closing the Loading screen RemoveLoadingScreen(); }
Also the SubmitValues() functionality is present, a function that is executed when the ‘Submit’ button is clicked. function SubmitValues() { // Creating the PropertiesDictionary that will be sent to the UiPath Robot var props = {}; props["First_Name"] = document.getElementById("First_Name").value; props["Last_Name"] = document.getElementById("Last_Name").value; props["Company"] = document.getElementById("Company").value;
// This property contains the name of the Javascript method to be executed after the UiPath nested activities have been run props["uipath-invokemethodwithinput"] = "ResponseFunction"; // ResponseFunction is a function in this js file props["uipath-method"] = "getResposeFromRobot"; // getResposeFromRobot is the string switch from the robot
// Send all data to the UiPath Executor and launch the activities inside the form window.external.TriggerActivities(JSON.stringify(props));
// Showing the loading screen ShowLoadingScreen(); }
And last, the function that will be invoked by the robot when the information was passed to it and processed.
function ResponseFunction(status) { // Getting the response json from the robot and parsing it; it can contain any json string var obj = JSON.parse(status);
// Updating an element document.getElementById('statusCheck').innerHTML = obj['status'];
// Closing the Loading screen RemoveLoadingScreen(); }