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

3,945

Flow Action

PowerToys for Power Automate for Desktop

These PowerToy shortcuts are made for Windows users for the purpose of make their computing lives better.

PAG Admin

920

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

2,886

Flow Action

Visit Web Pages Found With Duckduckgo

Run DuckDuckGo in Chrome and visit first three links. Create a variable for CSS selectors to be able to click different links using an incremental loop counter.

PAG Admin

263

Flow Action

Read Google Sheets API With Power Automate for Desktop

This example uses Invoke Web Service flow action to send a request to Google Sheets API, the response contains spreadsheet values.

PAG Admin

1,578