Question

Fire click event on button via Java script function

We are trying fire click event of a button from java script using PEGA api, but it is not firing defined click event.
Below is how we are trying to fire the event.
pega.util.Event.fireEvent(document.querySelector('button[data-test-id="<button-data-test-id>"]'),'click');

Steps:
1) Drag a Pega button, define click event.
2) Define a javascript function to call below line
pega.util.Event.fireEvent(document.querySelector('button[data-test-id="Pass the data test ID of the button"]'),'click');
3) Call javascript function

We do not see the event getting fired.

I even tried below method:
document.querySelector('button[data-test-id="Pass the data test ID of the button"]').click();
document.querySelector(".saverw").click();

***Edited by Moderator Marissa to update SR Details***

Group Tags

Comments

Keep up to date on this post and subscribe to comments

June 21, 2019 - 9:24am

You can configure click events on buttons right within Pega. Then you can also call a run script action upon the click event. No need to define or maintain any special APIs with that approach.

Will that not achieve your business requirement?

June 21, 2019 - 10:39am
Response to Rett_Hean_GCS

Configuring on button is very obvious.

We have certain actions defined on Save button in addition to Save action. 

We are trying to implement autosave, where at frequent intervals we need to trigger Save action.

Instead of re writing code at multiple places, it would be better if we can simply fire corresponding event defined on button.

Pega
June 21, 2019 - 9:26pm

Hi Murthy,

I would suggest below approach for triggering button action at regular intervals.

Configure the button actions you want to trigger on the button actions tab for click event in the section.

In your application harness rule include a js file or in the section include a non-autogenerated section which does action at regular intervals using setTiimeout function as below:

<script type="text/javascript">

function AutoSaveCustomForm()

{

 pega.util.Dom.getElementByID("ID_VALUE").click();

}

</script> 

<pega:choose>

<script>setTimeout(AutoSaveCustomForm, 60000); </script>

</pega:choose>

Hope it helps.

Thanks.

June 24, 2019 - 2:10pm
Response to Sreepriya

Hi Sreepriya,

Pega generated elements including buttons do not have ID attribute, so I would not be able to use pega.util.Dom.getElementByID("ID_VALUE").click(); right?

Let me know if you are saying that I can use data-test-id value in pega.util.Dom.getElementByID("ID_VALUE").

Regards,

Satya

Pega
June 24, 2019 - 9:59pm
Response to Murthy.1303

Hi Satya,

To find the button element you can try below:

pega.util.Dom.getElementsByClassName("AutoSaveButton", "button")[0].click();

AutoSaveButton is the unique Control format name which is configured in button cell as below:

Make a copy of original button and modify the format, add display:none css for the copied button so that only original button will be seen on screen and the new button is for performing background actions.

Let me know if it helps.

Thanks.