Cloud Everything !

Show Custom Visualforce page in Salesforce1. Setup publisher action to allow user to check-in using Salesforce1 app

1 Comment

Salesforce1 provides collaboration on the move ! With Salesforce1 app any important detail or feedback on any product can be provided using chatter. Chatter allows ability to ask question, respond to question or any other information/document which should be share with other users. But sharing of user location is not so easy and natively not supported in chatter.

But in Salesforce1 app there is a possibility why which user can check-in and share some detail using following custom “Check-In” app:


Salesforce1 compatible visualforce page:

<apex:page id="checkin" standardController="Account" extensions="CheckInController" showheader="false" doctype="html-5.0" standardStylesheets="false">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<apex:includeScript value="{!$Resource.JQuery1110}"/>
<apex:includeScript value="{!URLFOR($Resource.Bootstrap311, 'js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Bootstrap311, 'css/bootstrap.min.css')}"/>
.margin {margin-top:2px;margin-bottom:2px;}

<apex:form id="form">
  <div class="container-fluid">
    <div class="row">
      <apex:outputpanel id="error" styleclass="bg-info text-primary col-md-12 col-xs-12" layout="block">
    <div class="row">
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span></span>
        <apex:inputTextArea value="{!text}" styleclass="form-control col-md-12" html-placeholder="Share..." rows="5"/>

    <div class="row margin">
        <button onclick="geoFindMe();" class="btn margin col-md-6 col-xs-6" type="button">Reset</button>
        <apex:commandbutton rerender="error" onclick="" action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6" oncomplete="$('.loading').css({ 'display':'none'});"></apex:commandbutton>
   <apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>

<apex:outputpanel id="info">
  <div id="out" class="bg-success"></div>


$(document).ready(function() {
  if ("geolocation" in navigator) {
    console.log('Geolocation available');
  } else {
    alert('Geolocation un-available');
    $('<div><span style="position:absolute;display:block;left:45%;top:50%;color:white">Saving...</div>').prependTo(document.body);
  $('.loading').css({ "position":"absolute",
                      "background-color":"rgba(0, 0, 0, 0.72)"} );

function geoFindMe() {
  var output = document.getElementById("out");


  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";

function success(position) {
  var latitude  = position.coords.latitude;
  var longitude = position.coords.longitude;

  var img = '<img width="100%" src="' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';


 function error() {
   $(".bg-info").html("Unable to retrieve your location");


 navigator.geolocation.getCurrentPosition(success, error);

Simple Apex Controller:

public with sharing class CheckInController
  // Geo location: longitude and latitude
  public String geolocation {get; set;}
  // Post text
  public String text {get; set;}
  // Error or Info
  public String error {get;set;}

  public CheckInController(ApexPages.StandardController con)
     // TO DO : In case of Standard pages

  // Post to chatter with geolocation
  public void checkIn()
     // Check if geolocation found or not
     if(geolocation==null || geolocation.length()&lt;8)
        error = 'Unable to retreive location';

     if(text == null || text.trim().length()==0)
        error = 'Nothing to post';

        // Post to chatter of current user
        FeedItem post = new FeedItem();
        post.ParentId = Userinfo.getUserId();
        post.Body = text;
        post.Type = 'LinkPost';
        post.LinkUrl = '' + geolocation;
        insert post;
        error = 'Posted Successfully !';
     catch(Exception ex)
        error = ex.getMessage();
Salesforce1 App

Salesforce1 App


In Chatter you will see:

Screen Shot 2014-03-23 at 11.28.54 pm


Author: Ashwani

Senior Lead Salesforce Consultant and Developer For any question please contact us at

One thought on “Show Custom Visualforce page in Salesforce1. Setup publisher action to allow user to check-in using Salesforce1 app

  1. Pingback: Salesforce1 : Share photo directly to Chatter from mobile camera using Salesforce1 App | intmist | Cloud | Salesforce

Leave a Reply

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

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

Facebook photo

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

Connecting to %s