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

Use Power Automate Desktop as a Web Scraper for Excel

Update existing Excel spreadsheet with information pulled from any webpage.

PAG Admin

688

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

2,762

Flow Action

Schedule Flows Using Power Automate for Desktop

Did you know that the free edition of Power Automate Desktop does not include flow scheduling? Use this template to schedule flows.

PAG Admin

8,687

Flow Action

Write to Google Sheets API Using OAuth 2.0 Power Automate for Desktop

Write cell values to spreadsheets. Includes basic logic for handling refresh tokens for repetitive tasks.

PAG Admin

1,980

Flow Action

Open or Close an Application When Bluetooth Device Is Connected/Disconnected

This example opens and closes Spotify automatically when Bose NC 700 HP headphones are turned on/off. Discover how you can use Bluetooth as a trigger with Power Automate for Desktop. You can use any Bluetooth device and application.

PAG Admin

429