Cloud Everything !

1 Comment

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

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