Embed your Slideshare Presentation in Lightning Component

Hi! 😀

In this article, we shall see how we can embed a presentation hosted on SlideShare in a lightning component. Before we move further into the details, we must consider an important detail for our use case:

  • The SlideShare Presentation must be public i.e. it should be accessible to public users.

So let’s take a quick look at our business use-case.

Bulma is a Salesforce Administrator at Capsule Z. Capsule Z recently hired few interns. Bulma created a kickass presentation to brief the interns about Trailhead. But now, Bulma wants some way to embed the presentation in their Salesforce org, so the interns need not switch between browser tabs.

Goku is a Salesforce Developer at Capsule Z and was asked to create a lightning component to make this happen. Here’s how he did it!

Step 1: Upload the presentation on Slideshare.

Step 2: Create a Lightning Component with an Apex controller as shown:

SlideShareController.apxc:

public class SlideShareController {
    
    //Wrapper class to deserialize HttpResponse 
    public class slideShareWrapper{
        string title;
        string author_name;
        string html;
    }    
    
    @AuraEnabled
    public static string getIframeURL(string pptURL){
        
        string iframeURL;
        
        //Making api callout to the SlideShare oEmbed API endpoint.
        string SlideShareURL='https://www.slideshare.net/api/oembed/2?url='+pptURL+'&format=json';
        httpRequest request=new httpRequest();
        request.setMethod('GET');
        request.setEndpoint(SlideShareURL);
        
        http http=new http();
        httpresponse response=http.send(request);
        slideShareWrapper obj=new slideShareWrapper();
        obj=(slideShareWrapper)JSON.deserialize(response.getBody(), slideShareWrapper.class);
        
        //Extracting the source URL for iframe from the httpResponse
        string html=obj.html;
        Integer start = html.indexOf('src="')+'src="'.length();
        Integer endpoint=html.indexof('width')-2;
        iframeURL= html.substring(start, endpoint);
        
        return iframeURL;
    }
}

SlideShareComponent.cmp:

<aura:component controller="SlideShareController" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,lightning:availableForFlowScreens" access="global" >
    <!-- URL of the the SlideShare presentation -->
    <aura:attribute name="slideURL" type="string" required="true"/>
    
    <!-- URL for the Iframe source -->
    <aura:attribute name="iframeURL" type="string"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 
    <!-- Container to embed presentation -->
    <div id="container"></div>

</aura:component>

SlideShareComponentController.js:

({
    doInit : function(component, event, helper) {
		var action=component.get("c.getIframeURL");
        action.setParams({
            pptURL : component.get("v.slideURL")
        });
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                //Setting the Iframe source URL received from the Apex Controller
                component.set("v.iframeURL",response.getReturnValue());
                
                var div = document.getElementById("container");
        		
                //Creating the Iframe Element
                var x = document.createElement("iframe");
        		x.setAttribute("src", component.get("v.iframeURL"));
        		x.setAttribute("id", "pptFrame");
                x.setAttribute("width", "98%");
                x.setAttribute("height", "500px");
                x.setAttribute("scrolling", "no");
                x.setAttribute("style", "border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;");
                x.setAttribute("allowfullscreen", "allowfullscreen");
                
                //Pushing the Iframe to the div container
                div.appendChild(x);
            }
            else{
                console.log('State: '+state);
                if(state==="ERROR")
                    console.log(response.getError());
            }
        });
        $A.enqueueAction(action);
    }
})

SlideShareComponent.design:

<design:component>
    <!-- Attribute for the SlideShare presentation URL -->
    <design:attribute name="slideURL" label="Presentation Link"/>
</design:component>

Demo:

ezgif.com-video-to-gif

P.S. You can use this component in visual flow and in the communities as well. 😀

Thank you!

Advertisements

One thought on “Embed your Slideshare Presentation in Lightning Component

  1. Pingback: Switching to Lightning? Warn Your Users Now - Always a Blezard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.