APIs for HTML forms and callouts

The table below outlines the UiPath-specific APIs that can be used when building custom HTML forms and callouts. These APIs can be used as standalone inside HTML forms, generating the resize of a form, or they can be used as messages to send back into Studio, so your trigger workflows can continue executing. These APIs are written as JavaScript.

Forms and Callouts

The table below shows the APIs that you can use when building both forms and callouts in HTML. The APIs can act as event listeners and trigger a callback function e, that you can later use to access other properties of the form or callout, such as height, width, or top. Also you can test other properties by pressing inspect on the form and then writing the properties directly in the console.

You can also use APIs to get and set form values, and trigger form events.

API	Description	JavaScript example
uiPath.form.isVisible	Check whether the form is currently visible on the screen. It returns a boolean value indicating whether the form is visible or hidden.	if (uiPath.form.isVisible === true){ console.log("The form is visible"); } else { console.log("The form is not visible"); }
uiPathApi.form.addEventListener("visibilityChanged", (e) => {})	Set up an event listener to detect changes in the visibility status of a form. When the visibility of the form changes, the specified callback function is executed. This provides an opportunity to perform actions or updates in response to the form becoming visible or hidden. The e parameter in the callback function represents the event, and you can access its properties to determine the new visibility status, such as e.detail.	uiPathApi.form.addEventListener("visibilityChanged", (e) => { console.log("form visibility changed triggered: " + e.detail); });
uiPathApi.form.addEventListener("locationChanged", (e) => {})	Set up an event listener that responds to changes in the position of a form. When the form's location changes, the provided callback function is executed. Inside the callback function, you have access to the e parameter, which represents the event. This event object contains information about the change in location, such as the new left (e.detail.left) and top coordinates (e.detail.top) of the form.	uiPathApi.form.addEventListener("locationChanged", (e) => { window.formLocationChangedArg = e.detail.left + " " + e.detail.top; window.formLocationChangedCount++; console.log("form location changed triggered: " + window.formLocationChangedArg); });
getValue: function (elementId)	Allows you to retrieve form values.	getValue: function (elementId) { if (elementId == 'getArray') { return [1, 2, 3]; }
setValue: function (elementId, value)	Allows you to set form values.	setValue: function (elementId, value) { // execute this to throw in case the form element does not exist $("#" + elementId).val().toString(); $("#" + elementId).val(value); },
sendMessage: function (id, value)	Allows you to trigger a form event, such as Closed. Inside the Form trigger activity, whatever form event that you create using this API, can be accessed only as a Form message event.	sendMessage: function (id, value) { }

Callouts

The table below shows the APIs that you can use when building callouts in HTML. These APIs allow you to extract details about the target element that the callout binds to. The APIs act as event listeners and trigger a callback function e, that you can later use to access other properties of the target, such as height, width, top. Also you can test other properties by pressing inspect on the callout and then writing the properties directly in the console.

API	Description	JavaScript example
uiPathApi.target.visibile	Check whether the target element associated with a callout is currently visible on the screen. It returns a boolean value indicating whether the element is visible or hidden.	if (uiPath.target.isVisible === true){ console.log("The target is visible"); } else { console.log("The target is not visible"); }
uiPathApi.target.addEventListener("visibilityChanged", (e) => {})	Set up an event listener for changes in the visibility of the target element. When the element's visibility changes, the specified callback function is executed. You can then get the details about the visibility of the target using the callback function, and configure a counter to track how many times did the visibility of the target change.	uiPathApi.target.addEventListener("visibilityChanged", (e) => { console.log("target visibility changed triggered: " + e.detail); window.targetVisibilityChangedArg = e.detail; window.targetVisibilityChangedCount++; });
uiPathApi.target.addEventListener("locationChanged", (e) => {})	Set up an event listener that responds to changes in the position (left or top) of the target element. When the element's position changes, the provided callback function is executed. You can then get the details about the current location of the target using the callback function and configure a counter for it so you know how many times did the location change.	uiPathApi.target.addEventListener("locationChanged", (e) => { window.targetLocationChangedArg = e.detail.left + " " + e.detail.top; window.targetLocationChangedCount++; console.log("target location changed triggered: " + window.targetLocationChangedArg); });
uiPathApi.target.addEventListener("sizeChanged", (e) => {})	Set up an event listener to detect changes in the size (width or height) of the target element. When the element's size changes, the specified callback function is executed. You can then get the width and height of the target element and configure a counter to track how many times did the size of the target change.	uiPathApi.target.addEventListener("sizeChanged", (e) => { window.targetSizeChangedArg = e.detail.width + " " + e.detail.height; window.targetSizeChangedCount++; console.log("target size changed triggered: " + window.targetSizeChangedArg);