Last active
August 29, 2015 14:13
-
-
Save jeffdonthemic/ed2b783bd4add418adc6 to your computer and use it in GitHub Desktop.
Sample code for blog post http://blog.jeffdouglas.com/2013/06/10/angularjs-and-salesforce-com-tutorial from repo https://github.com/jeffdonthemic/angular-salesforce-demo.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var app = angular.module('app'); | |
app.controller('AccountDetailCtrl', function($scope, $routeParams, Account) { | |
$scope.account = Account.get({id:$routeParams.id}); | |
$scope.mode = 'display'; | |
$scope.edit = function() { | |
$scope.mode = 'edit'; | |
} | |
$scope.cancel = function() { | |
$scope.mode = 'display'; | |
} | |
$scope.update = function() { | |
$scope.mode = 'display'; | |
Account.update({id:$routeParams.id}, $scope.account, function() { | |
// performs some operation when the callback completes like error checking | |
console.log('Callback completed!'); | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var app = angular.module('app'); | |
app.controller('AccountListCtrl', function($scope, Account) { | |
$scope.accounts = Account.query(); | |
$scope.add = function() { | |
var account = new Account({name:$scope.newAccount.name}); | |
account.$save(function() { | |
$scope.accounts.push(account) | |
$scope.newAccount = {} | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class AccountsController < ApplicationController | |
respond_to :json | |
def index | |
# simply return the query as json | |
respond_with client.query('select id, name, type, billingstate from account | |
order by lastmodifieddate desc limit 5') | |
end | |
def show | |
# return the requested record as json | |
respond_with client.query("select id, name, type, billingstate from account | |
where id = '#{params[:id]}'").first | |
end | |
# create a new record in salesforce. Use the following command for testing: | |
# curl -v -H "Content-type: application/json" -X POST -d '{"name": "some test name"}' http://localhost:3000/accounts | |
def create | |
# create the account in salesforce and get the new id | |
id = client.create!('Account', Name: params[:name], Type: 'Prospect', BillingState: 'NY') | |
# query for the newly created account | |
account = client.query("select id, name, type from account where id = '#{id}'").first | |
# return the resource so it can be added to the collection | |
respond_with(account, :status => :created, :location => account_url(account)) | |
end | |
def update | |
# update only two of the fields in salesforce and return the record | |
client.update!('Account', Id: params[:account][:Id], Name: params[:account][:Name], | |
Type: params[:account][:Type]) | |
respond_with client.query("select id, name, type, billingstate from account | |
where id ='#{params[:account][:Id]}'") | |
end | |
private | |
# define the restforce client and authenticate | |
def client | |
client = Restforce.new :username => ENV['SFDC_USERNAME'], | |
:password => ENV['SFDC_PASSWORD'], | |
:client_id => ENV['SFDC_CLIENT_ID'], | |
:client_secret => ENV['SFDC_CLIENT_SECRET'], | |
:host => ENV['SFDC_HOST'] | |
client.authenticate! | |
client | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
/* | |
This is our main launch point from Angular. We'll put anything to do with the | |
general well being of our app in this file. For now it'll basically just contain | |
the routing information. | |
Our module will be called 'app'. | |
*/ | |
angular.module('app', ['ngResource']) | |
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { | |
$routeProvider | |
.when('/', { | |
controller: 'AccountListCtrl', | |
templateUrl: '/assets/angular/templates/index.html' | |
}) | |
.when('/accounts/:id', { | |
controller: 'AccountDetailCtrl', | |
templateUrl: '/assets/angular/templates/details.html' | |
}) | |
.otherwise({redirectTo: '/'}); | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" ng-app="app"> | |
<head> | |
<title>AngularJS Salesforce Demo</title> | |
<%= stylesheet_link_tag "application", :media => "all" %> | |
<%= javascript_include_tag "application" %> | |
<%= csrf_meta_tags %> | |
</head> | |
<body> | |
<div class="container"> | |
<div ng-view="ng-view"></div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class ApplicationController < ActionController::Base | |
protect_from_forgery | |
# We'll just use this as a launch point for our App | |
def index | |
# Render just the layout since this application is Angular driven | |
# our layout/application has all the angular logic and our controllers | |
# have no views for themselves. We just need a place to launch from | |
# and this happens to be it. So we have no view (thus :nothing => true) | |
# but we still want the layout (since it has the App bootstrap code) | |
render :layout => 'application', :nothing => true | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a class="btn" href="/#" style="margin-top:15px;margin-bottom:15px"><i class="icon-home"></i> Back</a> | |
<div ng-controller="AccountDetailCtrl"> | |
<h1>{{account.Name}}</h1> | |
<span ng-show="mode == 'display'"> | |
<table class="table" style="width:50%"> | |
<tbody> | |
<tr> | |
<td width="20%">Type:</td> | |
<td>{{account.Type}}</td> | |
</tr> | |
<tr> | |
<td>State:</td> | |
<td>{{account.BillingState}}</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
</tr> | |
</tbody> | |
</table> | |
<button type="button" class="btn btn-primary" ng-click="edit(account)">Edit Account</button> | |
</span> | |
<span ng-show="mode == 'edit'"> | |
<form name="editForm" ng-submit="update()"> | |
<fieldset> | |
<legend>Edit Account</legend> | |
<label>Account name</label> | |
<input type="text" ng-model="account.Name" required><br/> | |
<label>Type</label> | |
<input type="text" ng-model="account.Type" required><br/> | |
<button type="submit" class="btn btn-primary">Submit</button> | |
<button type="button" class="btn" ng-click="cancel()">Cancel</button> | |
</fieldset> | |
</form> | |
</span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>AngularJS Demo with Salesforce.com</h1> | |
<span class="lead" style="padding-bottom:10px">By Jeff Douglas (<a href="http://www.twitter.com/jeffdonthemic" target="_blank">@jeffdonthemic</a>). You can find the accompanying blog post at <a href="http://blog.jeffdouglas.com/?p=4800" target="_blank">blog.jeffdouglas.com</a>. This demo connects to Salesforce.com using Ruby on Rails. The application allows you to create, update and display Account records from Salesforce.com.</span> | |
<div ng-controller="AccountListCtrl"> | |
<h2>Create a New Account</h2> | |
<form name="frm" ng-submit="add()"> | |
<input type="text" class="input-xlarge" ng-model="newAccount.name" required><br/> | |
<button type="Submit" class="btn btn-primary">Add Account</button> | |
</form><br/> | |
<h2>Last 5 Modified Accounts</h2> | |
<table class="table table-striped"> | |
<thead> | |
<tr> | |
<th>Account Name</th> | |
<th>Type</th> | |
<th>State</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="account in accounts"> | |
<td><a href="#/accounts/{{account.Id}}">{{account.Name}}</a></td> | |
<td>{{account.Type}}</td> | |
<td>{{account.BillingState}}</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var app = angular.module('app'); | |
app.factory('Account', ['$resource', function($resource) { | |
return $resource('/accounts/:id', {id: '@id'}, {update: {method: "PUT"}}); | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AngularSalesforceDemo::Application.routes.draw do | |
resources :accounts | |
root to: 'application#index' | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment