Using Bootstrap 5 Components With JavaScript

Code snippets to help building web page automation with JavaScript.

WebAutomation.LaunchEdge.LaunchEdge Url: $'''https://getbootstrap.com/docs/5.0/forms/form-control/''' WindowState: WebAutomation.BrowserWindowState.Normal ClearCache: False ClearCookies: False Timeout: 60 BrowserInstance=> Browser
# Input - Set email value
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[0].querySelector(\'#exampleFormControlInput1\').value = \'power@automate.gallery\';
}''' Result=> Result
# Textarea - Set text area value
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[0].querySelector(\'#exampleFormControlTextarea1\').value = \'Multi\\nline\\nexample\';
}''' Result=> Result
# Color picker - Set hex color
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[7].querySelector(\'#exampleColorInput\').value = \'#ffc0cb\';
}''' Result=> Result
# Tested with Power Automate Desktop version 2.19.139.22098

# [ControlRepository][PowerAutomateDesktop]

{
  "ControlRepositorySymbols": [],
  "ImageRepositorySymbol": {
    "Name": "imgrepo",
    "ImportMetadata": {},
    "Repository": "{\r\n  \"Folders\": [],\r\n  \"Images\": [],\r\n  \"Version\": 1\r\n}"
  }
}

WebAutomation.LaunchEdge.LaunchEdge Url: $'''https://getbootstrap.com/docs/5.0/forms/checks-radios/''' WindowState: WebAutomation.BrowserWindowState.Normal ClearCache: False ClearCookies: False Timeout: 60 BrowserInstance=> Browser
# Checkbox - Select "Default" value
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[0].querySelector(\'#flexCheckDefault\').checked = \'checked\';
}''' Result=> Result
# Radio - Select "Default" value
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[3].querySelector(\'#flexRadioDefault1\').checked = \'checked\';
}''' Result=> Result
# Switch - Uncheck "Checked switch checkbox input"
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[5].querySelector(\'#flexSwitchCheckChecked\').checked = \'\';
}''' Result=> Result
# Tested with Power Automate Desktop version 2.19.139.22098

# [ControlRepository][PowerAutomateDesktop]

WebAutomation.LaunchEdge.LaunchEdge Url: $'''https://getbootstrap.com/docs/5.0/forms/select/''' WindowState: WebAutomation.BrowserWindowState.Normal ClearCache: False ClearCookies: False Timeout: 60 BrowserInstance=> Browser
# Select - Set value "Two"
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() { 
  document.getElementsByClassName(\'bd-example\')[0].querySelector(\'select option[value=\"2\"]\').selected = \'selected\';
}''' Result=> Result
# Select - Set value "Two" and "Three"
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() {
  // Unselect first option (this is always preselected)
  document.getElementsByClassName(\'bd-example\')[2].querySelector(\'select option\').selected = \'\';
  // Select option value \"Two\"
  document.getElementsByClassName(\'bd-example\')[2].querySelector(\'select option[value=\"2\"]\').selected = \'selected\';
   // Select option value \"Three\" 
  document.getElementsByClassName(\'bd-example\')[2].querySelector(\'select option[value=\"3\"]\').selected = \'selected\'; 
}''' Result=> Result
# Tested with Power Automate Desktop version 2.19.139.22098

# [ControlRepository][PowerAutomateDesktop]

Background

Recording web page UI automation and then later running those actions will probably fail at some point when updating PAD application to a newer version. Therefore, it’s probably safer to build web page automation (navigation and actions) with JavaScript since HTML elements can be referenced by ID and class names.

These code snippets (see all tabs) are built for Bootstrap which is a widely used framework known by professional web developers and used in many business sectors. Run these flows in your PAD to see updated values on Bootstrap´s documentation pages.

Features

Input - Set text value
Textarea - Set textarea value
Color picker - Set hex color
Checkbox - Select value
Radio - Select value
Switch - Uncheck value
Select - Set single value “Two”
Select - Set multiple values “Two” and “Three”

Author

PAG Admin

Also See These Flows

Flow Action

Basic Web Scraper Built With Power Automate for Desktop

A functional web scraper with complete flow actions. Showing how to scrape websites, traverse links and download content.

PAG Admin

854

Flow Action

Making Microsoft Dataverse OAuth 2.0 Queries Using PAD

This example shows how to retrieve top 3 accounts from your Dataverse / Dynamics 365 environment using Power Automate Desktop.

PAG Admin

744

Flow Action

Create Animated Doughnut in Notepad

This example shows how to read JSON data, loop items and print output to screen (Notepad in this case).

PAG Admin

189

Flow Action

Backup Your Photos and Videos Using Password Protected Zip Files

Easily create backup archive files that can be shared via email or uploaded to a server for backup purposes.

PAG Admin

131

Flow Action

Find Text From Images Using Google Vision AI and OCR

This walkthrough shows all the steps it takes to analyze text from images with Optical Character Recognition (OCR) using Power Automate Desktop.

PAG Admin

289