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:

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 “”.
  4. Upload 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.