Skuid and Aura¶
Aura is the HTML-esque framework originally used for Salesforce’s Lightning components. It’s primary use in regards to Skuid is in setting the proper proper event handling between custom Lightning components and Skuid pages.
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 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 thedata, 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:
- Creates a
skuid:event
event - (Optional) Sets any relevant data parameters as a JSON object.
- Sets the name parameter for the event
- If present, stringify your data parameters JSON object
- 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 that the action sequence is expecting
"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 action sequences are configured to listen for them within the Skuid page.