- Getting Started
- Demo apps
- How To
- Notifications
- Using VB Expressions
- Designing your App
- Designing your App with Autopilot
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Value
- Rule: Start Process
- Rule: Reset Values
- Rule: Upload File to Storage Bucket
- Rule: Download File From Storage Bucket
- Rule: Create Entity Record
- Rule: Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Rule: Trigger workflow
- Rule: Submit Action
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Leveraging Media in your app
- Leveraging Actions in your app
- Leveraging Connections in your apps
- Web apps in Studio Web
- Application Lifecycle Management (ALM)
- UiPath® First-Party Apps
- Basic Troubleshooting Guide
Custom HTML
The Custom HTML Control targets advanced users and offers the flexibility of HTML, CSS, and JavaScript programming languages to craft custom, interactive controls as required by their business needs. The control includes dedicated editors for HTML, CSS, and JavaScript code, with the added advantage of incorporating externally hosted CSS and JavaScript files via URLs.
Introduction
This app shows how to create different types of charts using JavaScript libraries such as d3.js or chart.js.
Demo app - try it yourself
To try the interactive charts yourself, use the demo app.
Demo app - instructions to use
- In UiPath® Apps, create a new app and import the downloaded demo app.
- Preview your app to interact with all chart types.
Introduction
This app combines entities, Custom HTML, and Edit Grid controls to display an interactive pie chart. The interactivity is activated by selecting an option from a dropdown menu, which changes the pie chart sections and the records in the edit grid. Subsequently, clicking on a chart section updates data in the edit grid.
Demo app - try it yourself
To try the interactive pie chart yourself, use the demo app or follow the procedure.
Demo app - instructions to use
- Preview the demo app.
- From the "Filter Tickets by Customer Name" dropdown, select an option. The total count of tickets, the pie chart representation, and data in the edit grid should change.
- Hover over a chart slice. The tooltip displays the category name and the ticket count.
- Click a chart slice. The edit grid displays the records for the selected category.
Procedure
After downloading, proceed with the following steps:
Introduction
This app shows how to create a custom date-time picker.
Demo app - try it yourself
To try the date-time picker yourself, use the demo app.
Demo app - instructions to use
- In UiPath® Apps, create a new app and import the downloaded demo app.
- Preview your app to interact with the date-time picker.
Introduction
This app shows how to create password fields.
Demo app - try it yourself
To try the password field yourself, use the demo app.
Demo app - instructions to use
- In UiPath® Apps, create a new app and import the downloaded demo app.
- Preview your app to interact with the password field.
Introduction
This app shows how to create signature input fields.
Demo app - try it yourself
To try the signature input yourself, use the demo app.
Demo app - instructions to use
- In UiPath® Apps, create a new app and import the downloaded demo app.
- You may notice some errors. To fix them, replace the referenced storage bucket "Demo app" with one in your tenant.
- Preview the app to interact with the signature input field.
-
Open code editor - Opens a three-panel editor for adding the HTML, CSS, and JavaScript code.
-
Accessible label - The description of the control. This property is used by screen readers for enhanced accessibility.
-
Hidden- If true, hides the control at runtime.
-
Disabled - If true, makes the control inactive at runtime. The HTML, CSS, and JavaScript content loads, but is unresponsive to user actions, such as clicking.
-
Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default back to the parent alignment, deselect the overridden options.
Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal). - Border - The border for the control. Border Thickness and Radius can be configured.
-
Margin - The margin of the control. By default, a margin of 4px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.
-
Size - The width and height of the control. By default, the size is set to
auto. To set minimum or maximum values, click the three dot icon (...).
The code editor of the the Custom HTML control provides three panels to input code in HTML, CSS, and JavaScript programming languages. Each editor supports IntelliSense, or the automatic code completion, and syntax highlighting.
The code from the panels is compiled into a project and rendered in Apps Studio for preview. To observe the functionality of the control, preview the app.
-
Each editor has a maximum content size of 5MB. When the content exceeds this size, you can no longer save your changes.
-
IntelliSense does not work for CSS and JavaScript codes written within the HTML editor.
If you already have styles or scripts defined, you can reference them in the control, without writing the code in the corresponding CSS or JavaScript panels.
.cssor .js files:
-
In the Code editor of the Custom HTML control, switch to the External resources tab.
-
Under the CSS section, add an external CSS file. The file must be hosted at a network-accessible URL to ensure compatibility and availability where the app is running.
-
Under the JavaScript section, add an external script file. The file must be hosted at a network-accessible URL to ensure compatibility and availability where the app is running.
-
When you finished adding all the external resources, click Save.
By default, the Tab key adds a tab space inside the current editor. To customize the behavior of the Tab key, use the following shortcuts:
|
OS |
Shorcut |
Behavior |
|---|---|---|
|
Windows |
CTRL+M |
Instructs the Tab key to navigate between the panels and change focus on the visible buttons of the editor. Press CTRL+M again to return to the default Tab behavior. |
|
MacOS |
CTRL+Shift+M | Instructs the Tab key to navigate between the panels and change focus on the visible buttons of the editor. Press CTRL+Shift+M again to return to the default Tab behavior. |
<body></body> tags of a HTML code block.
For example, to add the container element for an interactive pie chart in your app, you would use the following HTML snippet:
<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas><canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>Where:
-
id="myChart"refers the JavaScript "myChart" element that generates the interactive pie chart inside the HTML element. For details, see The JavaScript editor. -
class="chart-container"refers to the "chart-container" CSS class that adds the style for the pie chart inside the HTML element. For details, see The CSS editor.
In this panel you can input the style of your control and the elements inside it.
For example, to add colors and a border to the pie chart, you would use the following CSS snippet:
.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}In this panel you can create the interactive part of your control, such as timely content updates, maps, or animated 2D/3D graphics.
For example, to create a pie chart for Apple products sales world-wide, and to design it to display values for the selected slice, you would:
-
Add the following JavaScript external resource:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.jshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js -
Use the following JavaScript snippet:
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });
setVariable(), getVariable(), and onVariableChange() built-in functions.
getVariable()
In the JavaScript editor, use this function to get the value of an existing variable.
internalValue, you would use the following JavaScript snippet:
async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();-
The
getVariable()function is asynchronous, which requires that you useawait. -
If you call
getVariable()inside a function, make that functionasync. In the example provided, we created theinit()function and immediately invoked it. -
If you call
getVariable()at a top-level, embed it inside anasyncfunction.
async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();setVariable()
In the JavaScript editor, use this function to set a value to an existing variable. The first argument is the variable name, and the second argument is the value you want to set.
async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();await.
try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}onVariableChange()
In the JavaScript editor, use this function to listen to changes of an existing variable value and access the latest variable value.
App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});onVariableChange() to the deregister variable. Then, if you want to stop listening to variable changes, you can invoke the deregister() function:
const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();-
The listener starts after the Custom HTML control renders completely. If a variable value changes before the Custom HTML control is initialized, the updated value is not captured.
To get the latest variable value, callgetVariable()before callingonVariableChange(). -
The HTML control and the functions inside it are initialized after the control is displayed at runtime.
Variable types
|
App variable type |
Sample response from variable functions |
|---|---|
|
Text (String) |
"Hello world" |
|
UInt64 (Int) |
100 |
|
Decimal number |
50.25 |
|
True/False (Boolean) |
true |
|
DateOnly |
2024-01-02 (Format: YYYY-MM-DD) |
| DateTimeOffset |
2024-01-06T09:54:41.9170000Z (Equivalent JS Format: Date object ISO string) |
| AppsFile - value of a File picker control | JS File object
|
| AppsFile - value created from
URL
For example: |
File object: |
|
GUID |
"5637F7DB-391D-4C8B-805D-0A918531CA3E" |
| List(Of string) | ["Banana", "Kiwi", "Apple", "Lemon"] |
| ListSource(Of <Entity>) | |
| <Entity> (Single entity row) | |
| ListSource(Of <Choiceset>) | |
| Datatable | |
-
Do not include sensitive data in the Custom HTML control due to its client-side access.
-
Do not use the
<html>and<head>tags inside the HTML editor, as the code is appended inside the<body>tags automatically. -
Add CDN URLs of external resources such as Bootstrap, jQuery, or other JavaScript SDKs in the External resources tab.
-
If you want to stop listening to the variable change, use the
deregister()function. -
Avoid large data loops to prevent slowing down the application and to keep the control responsive.
-
Minimize the usage of DOM elements as much as possible: create DOM elements only when necessary and remove them when they become obsolete.
-
Use infinite or virtual scrolling for large datasets over standard scrolling.
-
Create and maintain a clean, optimized, and redundancy-free code.
-
Custom HTML does not provide the ability to trigger control rules.
-
Connecting the control to Apps is made only by using the variable functions:
getVariable(),setVariable(),onVariableChange(). -
To access Process or Queue data, you need to assign a variable for every Process or Queue property.
-
The dimensions of the HTML control do not dynamically adjust for displaying pop-ups or dropdown menus, therefore you need to set the size of the HTML control to fit these menus.
-
You cannot interact with the HTML control during design-time.
-
The
setVariable(),getVariable(), andonVariableChange()functions operate only at runtime. -
Changes to variable names or variable deletions do not automatically reflect in the code editors. You need to manually update the code with the current variables.
-
Variables storing files from the HTML control cannot be used in the Upload File to Storage Bucket rule or to populate the File type fields of Data Service entities.
-
The control can communicate with other UiPath® components, such as Processes, Queues, or Storage Buckets, only through the use of variables.
-
Preprocessed CSS code, using LESS or SCSS, is incompatibile with the HTML control.
-
The following APIs fail silently when used, due to security concerns:
-
Downloading using the
downloadattribute -
Opening modals using
Window.alert(),Window.confirm(),Window.print(),Window.prompt(). -
Pointer and orientation locking
-
Navigating the top-level browser context
-
Entering full screen using
requestFullscreen() -
Screen capturing using
MediaDevices.getDisplayMedia() -
Accessing camera or microphone using
MediaDevices.getUserMedia() -
Requesting payments
-
Accessing the location using
navigator.geolocation() -
Sharing data using
navigator.share()
-
- Add a
console.log()in the JavaScript editor. - In your Apps Studio session, open the browser console by pressing F12, then select the Console tab.
- In the console settings, check the Selected context only box.
- From the JavaScript context dropwdown at the top of the console page, select the
html-control-base.htmloption for the desired HTML control.
The logs from the selected control are displayed in the console.
See the video for more details:
- Add a
console.log()in the JavaScript editor. - In your Apps Studio session, open the browser console by pressing F12, then select the Console tab.
- At the right-hand side of the log, click on the VM message.
The debugger opens. Select your breakpoint by clicking on the desired line number.
See the video for more details:
|
VB property |
Data type |
Description |
|---|---|---|
|
AccessibleLabel | String |
The description of the control, used by accessibility technologies such as screen readers. |
| Hidden | Boolean | Determines the visiblity of the Custom HTML control. If true, hides the control at runtime. |
| Disabled | Boolean | Determines if the Custom HTML control is disabled. If true, disables interaction with the control at runtime. HTML, CSS and JavaScript content loads, but is unresponsive to user actions. |
- Demos
- Custom HTML: creating charts
- Custom HTML: creating a interactive pie chart using variable functions
- Custom HTML: creating date-time pickers
- Custom HTML: creating password fields
- Custom HTML: creating signature input fields
- General
- Events
- Style
- Code editor for Custom HTML
- Adding external resources
- Accessibility shortcuts for the Tab key
- The HTML editor
- The CSS editor
- The JavaScript editor
- Using variables in Custom HTML
- Best practices for Custom HTML
- Functional limitations
- Debugging the code of a Custom HTML control
- Adding and filtering console logs of a Custom HTML control
- Adding breakpoints
- VB properties
