Getting Started with Custom HTMLControl

UiPath Apps recently introduced Custom HTML to provide developers flexibility on their Front End requirements. It provides a custom Code Editor for writing HTML,CSS and Javascript

So if you are a beginner, how do you start

Coming from no code background, this control can be the most daunting to work with as it involves bare bone understanding of HTML, CSS, and JS

One can go through the following resources to learn the basics

HTML - HTML Tutorial
CSS - CSS Tutorial
JS - JavaScript Tutorial

For some ready-to-try examples
CodePen.io - https://codepen.io/search/pens

Once done , you can read the official UiPath Apps Custom HTML Documentation

For examples provided by UiPath refer

There are some limitations currently which we would address in coming releases, In case you prepare some cool demos, try tagging us in this thread. We would love to hear

Some of the scenarios we foresee

  1. Signature Control
  2. HTML’s out of the box Password Masking for textbox control
  3. Charts and Dashboards
  4. Brand Themes via CSS eg:- Bootstrap/ Fiori
  5. Encryption support via Javascript
  6. Date and Time and Time Picker
5 Likes

Hi @udit.chandna could you please provide an example of how to interact app variable (of any type) in JavaScript .
for ex- i have username and password in my app(coming from Entity) and i want to valid if that is correct password in my customer html.

Hi @Shivangi_Patankar You can refer to this following section in the documentation to better understand how to access App variables inside a Custom HTML control: Apps - Custom HTML.

  1. If you wish to access all the data in an entity inside an HTML control, you can create an app variable of type ‘ListSource of Entity’. Alternatively, if you want to obtain a specific record in the Entity, you can create an App variable of the respective Entity type.
  2. On the page load event, create a ‘Set value’ rule to assign the variable with entity data using Fetch or Fetchone queries.
  3. Within the HTML control Javascript code, you have the option to use ‘App.getVariable’ or ‘App. onVariableChange’ functions to get the data.
2 Likes

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.