get the attributes of the currently focused element

[sumire]

Hello,

For example, on the web page shown in the figure below, the item "Last Name" indicated by the red arrow is currently in focus.

I want to get the attributes of this input box element.

Is there a way to know what element is currently in focus?

------------------------------
Mitsuko
Asia/Tokyo
------------------------------

[PvD_SE]

Hi Mitsuko,

I'm quite sure that 'Dave the RPA guy' made a series of youtube vids, where at least one demonstrates exactly what you're out after.

------------------------------
Happy coding!
---------------
Paul
Sweden
------------------------------

[devneetmohanty07 · Accepted solution]

Hi @sumire 

In order to know if an element is properly focused or not, one needs to examine the web element behavior as that will vary depending on the underlying code of the website development framework used. Theoretically, every web element will have some kind of a change in their attributes whenever you would focus on them as it will fire a JS event in the backend. I will show a way below which can be used with same concepts just the selectors will vary from application to application.

For the website that you've mentioned, if we inspect any given element carefully, let's say, 'First Name' field in our case we can see the below HTML structure changes when I apply focus on it and when I don't do the same.

As you can see from above, there is a span element just above the input element for 'First Name' field which has a style attribute that gets changed when you apply focus or not. This value is empty when placed under focus while on the other hand it has the value as 'display: none;' when it is not placed under the focus. This is our first step which states that we need to identify the proper attribute which gets changed based on this event trigger.

Now, in order to make this change as a base for our logic in Blue Prism we first need to get an XPath expression that can help me to easily identify the span tag just above the input tag for 'First Name' field. I can use the following XPath expression: //input[@id='registrant.firstName']/preceding-sibling::span

According to the above XPath expression, we are first trying to identify an input tag with ID as 'registrant.firstName' and then we are trying to get the span tag which is just before this input tag. This ID value you can see in the HTML definition of the input tag as shown below:

Now, in the Blue Prism Studio we can create an object and in the Application Modeler can setup a new element with the following attributes:

Once, this has been setup we can use a 'Read' stage in our action and map the 'Get Attribute' function to our element with the Attribute Name value as 'style':

Now, you can create a logic in your action which can check if the value of the data item that we receive from the above Read stage is empty or if it has the value as 'display: none;' and based on this you can set a flag data item, let's say named as 'Out_Focus State' as either True or False as shown below:

Test Results:

------------------------------
----------------------------------
Hope it helps you out and if my solution resolves your query, then please mark it as the 'Best Answer' so that the others members in the community having similar problem statement can track the answer easily in future

Regards,
Devneet Mohanty
Intelligent Process Automation Consultant | Sr. Consultant - Automation Developer,
WonderBotz India Pvt. Ltd.
Blue Prism Community MVP | Blue Prism 7x Certified Professional
Website: https://devneet.github.io/
Email: devneetmohanty07@gmail.com

----------------------------------
------------------------------

[sumire]

Hello @devneetmohanty07 ,

Thank you for the detailed explanation.

It seems to be the only way to do it, so I will try to operate it the way you suggested.

------------------------------
Mitsuko
Asia/Tokyo
------------------------------

[sumire]

To get the attributes of the currently focused element, I wrote JavaScript functions:

function getActiveElement1() {
var hiddenElement = document.createElement('input');
    hiddenElement.type = 'hidden';
    hiddenElement.id = 'bp-output';
    document.body.appendChild(hiddenElement);
    hiddenElement.value = document.activeElement.value;
}
function getActiveElement2() {
var hiddenElement = document.querySelector('#bp-output');
    hiddenElement.value = document.activeElement.value;
}

'getActiveElement1' creates an input box, and 'getActiveElement2' copies the currently focused element's attribute to the input box that created by 'getActiveElement1'.

In the application modeler, create the settings for the input box created by 'getActiveElement1' like this:

Use the read stage to read attributes from 'hidden_bp-output' to determine if it is the desired element.

------------------------------
Mitsuko
Asia/Tokyo
------------------------------