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

March 23, 2014 by Ashwani 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')}"/>
<style>
.margin {margin-top:2px;margin-bottom:2px;}
</style>

<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">
        {!error}
      </apex:outputpanel>
    </div>
    <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>
    </div>

    <div class="row margin">
      <div>
        <button onclick="geoFindMe();" class="btn margin col-md-6 col-xs-6" type="button">Reset</button>
      </div>
      <div>
        <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>
      </div>
    </div>
   </div>
   <apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>
</apex:form>

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

<script>

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

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

  $(".bg-info").html("");

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

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

  var img = '<img width="100%" src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:A%7C' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';

  $('.geoloc').val(latitude+','+longitude);
  output.innerHTML=img;
  $(".bg-info").html("");
};

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

 $(".bg-info").html("Locating...");
 $(".bg-success").html("Locating...");

 navigator.geolocation.getCurrentPosition(success, error);
}
</script>
</apex:page>

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()<8)
     {
        error = 'Unable to retreive location';
        return;
     }

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

     try
     {
        // Post to chatter of current user
        FeedItem post = new FeedItem();
        post.ParentId = Userinfo.getUserId();
        post.Body = text;
        post.Type = 'LinkPost';
        post.LinkUrl = 'http://maps.google.com/maps?q=' + geolocation;
        insert post;
        error = 'Posted Successfully !';
     }
     catch(Exception ex)
     {
        error = ex.getMessage();
     }
  }
}
Salesforce1 App

In Chatter you will see:

Advertisement