Showing posts with label Event. Show all posts
Showing posts with label Event. Show all posts

Thursday, 4 April 2019

JET - ojChart context menu

JET: 6.0.0
Source: GitHub

Sometime back I had written an article - JET - custom event wrappers -  on how to add some custom information to an event raised by a component and then throw the event wrapped under your own custom event.

This article is just an extension of the same thought, which demonstrates how effectively you may use the above concept to solve your problem.

Here is the use-case:
We have an oj-chart component, which has a context-menu. Depending on the bar or pie slice which fired the context menu, we need to capture the chart data and act accordingly when the user clicks on any of the menu options.

However, the action event (on-oj-action) from oj-menu does not capture any information regarding the chart series or group.

But, oj-menu has a beforeOpen event (on-oj-before-open), which fires just before the context menu pops up and, more importantly, which captures all the data that we need.

So how do we make use of this event to solve our problem?

Step 1: Context menu fires beforeOpen event. We get chart related data from this event.
Step 2: We store the chart data in a variable.
Step 3: Context menu option click fires action event. This event is captured, the extra information is attached from the variable in step 2, and thrown again as a custom event.

This custom event now has all the data from the chart, which was captured from a different event. All we did was to combine the data from the two events.

Step 1

Step 2

Step 3

When the user finally clicks on one of the options in the context menu, we see that the chart details have now been captured in the detail part of the custom event, which were not present in the native event.


Monday, 18 February 2019

JET - custom event wrappers

JET - v6.0.0
Source: GitHub

Since the introduction of web components (formerly known as CCAs) in Oracle JET, the HTML development pattern has become quite standardized for a developer. Almost all the UI components provided by JET development team have now been converted into custom elements, with their own set of properties, methods, events, etc.

However, there are times when your business use-case may not be sufficiently fulfilled by the components provided by default, and you may need to stretch them. One such recent use case was to return some extra information from an event raised by a JET custom element.

To demonstrate this use-case, I would use an oj-chart and its corresponding oj-drill event. When drilling is on, the on-oj-drill event handler provides us with an event object, whose detail section gives us all the information about the selected bar or pie section.

To solve the problem of adding extra information to the event, we wrapped up oj-chart inside our own web component, and added a wrapper around the on-oj-drill event to throw our own event.

The original element - oj-chart - throws a on-oj-drill event when the pie slice is clicked. The wrapper web component - hr-chart -  intercepts this event, adds some extra information, and throws a new CustomEvent - on-drill-down.

When the custom wrapper event is printed on the console, we see the desired custom information, along with the original information passed on by the JET element.

A more practical example of this feature has been explained in this blog.