Force.com can automatically generate user interfaces, but in some cases you might want to build a more custom UI. Join us to learn about Visualforce, the component-based UI framework that lets you build attractive, dynamic, reusable user interfaces. We'll cover code walk-throughs, common use cases, leveraging Apex on the server side, debugging techniques, and how to utilize the component framework to make your code portable and maintainable.

1. Track: Developers
#CNX14
#CNX14
Intro to Force.com
James Ward
Platform Evangelist
@_JamesWard

2. Track: Developers
#CNX14
Salesforce1 App
Salesforce1 Platform APIs
Force.com Heroku
ExactTarget
Fuel
Sales
Cloud
Service
Cloud
Marketing
Cloud
AppExchang
e
Custom
Employee Apps
Customer &
Partner Apps
Salesforce1 Platform Services

3. Track: Developers
#CNX14
Idea
Build App
Idea
buy &
setup
hardware
install
complex
software
define user
access
build & test
security
make it
mobile &
social
setup
reporting &
analytics
build
app
Traditional Platforms
6-12 Months?
App
App

4. Track: Developers
#CNX14
Platform Services
The Fastest Path From Idea To App

5. Track: Developers
#CNX14
Salesforce: #1 Enterprise Cloud Platform
Market Share #1
Enterprise Platform #1
Magic Quadrant for
Application Platform as a Service
January, 2014 Analyst: Yefim V. Natis
This graphic was published by Gartner, Inc. as part of a larger research document and should be evaluated in the context of the entire document. The Gartner document is available upon request from Salesforce.com. Gartner does not endorse any vendor, product or service depicted in its research
publications, and does not advise technology users to select only those vendors with the highest ratings. Gartner research publications consist of the opinions of Gartner's research organization and should not be construed as statements of fact. Gartner disclaims all warranties, expressed or
implied, with respect to this research, including any warranties of merchantability or fitness for a particular purpose.

6. Track: Developers
#CNX14
Declarative Approach Programmatic Approach
Visualforce Pages
Visualforce Components
Apex Controllers
Apex Triggers
Metadata API
REST API
Bulk API
Page Layouts
Record Types
Formula Fields
Validation Rules
Workflows and Approvals
Custom Objects
Custom Fields
Relationships
User
Interface
Business
Logic
Data
Model

7. Track: Developers
#CNX14
Free Developer Environment
http://developer.salesforce.com/signup

8. Declarative Data Model

9. Track: Developers
#CNX14
Salesforce Objects
• Similar to Tables (with more metadata)
• Standard objects out-of-the-box
• Account, Contact, Opportunity, …
• You can add custom fields to standard objects
• Rating__c, Twitter__c, …
• You can create custom objects
• i.e. Speaker__c, Session__c, Hotel__c
• Custom objects have standard fields
• Id, Owner, LastModifiedDate, LastModifiedBy, …

10. Track: Developers
#CNX14
Rich Data Types
• Auto Number
• Formula
• Roll-Up Summary
• Lookup
• Master-Detail
• Checkbox
• Currency
• Date
• Picklist (multi select)
• Text
• Text Area
• Text Area (Long)
• Text Area (Rich)
• Text (Encrypted)
• URL
 Date/Time
 Email
 Geolocation
 Number
 Percent
 Phone
 Picklist

11. Track: Developers
#CNX14
Modeling One-to-Many Relationships
An expense has one
expense report
An expense report has
many expenses

12. Track: Developers
#CNX14
Modeling Many-to-Many Relationships
A speaker can have
many session
assignments
A session can have
many speaker
assignments

13. Track: Developers
#CNX14
Id
• All objects are given an Id field
• Globally unique Id is assigned at record creation
• "Primary key" used to access records

14. Track: Developers
#CNX14
Record Name
• Human readable / logical identifier
• Text or Auto Number ("Intro to Apex" or SP-00002)
• Uniqueness not enforced

15. Track: Developers
#CNX14
When you create an Object, you get…
• A CRUD user interface
• Instant Mobile App access (Salesforce1)
• A REST API
• Rich Metadata
• Indexed search

16. Declarative Apps

17. Track: Developers
#CNX14
What's an Application?
• Group of tabs that provide easy access to related features
• Salesforce comes with standards apps
• Sales, Call Center, Marketing, …
• You can create your own apps
• Tabs can be:
• Object pages, Visualforce pages, Canvas app

18. Track: Developers
#CNX14
Page Layouts
Let you customize all aspects of the layout, related lists, …

19. Programming with Apex

20. Track: Developers
#CNX14
What is Apex?
• Salesforce platform language
• Cloud based compiling, debugging and unit testing
• Object-oriented
• Strongly typed
• Classes and Interfaces
• Similar to Java

21. Track: Developers
#CNX14
Apex and Java
Same
• Primitive data types
• Flow control (if, for, while, …)
• Exception handling
• Collections: Lists, Sets, …
Different
• Case insensitive
• Single quote strings: 'Joe'
• Id data type
• Built-in support for data access

22. Track: Developers
#CNX14
Apex Class
public class MortgageCalculator {
public Double amount { get; set; }
public Double rate { get; set; }
public Integer years { get; set; }
public Double calculateMonthlyPayment() {
Integer months = years * 12;
Double monthlyRate = rate / (12 * 100);
return amount * (monthlyRate/
(1 - Math.pow(1 + monthlyRate, -months)));
}
}

23. Track: Developers
#CNX14
Development Tools
• Developer Console
• Force.com IDE (Eclipse Plugin)
• Mavens Mate (Sublime Plugin)
• Force CLI

24. Track: Developers
#CNX14
Developer Console
• Browser Based IDE
• Create Classes, Triggers, Pages
• Execute Apex Anonymously
• Execute SOQL Queries
• Run Unit Tests
• Review Debug Logs

25. Data Access with SOQL and
DML

26. Track: Developers
#CNX14
SOQL
• Salesforce Object Query language
• Similar to SQL
• Streamlined syntax to traverse object relationships
• Built into Apex

27. Track: Developers
#CNX14
SELECT Id, Name, Phone
FROM Contact

28. Track: Developers
#CNX14
SELECT Id, Name, Phone
FROM Contact
WHERE Phone <> null

29. Track: Developers
#CNX14
SELECT Id, Name, Phone
FROM Contact
WHERE Phone <> null
AND Name LIKE '%rose%'

30. Track: Developers
#CNX14
SELECT Id, Name, Phone
FROM Contact
WHERE Phone <> null
AND Name LIKE '%rose%'
ORDER BY Name

31. Track: Developers
#CNX14
SELECT Id, Name, Phone, Account.Name
FROM Contact
WHERE Phone <> null
AND Name LIKE '%rose%'
ORDER BY Name

32. Track: Developers
#CNX14
SELECT Id, Name, Phone, Account.Name
FROM Contact
WHERE Phone <> null
AND Name LIKE '%rose%'
ORDER BY Name
LIMIT 50

33. Track: Developers
#CNX14
Executing SOQL in the Developer Console

34. Track: Developers
#CNX14
Inlining SOQL in Apex
Integer i = [select count() from Session__c];

35. Track: Developers
#CNX14
Inlining SOQL in Apex
String level = 'Advanced';
List<Session__c> sessions =
[SELECT Name, Level__c FROM Session__c
WHERE Level__c = :level];

36. Track: Developers
#CNX14
Inlining SOQL in Apex
List<String> levels = new List<String>();
levels.add('Intermediate');
levels.add('Advanced');
List<Session__c> sessions =
[SELECT Name, Level__c FROM Session__c
WHERE Level__c IN :levels];

37. Track: Developers
#CNX14
Inlining SOQL in Apex
for (Speaker__c s : [select email__c from Speaker__c])
{
System.debug(s.email__c);
}

38. Track: Developers
#CNX14
insert
Session__c session = new Session__c();
session.name = 'Apex 101';
session.level__c = 'Beginner';
insert session;

39. Track: Developers
#CNX14
insert
Session__c session = new Session__c(
name = 'Apex 201',
level__c = 'Intermediate'
);
insert session;

40. Track: Developers
#CNX14
update
String oldName = 'Apex 101';
String newName = 'Apex for Beginners';
Session__c session =
[SELECT Id, Name FROM Session__c
WHERE Name=:oldName];
session.name = newName;
update session;

41. Track: Developers
#CNX14
delete
String name = 'Testing 501';
Session__c session =
SELECT Name FROM Session__c
WHERE Name=:name];
delete session;

42. Apex Triggers

43. Track: Developers
#CNX14
Trigger
• Apex code executed on database events
• Before or after:
• Insert
• Update
• Delete
• Undelete

44. Track: Developers
#CNX14
Before or After?
• Before
• Update or validate values before they are saved to the database
• Example: Prevent double-booking of a speaker
• After
• Need access to values set by the database (Id, lastUpdated, …)
• Example: Send speaker confirmation email

45. Track: Developers
#CNX14
Bulk Mode
• Trigger API designed to support bulk operations
• Data Import, Bulk API, etc.
• Triggers work on bulk of records, not single records
• Context variables provide access to data:
• Trigger.old and Trigger.new (List)
• Trigger.oldMap and Trigger.newMap (Map)

46. Track: Developers
#CNX14
Example
Trigger on Account (after insert) {
for (Account account : Trigger.new) {
Case case = new Case();
case.Subject = 'Mail Welcome Kit';
case.Account.Id = account.Id;
insert case;
}
}

47. Visualforce Pages

48. Track: Developers
#CNX14
Model-View-Controller
Model
Data + Rules
Controller
View-Model
interactions
View
UI code
 Separation of concerns
– No data access code in view
– No view code in controller
 Benefits
– Minimize impact of changes
– More reusable components

49. Track: Developers
#CNX14
Model-View-Controller in Salesforce
View
• Metadata
• Standard Pages
• Visualforce Pages
• External apps
Controller
• Standard Controllers
• Controller Extensions
• Custom Controllers
(all Apex)
Model
• Metadata
• Objects
• Triggers (Apex)
• Classes (Apex)

50. Track: Developers
#CNX14
What's a Visualforce Page?
• The View in MVC architecture
• HTML page with tags executed at the server-side to generate dynamic content
• Similar to JSP and ASP
• Can leverage JavaScript and CSS libraries

51. Track: Developers
#CNX14
Expression Language
• Anything inside of {! } is evaluated as an expression
• Same expression language as Formulas
• Same global variables are available. For example:
• {!$User.FirstName} {!$User.LastName}

52. Track: Developers
#CNX14
Example 1
<apex:page>
<h1>Hello, {!$User.FirstName}</h1>
</apex:page>

53. Track: Developers
#CNX14
Example 2
<apex:page standardController="Contact">
<apex:form>
Standard controller
object
<apex:inputField value="{!contact.firstname}"/>
<apex:inputField value="{!contact.lastname}"/>
<apex:commandButton action="{!save}" value="Save"/>
</apex:form>
</apex:page>
Function in
standard controller

54. Track: Developers
#CNX14
Standard Controller
• A standard controller is available for all objects
• You don't have to write it!
• Provides standard CRUD operations
• Create, Update, Delete, Field Access, etc.
• Can be extended with more capabilities
• Uses id in URL to access object

55. Track: Developers
#CNX14
Component Library
• Presentation tags
– <apex:pageBlock title="My Account Contacts">
• Fine grained data tags
• <apex:outputField value="{!contact.firstname}">
• <apex:inputField value="{!contact.firstname}">
• Coarse grained data tags
• <apex:detail>
• <apex:pageBlockTable>
• Action tags
• <apex:commandButton action="{!save}" >

56. Track: Developers
#CNX14
Email
Templates
Embedded in Page
Layouts
Generate PDFs
Custom Tabs
Mobile
Interfaces
Page Overrides
Where can I use Visualforce?

57. Apex Controller Extensions

58. Track: Developers
#CNX14
Custom Controllers
• Custom class written in Apex
• Can override standard behavior
• Can add new capabilities

59. Track: Developers
#CNX14
Defining a Controller Extension
<apex:page standardController="Speaker__c"
extensions="SpeakerCtrlExt">
Provides basic
CRUD
Overrides standard
actions and/or provide
additional capabilities

60. Track: Developers
#CNX14
Anatomy of a Controller Extension
public class SpeakerCtrlExt {
private final Speaker__c speaker;
private ApexPages.StandardController stdController;
public SpeakerCtrlExt (ApexPages.StandardController ctrl) {
this.stdController = ctrl;
this.speaker = (Speaker__c)ctrl.getRecord();
}
// method overrides
// custom methods
}

61. JavaScript in Visualforce

62. Track: Developers
#CNX14
Why JavaScript?
• Build Engaging User Experiences
• Leverage JavaScript Libraries
• Build Custom Applications

63. Track: Developers
#CNX14
JavaScript in Visualforce Pages
Visualforce Page
JavaScript Remoting
Remote Objects
(REST)

64. Track: Developers
#CNX14
Examples

65. Track: Developers
#CNX14
Using JavaScript and CSS Libraries
• Hosted elsewhere
<script src="https://maps.googleapis.com/maps/api/js"></script>
• Hosted in Salesforce
• Upload individual file or Zip file as Static Resource
• Reference asset using special tags

66. Track: Developers
#CNX14
Referencing a Static Resource
// Single file
<apex:includeScript value="{!$Resource.jquery}"/>
<apex:image url="{!$Resource.myLogo}"/>
// ZIP file
<apex:includeScript value="{!URLFOR($Resource.MyApp, 'js/app.js')}"/>
<apex:image url="{!URLFOR($Resource.MyApp, 'img/logo.jpg')}/>
<link href="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.css')}" rel="stylesheet"/>

67. Track: Developers
#CNX14
JavaScript Remoting - Server-Side
global with sharing class HotelRemoter {
@RemoteAction
global static List<Hotel__c> findAll() {
return [SELECT Id,
Name,
Location__Latitude__s,
Location__Longitude__s
FROM Hotel__c];
}
}

68. Track: Developers
#CNX14
"global with sharing"?
• global
• Available from outside of the application
• with sharing
• Run code with current user permissions. (Apex code runs in system context
by default -- with access to all objects and fields)

69. Track: Developers
#CNX14
JavaScript Remoting - Visualforce Page
<script>
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.HotelRemoter.findAll}',
function (result, event) {
if (event.status) {
for (var i = 0; i < result.length; i++) {
var lat = result[i].Location__Latitude__s;
var lng = result[i].Location__Longitude__s;
addMarker(lat, lng);
}
} else {
alert(event.message);
}
}
);
</script>

70. REST APIs

71. Track: Developers
#CNX14
When?
• Get Salesforce data from outside Salesforce
• Integrate Salesforce in existing apps
• Build consumer apps
• Device integration (Internet of Things)

72. Track: Developers
#CNX14
Mobile SDK Example
OAuth
REST APIs

73. Track: Developers
#CNX14
Libraries
• ForceTK
• Salesforce REST API Toolkit
• Nforce
• node.js a REST API wrapper
• ngForce
• Visualforce Remoting integration in AngularJS
• JSForce

74. Track: Developers
#CNX14
Take the after-session survey!
Take the Survey in
the Connections
2014 Mobile App
Join the
Conversation!
#CNX1
4
$50
Starbucks
Gift Card

75. Track: Developers
#CNX14

76. Track: Developers
#CNX14
Questions?

77. Track: Developers
#CNX14
CUSTOMER JOURNEY
SHOWCASE
MARKETING
THOUGHT LEADERS
EMAIL MARKETING PRODUCT STRATEGY
& ROADMAP
PERSONAL
TRANSFORMATION
& GROWTH
SOCIAL MARKETING MOBILE & WEB
MARKETING
DEVELOPERS HANDS-ON
TRAINING
INDUSTRY
TRENDSETTERS
CREATIVITY &
INNOVATION
SALESFORCE FOR
MARKETERS
ROUNDTABLES