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.
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
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
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
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, …
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
26. Track: Developers
#CNX14
SOQL
• Salesforce Object Query language
• Similar to SQL
• Streamlined syntax to traverse object relationships
• Built into Apex
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;
}
}
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
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}
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
56. Track: Developers
#CNX14
Email
Templates
Embedded in Page
Layouts
Generate PDFs
Custom Tabs
Mobile
Interfaces
Page Overrides
Where can I use Visualforce?
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>
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
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
Notas do Editor
They should create a brand new DE org if they have not done so recently. They should not use a Trial, Sandbox or Production org.
Emphasize our DE orgs are free and do not expire (they are not product trials)