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

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

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

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

1,681

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

273