What is data-click attribute? + Fire the onclick event of a button - Javascript
Hi All,
I was trying to make a custom button in a section and found that the code which is generated OOTB has a data-click attribute. I want to actually create a div element which will be getting refresh on its own in some time and on refresh will be calling the onclick event of my custom button. But the code which is getting generated does not have anything like ONCLICK. Please help me in understanding what actually this data-click is and how to fireEvent data-click?
***Moderator edit: Vidyaranjan| Included Category ***
Pegasystems Inc.
IN
Hello Dongre,
Regarding your query on data-click, I find that this attribute gets added to UI elements(say button) when action(say refresh this section) and events(say for mouse click) are added under Actions tab of the UI control element.
Below is the code at runtime for the button with action(refresh the section) and event set:
<button data-test-id="2016071901362900868668" name="Create_pyWorkPage_8" type="button" class="Strong pzhc" data-ctl="" data-click="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","pyWorkPage"]]]"><div class="pzbtn-rnd" data-click="."><div class="pzbtn-lft" data-click=".."><div class="pzbtn-rgt" data-click="..."><div class="pzbtn-mid" data-bindprops="innerHTML" data-click="...."><img src="webwb/zblankimage.gif" alt="" class="pzbtn-i">OK_button_RR<img alt="" src="webwb/zblankimage.gif" class="pzbtn-i"></div></div></div></div></button>
Below is the code at runtime for the button without action and event:
Hello Dongre,
Regarding your query on data-click, I find that this attribute gets added to UI elements(say button) when action(say refresh this section) and events(say for mouse click) are added under Actions tab of the UI control element.
Below is the code at runtime for the button with action(refresh the section) and event set:
<button data-test-id="2016071901362900868668" name="Create_pyWorkPage_8" type="button" class="Strong pzhc" data-ctl="" data-click="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","pyWorkPage"]]]"><div class="pzbtn-rnd" data-click="."><div class="pzbtn-lft" data-click=".."><div class="pzbtn-rgt" data-click="..."><div class="pzbtn-mid" data-bindprops="innerHTML" data-click="...."><img src="webwb/zblankimage.gif" alt="" class="pzbtn-i">OK_button_RR<img alt="" src="webwb/zblankimage.gif" class="pzbtn-i"></div></div></div></div></button>
Below is the code at runtime for the button without action and event:
<button data-test-id="2016071901362900868668" type="button" class="Strong pzhc" data-ctl=""><div class="pzbtn-rnd"><div class="pzbtn-lft"><div class="pzbtn-rgt"><div class="pzbtn-mid" data-bindprops="innerHTML"><img src="webwb/zblankimage.gif" alt="" class="pzbtn-i">OK_button_RR<img alt="" src="webwb/zblankimage.gif" class="pzbtn-i"></div></div></div></div></button>
Hope this answers your query on data-click attribute.
Regards,
Rincy
Infosys Ltd
AU
Hi Rincy,
I did understand what data-click is. The problem is that I have to open a modal window on the click of a button (the button will not be clicked by anyone as such, it needs to be an automated click which will open the modal windows for me. Consider there is a button with no name, so, it won't appear on the UI and the button has an onclick event attached to it, I need to call that onclick event of the button to open a modal window to perform some work on the Work Object opened in the Modal Window. I have been trying many ways but unable to open it in a popup, rather it in the harness itself.
test
CN
Dear Rappai,I want to start an external Application while i Click a button , my demo is as follow:
<script language="javascript" type="text/javascript">
function Run()
{
alert("click");
try
{ var objShell=new ActiveXObject("wscript.shell");
objShell.Run("C:\\Wechat.exe");objShell=null;
} catch(e)
{alert("e"); }
}
</script>
<div class="option" style=""><button onClick="Run()" >testbuttom</button></div>
button click no reponse while I preview this page ,what should I do?
Dear Rappai,I want to start an external Application while i Click a button , my demo is as follow:
<script language="javascript" type="text/javascript">
function Run()
{
alert("click");
try
{ var objShell=new ActiveXObject("wscript.shell");
objShell.Run("C:\\Wechat.exe");objShell=null;
} catch(e)
{alert("e"); }
}
</script>
<div class="option" style=""><button onClick="Run()" >testbuttom</button></div>
button click no reponse while I preview this page ,what should I do?
Blue Rose Technologies GmbH
DE
data-eventname attribute are generated automatically whenever auto generated controls are configured with events and corresponding action.
Instead of generating event handlers on individual components, we generate these data- attributes. This way we don't need to attach the event listeners again when section refresh happens.
How does event works just by this data- attribute ?
We actually listen to events happening in the body, and when event happens on the control / target element it gets bubbled up and stops as and when it reaches the HTML body, here we have logic to extract the necessary attributes and to invoke the respective JS APIs.
Infosys Ltd
AU
Hi Satish,
My requirement is open a work object to process it in a modal window. I have been trying to use the code which gets generated as a source html and used it in the button's on click function. But i don't know why does not it work the same way as it was doing when a non custom button was used. Could you please tell me a way I can open a modal window and open a work object (open the assignments directly not the review harness of the work object) in it and allow the users to work on it. The button will be a custom one for sure.
Blue Rose Technologies GmbH
DE
If you are looking to launch a local action in modal, then you can very well use Launch -> Local action (via modal). But this doesn't mean that you can move the work object from one assignment to other assignment(via modal dialog). That is possible only using Launch -> flow in modal dialog action. Being said that your requirement is not possible to achieve within PRPC guardrails.
Pegasystems Inc.
IN
Hello Shikhar,
Create a non-auto button control like below and call a JS function on click of that.
<button id= "test" type="button" onclick="alert('Hello world!')">Click Me!</button>
On this newly created function, you can write your custom logic to call the required event.
Please let me know, if that helped!!
Regards,
Ajit
test
CN
Dear Kumar,i hope you can help me ,I want to start an external Application while i Click a button , my demo is as follow:
<script language="javascript" type="text/javascript">
function Run()
{
alert("click");
try
{ var objShell=new ActiveXObject("wscript.shell");
objShell.Run("C:\\Wechat.exe");objShell=null;
} catch(e)
{alert("e"); }
}
</script>
<div class="option" style=""><button onClick="Run()" >testbuttom</button></div>
button click no reponse while I preview this page ,what should I do?
Pegasystems Inc.
IN
Hi Shikhar,
To understand the requirement, you are trying to automate the button click without user interaction, which is not recommended
To workaround this issue, you call direct flowinmodal API as
Sample params: (You can get these params from data-click)
var args = ["NewWork", "Work-", "", "", ":event", "", "pzModalFlowTemplate"]
var oParams = [args[1], args[2], args[3], args[6] || ""];
pega.u.d.launchFlow.showFlowInModal(args[0], oParams, args[4], args.length > 5 ? args[5] : '');
I havenot tried the sample. However, it might work in your case.
NOTE:
We donot recommend internal APIs. Always, it is a best practice to have user interaction to launch the flow in modal.
Cognizant Technology Solution
US
@Shikhar -- Did you get any resolution??I am also having same issue once gadget loaded from reverse proxy ,button event is not firing .always showing same harness.