Cloud Everything !


1 Comment

Salesforce1 : Share/Upload photo directly to Chatter from mobile camera using Salesforce1 App


Extending the functionality of Chatter check-in, here is the way of attaching image directly from iOS device to Salesforce Chatter feeds using iphone/android camera or photo gallery. This functionality may be announced during Dreamforce 2014

Required:

1) Jquery

2) Bootstrap

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;}
input
</style>
	<apex:form id="form">
		<div class="container-fluid">
		    <div class="row">
		    <apex:outputpanel id="info" styleclass="bg-primary text-primary col-md-12 col-xs-12" layout="block">
				{!$CurrentPage.parameters.info}
			</apex:outputpanel>
			<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>
			    	<span class="btn btn-primary margin col-md-6 col-xs-6" style="text-align:center;" onclick="$('.file1').click();">
			    	Add an Image
					</span>
				</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>  -->
					<apex:commandbutton action="{!checkin}" value="Check-In" styleclass="btn btn-success margin col-md-6 col-xs-6"></apex:commandbutton>
				</div>
			</div>
			<div class="row margin">
			    <div>
					<button onclick="geoFindMe();" class="btn margin col-md-12 col-xs-12" type="button">Reset</button>
				</div>
			</div>
		</div>
		<apex:inputHidden html-class="geoloc" id="geoloc" value="{!geolocation}"/>
		<apex:inputFile title="Add an Image" styleclass="file1" style="opacity:0;display:none;width:100%;" accept="image/*;capture=camera" value="{!image}"/>
	</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') == undefined || $('.loading').length==0)
      $('<div class="loading container-fluid"><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  = 37.769167;//position.coords.latitude;
    var longitude = -122.433137;//position.coords.longitude;
    $(".bg-info").html("");
    var img = '<img width="100%" class="img-rounded" src="https://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...");
  
  var geo_options = {
  timeout           : 27000
  };

  navigator.geolocation.getCurrentPosition(success, error);
  //var wpid = navigator.geolocation.watchPosition(success, error, geo_options);
}

</script>
</apex:page>

Apex Controller:

 

public with sharing class CheckInController
{
	public String geolocation {get; set;}
	public String text {get; set;}
	public String error {get;set;}
	public boolean isUser {get;set;}
	public transient blob image {get;set;}
	
	public CheckInController(ApexPages.StandardController con)
	{
		// TO DO : In case of Standard pages
	}
	
	// Post to chatter with geolocation
	public pagereference checkIn()
	{
		// Check if geolocation found or not
		if(geolocation==null || geolocation.length()<8)
		{
			error = 'Unable to retreive location';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		if(text == null || text.trim().length()==0)
		{
			error = 'Nothing to post';
			ApexPages.currentPage().getParameters().put('info',error);
			return Apexpages.currentpage();
		}
		try
		{
			// Post to chatter of current user
			FeedItem post = new FeedItem();
			post.ParentId = Userinfo.getUserId();
			post.Body = text;
			
			if(image!=null)
			{
				post.ContentData = image;
	         	post.ContentFileName = 'Location.jpg';
	         	post.Type = 'ContentPost';
	         	post.Body = post.Body + '\nLocation: http://maps.google.com/maps?q=' + geolocation;
			}
			else
			{
				post.Type = 'LinkPost';
				post.LinkUrl = 'http://maps.google.com/maps?q=' + geolocation;
			}
			
			insert post;
			image = null;
			post = null;
			text = '';
			geolocation = null;
			error = 'Posted Successfully !';
			ApexPages.currentPage().getParameters().put('info',error);
		}
		catch(Exception ex)
		{
			error = ex.getMessage();
		}
		return Apexpages.currentpage();
	}
}


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:

_20140323_223551

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()&lt;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

Salesforce1 App

_20140323_223624

In Chatter you will see:

Screen Shot 2014-03-23 at 11.28.54 pm