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

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

Flow Action

Using Bootstrap 5 Components With JavaScript

Code snippets to help building web page automation with JavaScript.

PAG Admin

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

582

Flow Action

Use Power Automate Desktop as a Web Scraper for Excel

Update existing Excel spreadsheet with information pulled from any webpage.

PAG Admin

269

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

230