This article provides instructions and best practices on how to select the following elements and attach Engage Live balloons to them. Refer to the respective section to learn how to select:
- element automatically by pointing to it,
- an item on the search page,
- the Tasks icon,
- the Search icon,
- items in a Task menu,
- other buttons,
- other symbols,
- input fields, and
- tabs on the form pages.
Home Page Icon selection (First Step of a Workflow)
| Element Selection Type | Element Identifier |
CSS Selector: | svg[aria-label="Home"] |
Entry Points help trigger Workflows from an intermediate step based on the application page where the Workflow is triggered from.
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| Yes | URI Hash: | / |
Home Page Icon selection (Second Step of a Workflow)
| Element Selection Type | Element Identifier |
Automatic Selection (Select Element, ReSelect Element) | NA Selecting the element via this function does not require additional identifiers, since the process is fully automated by Engage Live . Click Select / Reselect Elementin Engage Live App. The control is now passed to the application page in the browser. Hover over the field or another element to which the balloon should be attached and once it is highlighted, click it. The Engage Live ballon is going to be attached to it. |
Entry Points help trigger Workflows from an intermediate step based on the application page where the Workflow is triggered from.
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| Yes | Custom Script | if( document.querySelectorAll('[id="app-navigation"]').length == 1 ) return true; else return false; |
Search Page (or page where list of <items> can be found) (My Projects Search Page, Invoice Search page, etc.)
| Element Selection Type | Element Identifier |
CSS Selector: | div[title*="Search"] |
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| Yes | Custom Script:  | Note: Look for page headings as you see on the screen above "Invoices". Other Pages might have, My Projects etc...
return true; else return false;
Example: if(document.querySelectorAll('[title="My Projects"]').length == 1) return true; else return false; |
Tasks Icon
| Element Selection Type | Element Identifier |
| CSS Selector | [title*="Tasks"] |
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| Yes (When this step is the first balloon on the page) | Custom Script:  | Note: Look for page headings as you see on the screen above "Invoices". Other Pages might have, My Projects etc...
return true; else return false;
Example: if(document.querySelectorAll('[title="My Projects"]').length == 1) return true; else return false; |
Search Icon
| Element Selection Type | Element Identifier |
| CSS Selector | [title*="Search"] |
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| Yes (When this step is the first balloon on the page) | Custom Script:  | Note: Look for page headings as you see on the screen above "Invoices". Other Pages might have, My Projects etc...
return true; else return false;
Example: if(document.querySelectorAll('[title="My Projects"]').length == 1) return true; else return false; |
Point balloon to Task Link from Menu Section
| Element Selection Type | Element Identifier |
| Custom Script | var x=document.querySelectorAll('div ul li a').length; for(var i=0;i<x;i++) { if(document.querySelectorAll('div ul li a')[i] && document.querySelectorAll('div ul li a')[i].innerText=='Manage Financial Project Settings') break; } return document.querySelectorAll('div ul li a')[i]; Note: Replace text highlighted in yellow with your link name. |
| Mark this page as Entry Point? (Yes/No) | Entry Point Type | Page Identifier |
| No |
Other Buttons
Buttons such as Edit, Submit, Submit (with Hyperlink on a letter) etc.
| Element Selection Type | Element Identifier |
| CSS Selector | button[title="Edit"] button[id*="search"] (or) div[id*="submitButton"] Note: Inspect (CNTL +SHIFT + I) the button and look for button tag -> Title attribute. |
Symbols like +, X, etc.
| Element Selection Type | Element Identifier |
| CSS Selector | For +: img[title="Add"] For X: img[title="Remove"] Note: Inspect (CNTL +SHIFT + I) the button and look for button tag -> Title attribute as different sybmols might have a different title. |
All the Input fields on the form pages (Input, Pull-down, browse, checkbox, etc.)
| Element Selection Type | Element Identifier |
| Automatic Selection (Select Element, Reselect Element) | NA The control is now passed to the application page in the browser. Hover over the field or another element to which the balloon should be attached and once it is highlighted, click it. The Engage Live balloon is going to be attached to it. |
Tabs on the form pages
| Element Selection Type | Element Identifier |
| Custom Script | var x=document.querySelectorAll('a[id*="order_management_order_management"]').length; for(var i=0;i<x;i++) { if(document.querySelectorAll('a[id*="order_management_order_management"]')[i] && document.querySelectorAll('a[id*="order_management_order_management"]')[i].innerText=='General') break; } return document.querySelectorAll('a[id*="order_management_order_management"]')[i];Note: Replace "General" with your tab name |