Capturing Client-side events

What can you capture from an event:

  • name: the name of the event occurring.
  • payload: the payload of the event occurring.
  • albumId: the album Id of the album that triggered the event.
  • componentId: the component Id of the component that triggered the event

SharinPix Events in a Lightning Component

SharinPix Events emitted from a SharinPix Album( displayed within a Lightning Component) can be captured using the code snippet below.

  • The markup of the Lightning component.
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="String" />
    <sharinpix:SharinPix aura:id="sharinpix-cmp" AlbumId="{! v.recordId }" height="500px" />
    <aura:handler event="sharinpix:Event" action="{!c.handleEvent}" />
</aura:component>
  • The client-side controller of the Lightning Component.
({
    handleEvent : function(component, event, helper) {
        if(event.getSource().getLocalId() == "sharinpix-cmp") {
            console.log("Event name: ", event.getParam("name"));
            console.log("Payload: ", event.getParam("payload"));
        }
    }
})

As seen from the above code snippet, the name of the emitted event is detected using event.getParam("name") and the event's payload is captured using event.getParam("payload").

SharinPix Events in a Visualforce Component

SharinPix Events emitted from a SharinPix Album( displayed within a Visualforce Component) can be captured using the code snippet below.

<apex:page StandardController="Account" standardStylesheets="false">
    <sharinpix:SharinPix parameters="{'Id' : '{! $CurrentPage.Parameters.Id }', 'abilities':{ '{! $CurrentPage.Parameters.Id }':{'Access':{'image_delete':true,'image_upload':true,'image_list':true,'see':true}}}}" 
    height="500px"/>
    <script>
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        eventer(messageEvent, function(e) {
            if(e.origin !== "https://app.sharinpix.com") return;
            console.log(e.data.name);
        });
    </script>
</apex:page>

SharinPix Events in a Canvas App

SharinPix Events emitted from a SharinPix Album( displayed within a Canvas App) can be captured using the code snippet below.

<apex:page StandardController="Account">
    <sharinpix:SharinPix parameters="{'Id' : '{! $CurrentPage.Parameters.Id }', 'abilities':{ '{! $CurrentPage.Parameters.Id }':{'Access':{'image_delete':true,'image_upload':true,'image_list':true,'see':true}}}}" 
        height="500px"/>
    <script>
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        eventer(messageEvent, function(e) {
            if(e.origin !== "https://app.sharinpix.com") return;
            console.log(e.data.name);
        });
    </script>
</apex:page>

After performing a specific action on the SharinPix Album, the name of the event will be output onto the browser's console:

  • The name of the event is accessed with e.data.name.
  • The payload of the event is accessed with e.data.payload.

Info: The payload of the event contains useful information relative to the action being performed on the SharinPix Album.