Skip to content

Instantly share code, notes, and snippets.

@jeffdonthemic
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffdonthemic/ed2b783bd4add418adc6 to your computer and use it in GitHub Desktop.
Save jeffdonthemic/ed2b783bd4add418adc6 to your computer and use it in GitHub Desktop.
'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!');
});
}
});
'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 = {}
});
}
});
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
'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: '/'});
}]);
<!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>
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
<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>
<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>
'use strict';
var app = angular.module('app');
app.factory('Account', ['$resource', function($resource) {
return $resource('/accounts/:id', {id: '@id'}, {update: {method: "PUT"}});
}]);
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