Running Your Slide Presentations in the Salesforce1 App

For the last few years, I’ve mostly been using HTML slides instead of Keynote or Powerpoint. I’ve also been doing a lot of Salesforce1 presentations lately, and it occurred to me that I could take my HTML slides to the next level by running them from within the Salesforce1 app. That way I can demonstrate Salesforce1 from within Salesforce1 without constantly switching context. Another and more important benefit is that because the slides are running inside a Salesforce session, they can incorporate “live” Salesforce data, dashboards, etc.

To enable this, I created a simple presentation micro-framework that I called Keypoint1. Keypoint1 is a modified version of the generic Keypoint library I built a few months ago. Keypoint1 is running inside a Visualforce page as a single page application. It is aware of the Salesforce session, and it can leverage ForceTK to display “live” Salesforce data in your presentations. I also made Keypoint1 responsive: you can run your presentations on your phone or on your iPad in the Salesforce1 app, or simply in your browser as a regular Visualforce page.

I created a sample presentation to show the features of Keypoint1. Watch the video below:

Installing the sample presentation

I created an unmanaged package to make it easy to install the sample presentation in your own org. It is available here: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000XvJh.

Install the package and load the “Keypoint” Visualforce page. To run it in Salesforce1, just create a tab for the Keypoint Visualforce page.

Creating your own presentations

  1. Get the code from GitHub here.
  2. Modify index.html with your own slides and test your presentation by opening index.html in your browser.
  3. When you are happy with your presentation, zip up the four directories that make up your presentation (assets, images, js, and lib) and rename the zip file “slides.zip”.
  4. Upload slides.zip as a Static Resource named “slides”.
  5. Create a new Visualforce page.
  6. Cut and paste the content of template.html in your new VF page.
  7. Copy the content of the HTML that’s inside the “slides” div in index.html to the “slides” div in your VF page.
  8. Open your VF page in a browser.
You can name the zip file and the static resource whatever you want. Just make sure that you reference your static resource with the right name in your Visualforce page.

Note that the img tags in index.html use “data-src” instead of “src”. Keypoint1 will automatically create the appropriate src value by prepending the value of data-src with a path to the static resource folder. That way you do this:

<img data-src="images/myimage.jpg"/>

instead of this:

<img src="{!URLFOR($Resource.slides, 'images/myimage.jpg')}"/>

For this to work, you need to provide the base url once, in the “slides” container div:

<div id="slides" data-base-url="{!URLFOR($Resource.slides, '/')}">

Make sure you specify the name of the right static resource.

8 Responses to Running Your Slide Presentations in the Salesforce1 App

  1. Wes May 9, 2014 at 5:26 pm #

    Do you have this code posted on github? the link seemingly is linking to the same page???

    • Christophe Coenraets May 9, 2014 at 10:22 pm #

      Link fixed. Thanks for catching it.

  2. Joe May 21, 2014 at 1:10 am #

    Thanks for this … working on a project that can use this, is it possible to use autoslide and loop for a set of slides?

    • Ben May 27, 2014 at 12:51 pm #

      I am interested in an autoslider version of this as well.

  3. denny.. June 2, 2014 at 3:26 pm #

    i downloaded this code & create its apk file using build phonegap.. now when i run it in my android phone it shows an alert “Error: {“ready state” :”0″,responseText : “”, status: “0”,status Text:”error”}”,
    & if i proceed further then all the page revolving on the page …

Trackbacks/Pingbacks

  1. RevealJS meets Force.com - Developer Relations - May 12, 2014

    […] you’re thinking you just saw something an awful lot like this, you may have seen my colleague Christophe Coenraets blog about his HTML5-based presentation library Keypoint1. Funnily enough, Christophe and I each were working on these in parallel. Great minds think […]

  2. RevealJS meets Force.com - SkyOffice Consulting | SkyOffice Consulting - May 12, 2014

    […] you’re thinking you just saw something an awful lot like this, you may have seen my colleague Christophe Coenraets blog about his HTML5-based presentation library Keypoint1. Funnily enough, Christophe and I each were working on these in parallel. Great minds think […]

  3. May Meetup (now June) – AngularJS, Ionic, Heroku Connect and RemoteObjects - June 25, 2014

    […] Blog – http://coenraets.org/blog/2014/05/running-your-slide-presentations-in-the-salesforce1-app/ […]

Leave a Reply

css.php