Handling Events on a custom evam template

angeloorteg
Tera Expert

So I made my first custom evam component, that works great. 
Now I have two buttons that should trigger two events for the parent component to listen too.. 

I cant make it work however... 


The evam records are displayed in a dataset, on the page body I got my handled event and on the dataset I configured a declarative action event mapping... For a normal evam template it worked, for my custom one it wont...

 

I would really appreciate help...

Here is basically what I did 

https://www.servicenow.com/community/developer-articles/leveraging-zurich-s-component-builder-for-ev...

 

1 REPLY 1

Aaron _S
Mega Sage

Hey,

 

did you also add a "Page event mapping"?

 

I got it working on my side, here's all the stuff I have, hope it helps.


An EVAM Definition with a Data Source and a View Config Bundle:

aasch_0-1779999988202.pngaasch_1-1780000000921.png


The View Config Bundle has a View Config:

aasch_2-1780000108356.png

I made a new View Template, which looks like this:

aasch_11-1780000688172.png

The "my_event" event is a a new Declarative Action for the View Config I made:

aasch_3-1780000147328.png

Which looks like this:

aasch_4-1780000194603.png

The client action is a custom one I made:

aasch_5-1780000245415.png

The "Action Payload Mappings" record was automatically created iirc.

 

My Page in UI Builder looks like this:

aasch_6-1780000328218.png
It has a Data Set Component an EVAM Data Resource, which uses the definition above and a simple Client Script, which logs something to the browser console.

(The "Playbook 1" component is not important, it was for a PoC.)

The Events tab on the Page Body element looks like this:

aasch_7-1780000420567.png

I added the "Random event name" as a new Handled Event. Then I added an Event Mapping for this new Handled Event.
The mapping maps the execution of the Client Script to the Handled Event.

 

And then for the last manual step, I went into the Data Set Component's configuration to edit the "declarative action mappings":

aasch_8-1780000532900.png

aasch_10-1780000579001.png

The mapping shows that the Declarative Action "my_event" (label "My Event :-)"), which an EVAM Card is configured to fire via the View Template, is mapped to the Handled Event "Random event name" of the Page.

 

One last thing that UIB did automatically:
The Declarative Action "my_event" automatically got a "UX-addon Event Mapping" at some point:

aasch_12-1780000904851.png

If I read the data correctly, it must have happened when configuring the declarative action mapping for the Data Set:

aasch_13-1780000971173.png


Result:
This is my test Page:

aasch_14-1780001009167.png


And this is the firing Client Script, happily logging something to the browser console:

aasch_15-1780001041182.png

 

Conclusion:

The whole chain of things is - in my opinion - outrageously complicated and error prone.
If you slip up even a tiny bit, you're left completely stranded without proper documentation or help or debugging capabilities.

 

Best regards,

Aaron