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. **