How can I get a custom button's id in Pega 7?
Hello everyone,
I am using a javascript to capture an enter key event from the keyboard where I would like to simulate the behavior of a button click. The custom button is created within a section and I use the following js in a HTML tab of a different section...
<SCRIPT TYPE="text/javascript">
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode && keycode == '13'){
document.getElementById('button1').click();
}
});
</SCRIPT>
<div onKeyPress="return keypress(event)">
However, I am not able to locate anywhere the button id and hence the getElementById always return null (empty) or undefined id.
Anyone has encounter similar difficulty is Pega 7?
Thanks a lot in advance.
Accepted Solution
Hi all,
Just wanted to add a little to this thread. Test ID is privilege based so depending on the user's privilege the data-test-id attribute will be added to the control itself. Its main purpose is for automation so I would be hesitant to rely on its value for this scenario.
As another solution you could add a custom class to the cell that the button is inside of and then use querySelector to get a handle on it.
Then in code you can reference that button by doing something like.
I know its not ideal but this should work.
Thanks,
Max
Citicorp Services India Private Limited
IN
Hi,
Pega 7 provides rich capabilities to handle the key events in OOTB.
Configure the action which has been defined for the click event , in the Enter Key event.
Please let me know if this helps.
Thanks,
Gowrishankar.
ING
BE
Hi Gowrishankar,
Thanks for your response.
The events you have mentioned above are handled on elements such as button, text input, etc and you have to navigate/focus on that element and then if you hit the enter key the event will take its action.
However, this is not what our requirement is as I need to capture the enter key event from anywhere in my Section or Harness and then execute, for instance, a button click. The above js script works fine pega OOTB button, for instance, I am using the pxLocalAction Section where its button id is "button1", but on any custom button I create I dont know where or how to interact with the button's id.
I am using the below js to capture all the elements ids once you click on them on the Portal...
document.addEventListener('click', function(e) {
alert(e.target.id);
});
Now, this scripts always returns blank for my custom buttons whereas the ids of OOTB buttons are always returned with a value, which then I can refer to in order to use document.getElementById.
Thanks,
Ozkan
Hi Ozkan,
The recommended way to resolve this would be what Gowrishankar Ramasamy has mentioned in the above post. However, if your requirement is to still use 'document.getElementByID', you may try this: When you include a button control in a section, you have an option to generate an ID. You may use this ID in your script to get the reference to that button
Please let me know how this works for you.
Cheers,
Shan
TCS
US
Hi,
The Test ID option in OOTB configuration is actually the value of the field "Data-Test-ID" and not "ID" field as we expect it to be. You can see this if you view your source from your HTML page. I also have a similar requirement where I would need to show/hide Pega OOTB button based on a particular radio button selection.
Pegasystems Inc.
JP
How about configure a visible when rule on the button which need to be hide/show conditionally based on the radio button option?
You can refresh the section containing the button on the change event of your radio button.
Updated: 4 Sep 2015 4:00 EDT
Pegasystems Inc.
JP
If you really try, it is possible to access the "Test ID" which was rendered as a custom html property "Data-Test-ID".
However, before writing any gory javascript, I would spend a little more time to challenge users to understand what is the real painpoint for them if the required feature was missing.
TCS
US
Thanks!
I tried to have another control (saved from OOTB button) control and add an additional parameter ID which will set the Data-Test-ID from the default OOTB control for button, pxButton. This does not seek to work either. So just wondering what could be the way to access that data-test-id field.
ING
BE
wondering and looking for the same. I can't find any document object method to interact with other HTML fields. document.getElementById refers specifically to the actual id of the element.
Pegasystems Inc.
JP
ING
BE
thanks for sharing Chunzi. Both solutions below worked fine for me but as Maxwell mentioned we should not rely on the test id...
$('[Data-Test-ID="20150812013413022024273"]').click();
document.querySelector("[Data-Test-ID='20150812013413022024273']").click();
Accepted Solution
Hi all,
Just wanted to add a little to this thread. Test ID is privilege based so depending on the user's privilege the data-test-id attribute will be added to the control itself. Its main purpose is for automation so I would be hesitant to rely on its value for this scenario.
As another solution you could add a custom class to the cell that the button is inside of and then use querySelector to get a handle on it.
Then in code you can reference that button by doing something like.
I know its not ideal but this should work.
Thanks,
Max
Pegasystems Inc.
JP
I am glad to hear that your mission accomplished
however I am still curious about why you need to implement such a global key event listener in your application?