Event Handling Between Custom Lightning Components and Skuid

If you’ve created custom Lightning components separate from Skuid, it’s possible to use those components on the same Lightning page as a Skuid page component and have the two communicate with each other through events. To do so, two bits of code are needed on the custom Lightning component:

  • Event handler logic—which can listen for skuid:event and parse the information
  • Event publishing logic—to properly publish events that Skuid can parse

Note

The sections below offer the sample code to add to Lightning components, but this topic does assume basic familiarity with handling events in Lightning and event-triggered action sequences in Skuid.

Event Handling

With the proper scope established, events published by Skuid use the skuid:event identifier for use in Lightning Experience. To access this events data, the first step is to add an aura:handler that points to skuid:event:

1
<aura:handler event= "skuid:event" action="{!c.handleSkuidEvent}"/>

With this handler in place, now place the basic logic for parsing the data held within the event:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
handleSkuidEvent : function(component, event, helper) {
    var eventName = event.getParam("name"); // Get the event name published by Skuid
    if (eventName === "event.name" || eventName === "another.event.name") { // Determine if these are noteworthy events. Modify as needed.
        var eventChannel = event.getParam("channel"); // If using event channels, check which channel the event is published on
        var eventData = event.getParam("data"); // Get the event's parameters published by Skuid
          if (eventData) {
            eventData = JSON.parse(eventData); // Parsing the data for use
            // From here, assign your data to variables for use within the Lightning component
        }
    }
}

The specifics of how to parse the data, and how to use that data within other areas of the components, are up to you.

Publishing events to Skuid

To send information back to Skuid pages, implement code that does the following:

  1. Creates a skuid:event event
  2. (Optional) Sets any relevant data parameters as a JSON object.
  3. Sets the name parameter for the event
    • If present, stringify your data parameters JSON object
  4. Publishes—”fires”—the event.

To illustrate how this looks in code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var evt = $A.get("e.skuid:event"); // Create a reference to an event object to publish in Lightning ecosystem
var orderData = {  // Build an object of data to send
  "orderName": orderName,
  "orderAmount": orderAmount,
};
evt.setParams({
  "name": "order.created",  // Set the name of the event, which Skuid event-triggered action sequences should listen to
  "data": JSON.stringify(orderData) // Stringify any data parameters
});
evt.fire(); // Fire the event for all subscribed Skuid pages

If the event is not sending any data, then the process is simpler:

1
2
3
var evt = $A.get("e.skuid:event"); // Create the event reference
evt.setParams({"name": "my.event.name"}); // Set the event name
evt.fire(); // Fire the event

Of course these events will go “unheard” if no event-triggered action sequences are configured within the Skuid page.