Salesforce1 Developer Cheat Sheet

Overview Visualforce Pages on Records

Salesforce1 is a mobile app development platform for everyone. Designed for scale with Visualforce pages added to an object’s page layout display on the record details page.
open APIs for extensibility and integration, and powerful developer tools, there’s no limit to Unlike mobile cards, you can control the Visualforce element’s placement on the
what you can build on the platform. Salesforce1’s flexible development models enable every Salesforce1 record details page, putting fields and other record details above and below it,
user to create custom apps backed by mobile back-end services and a unique, yet familiar, by changing its placement on the object’s page layout. Visualforce pages added this way
mobile user experience. ISVs can develop apps that take advantage of advanced packaging follow the same rules for ordering that fields and other elements do.
and version management controls, complete enterprise marketplace capabilities with the
AppExchange, and feed-first discovery of their apps within the Salesforce1 Platform. 1. The record highlights header displays
when a record is loaded, but can be
Installation, Administration, scrolled up and off the screen by the
user. When on screen, it’s 158 pixels
and Point-and-Click Development tall on all devices, and takes the full 1
width of the screen. You can’t control
For installation steps, mobile app administration, and development using point-and-click the display of the record highlights.
tools, see the Salesforce1 Mobile Admin Cheat Sheet or the Salesforce1 App Admin Guide.
2. Record actions and details,
automatically generated by
Visualforce Pages in Mobile Salesforce1. 2
You can access Visualforce pages from the following areas of the mobile app; each area is 3. A Visualforce page added to the
optimized for a specific purpose: object’s page layout. 4

• Navigation Menu — For pages that aren’t related to other objects or that require a full 4. Set the width to 100%; the element
3
screen, add the page to the navigation menu, or as a global action in the publisher. sizes automatically, minus some
padding on either side.
• Record Page — Pages that appear within the context of a record should go on the
object’s page layout. 5. Control the height of the Visualforce 5
page’s area by setting the height of
• Related Items — If you want a Visualforce page to appear on the related information the item in pixels in the page layout
page of an object record, add the page as a mobile card. Mobile cards are mobile only; editor. The Visualforce element uses
they don’t appear in the full Salesforce site. exactly that height, even if the content
• Global or Object-Specific Publisher Actions — If you want a Visualforce page is shorter. In that case, the extra area
to surface in the publisher, you can create it as a global or object-specific action. Custom is blank. If the page’s content is taller, the content is clipped. As a best practice, don’t set
actions aren’t specific to mobile users, and appear in both the Salesforce1 app and in the inline Visualforce pages to be taller than the smallest device screen you intend to support.
full Salesforce site. In the Salesforce1 app, custom actions appear in the publisher. In the
full Salesforce site, custom actions appear in the publisher menu.
Visualforce Pages on Record Related Items
These options are explained in more detail in the following sections
Mobile cards appear on the Record Information page of a record. It’s a best practice to add
Visualforce Pages in the Publisher only one or two cards, since users have to scroll past them to get to the other related items.
If you need a full screen to display your page, consider moving it to a custom action on the
When displayed in the Salesforce1 app, the standard Salesforce header and sidebar are object instead.
automatically removed. However, Visualforce pages used as custom actions in the publisher
are shared with the full Salesforce site, and pages added to the Salesforce1 navigation may 1. The record highlights header
or may not be shared. Pages shared with the full site shouldn’t have these items explicitly displays when a record is
removed, unless that’s the standard practice for all Visualforce pages in your organization. loaded, but can be scrolled up
and off the screen by the user. 1
When on screen, it’s 158
1. The Salesforce1 header, pixels tall on all devices, and
which provides access to the 1 takes the full width of the
main Salesforce1 menu, is 42 screen. You can’t control the
pixels tall. The contents of display of the record header. 3
the header can’t be changed. 2. Mobile cards display above 2
2. The rest of the device all of the related items on
screen is dedicated to the the record.
Visualforce page. 3. Set the width to 100%; the
4
Note: You must be sure to element sizes automatically,
select the Available for minus some padding on either
Salesforce mobile apps side. The content of mobile
2
checkbox. This designates cards can’t be scrolled, so make
that the page is mobile-ready sure it fits in the space you
and can be used in Salesforce1. provide it. 5
4. Control the height of the
mobile card by setting the
height in pixels in the page layout editor. The mobile card area uses exactly that height,
even if the mobile card’s content is shorter. In that case, the extra area is blank. If the
card’s content is taller, the content is clipped. As a best practice, don’t create mobile
cards taller than the smallest device screen you intend to support. Be sure to set the
height of screen elements relevant to your environment. So if you have an element
that’s always 300 pixels high, set the height to 300 pixels.
5. The record’s related items are displayed after all mobile cards.

http://developer.salesforce.com
Creating a Visualforce Custom Action Offline Caching Using the HTML5 Manifest Attribute
Creating a Visualforce custom action is the same process as global actions or object- Use the manifest attribute of the <apex:page> tag to set an HTML5 cache manifest
specific actions described on the Salesforce1 Admin Cheat Sheet. To use a Visualforce for offline caching of a page’s critical resources. You can use Visualforce to provide a page’s
page in a global or object-specific action, select Custom Visualforce for Action Type. cache manifest.
Note, when making an object-specific Visualforce publisher action, you need to set the The value of the manifest attribute is passed through to the generated HTML.
Standard Controller of your page to the SObject you want to create the action on. For example:
<apex:page showHeader="false" sidebar="false"
Styling a Mobile Visualforce Page for Salesforce1 standardStylesheets="false"
docType="html-5.0" manifest="/apex/CacheManifest">
Use Salesforce Mobile Design Templates as a starting point for your UI/UX design to <header>
dramatically shorten the time it takes to develop a great looking web/hybrid app on <h1>Congratulations!</h1>
the Salesforce Platform. Combine these open-source modular design templates with </header>
Salesforce1 Platform Mobile Services and your mobile app to view, edit and update
<article>
customer data, view backend reports, find nearby records, and more.
<p>This page looks almost like HTML5!</p>
The quickest way to get started with the Mobile Design Templates is via their interactive </article>
home page. As you scroll down the page, you’ll see each template broken down into its
</apex:page>
constituent HTML5/CSS3 components.
http://bit.ly/sfdcmobiletemplates
Setting Custom HTML Attributes on
Managing Navigation with the sforce.one Object Visualforce Components
You can add arbitrary attributes to many Visualforce components that will be “passed
The Salesforce1 Platform includes a strict event mechanism for navigation. This is through” to the rendered HTML. This is useful, for example, when using Visualforce with
exposed in Visualforce as a JavaScript object called sforce.one. It’s available in any JavaScript frameworks, such as jQuery Mobile, AngularJS, and Knockout, which use data-*
Visualforce page that appears in Salesforce1. or other attributes as hooks to activate framework functions. It can also be used to improve
usability with HTML5 features such as placeholder “ghost” text, pattern client-side
validation, and title help text attributes.
sforce.one.navigateToSObject Navigates to the record home of a particular
(recordId,view) SObject specified by recordId. view is To add a pass-through attribute to, for example, an <apex:outputPanel> component,
optional and can specify the view within prefix the attribute with "html-" and set the attribute value as normal.
record home to select.
<apex:page showHeader="false" standardStylesheets="false"
doctype="html-5.0">
sforce.one.navigateToURL Navigates to the specified URL. Relative urls <apex:outputPanel layout="block" html-data-role="panel"
(url, isredirect) will retain navigation history, absolute urls html-data-id="menu">
will open a new browser window.
<apex:insert name="menu"/>
isredirect indicates a history entry
should not be created. </apex:outputPanel>
<apex:outputPanel layout="block" html-data-role="panel"
sforce.one. Navigates to the specific feed subjectId. html-data-id="main">
navigateToFeed(subjectId,type) type is the expected feed type. <apex:insert name="main"/>
</apex:outputPanel>
sforce.one. Triggers a navigation to the specific feed item. </apex:page>
navigateToFeedItemDetail Check the Visualforce Developer’s Guide to see all of the Visualforce components that
(feedItemID) support pass-through attributes.

sforce.one. Triggers a navigation to the specific related list.

navigateToRelatedList(relate
dListId, parentRecordId)
User Input and Interaction
Use <apex:input>, the type attribute, and pass-through HTML attributes to create
sforce.one. Triggers a navigation to the specific list view. mobile-friendly forms and user interfaces.
navigateToList(listViewId,
listViewName, scope) While you can use <apex:inputField> to create an HTML input element for a value
that corresponds to a field on a Salesforce object, this is not the most efficient component to
sforce.one. use over a mobile wireless connection. However, the benefit of <apex:inputField> is the
Triggers the record create workflow for
createRecord(entityName, built-in client-side and server-side validation.
the specified entityName and optional
recordTypeId) recordTypeId.

sforce.one. Triggers the record edit workflow for the Set the type Attribute for Input Widgets
editRecord(recordId) specified recordId.
Set the type attribute on input components to display UI widgets that help users enter data.
Each input adapts for the type of data expected: text fields show a keyboard, date fields show
sforce.one.back(refresh) Goes back to the previous state. Pass true to a date picker, etc. For example:
indicate the component should refresh
if possible. <apex:form >
<apex:outputLabel value="Phone" for="phone"/>
<apex:input id="phone" value="{!fPhone}" type="tel"/><br/>
Define an HTML5 Visualforce Page
<apex:outputLabel value="Email" for="email"/>
Use the docType="html-5.0" attribute in the <apex:page> tag to define the structure <apex:input id="email" value="{!fText}" type="email"/><br/>
of the rendered page. If html-5.0 is specified, you can utilize HTML5 browser features like
tags, JavaScript APIs (like drag and drop, local storage, and geolocation), and the useful <apex:outputLabel value="That Number" for="num"/>
Visualforce features as well. This will also relax the default HTML tidying in Visualforce <apex:input id="num" value="{!fNumber}" type="number"/><br/>
for HTML5 applications.
<apex:outputLabel value="The Big Day" for="date"/>
When building a custom styled mobile page, set standardStylesheets="false" on
<apex:input id="date" value="{!fDate}" type="date"/><br/>
the <apex:page> tag to eliminate any conflicts with the standard Salesforce stylesheets.
</apex:form>
These are added to the generated page header if the showHeader attribute is set to false.”
Use the applyHtmlTag and applyBodyTag attributes of the <apex:page> tag to
suppress the automatic generation of <html> and <body> tags, in favor of static markup
you add to the page yourself.
Input type Publisher Events continued.

You can also set type to auto, and the data type of the associated controller property or Visualforce Canvas Field Description
method is used. You can also explicitly set the following input types: publisher.failure Fired by the publisher when an
• date • datetime • datetime-local • month • week • time • email error condition is encountered
• number • range • search • tel • text • url such as when invalid data has
been submitted.
Client-Side Validation For example:
• The text in the feed is too long
Set HTML5 pass-through attributes to avoid sending a request to the server and waiting X • The page you’re attempting to
for a response. To enable client-side validation, set an html-pattern attribute on the publish to the feed doesn’t exist
<apex:input> tag to match expected form values. • The canvas app URL is invalid
If the input matches the regular expression validation pattern, the input is considered The canvas app should listen for
valid. If it doesn’t match, an error message displays and the form isn’t submitted to the this event and alert the user that an
server. The following example requires an email address from a specific domain. It uses the error occurred and the post didn’t
get created.
placeholder attribute to display sample ghost text.
publisher. Fired by the publisher when the
<apex:input id="email" value="{!fText}" type="email" getPayload Share button is clicked. The payload
html-placeholder="[email protected]" contains information such as the
html-pattern="^[a-zA-Z0-9._-][email protected]$" X text entered into the What are you
html-title="Please enter an example.com email address"/> working on? field and who the feed
You can also provide auto-suggestion by using <apex:input.list> to generate an item is being shared with.
HTML5 <datalist>. For example, the following will provide options based on what the publisher.post Fired by the publisher to indicate to
user types in the box: <apex:input.list="Aaa,Aabb,Aaacc"> X the page that the Submit button has
been pressed.
Navigation X publisher.refresh Fired by the page to refresh the feed.
publisher. Fired by the publisher when the feed
Salesforce1 provides a framework for handling various navigation controls and events, X X setupPanel is initially loaded.
that isn’t available to Visualforce pages when they run on the full Salesforce site. For
publisher. Fired by the canvas app to indicate
pages shared between the Salesforce1 app and the full site, use the sforce object when it’s
setPayload to the publisher that the content
available, and standard Visualforce navigation when it’s not. The following example runs
after a JavaScript remoting request successfully returns from the @RemoteAction method being sent to the publisher should
be shared in the feed item. This
that creates a quick order. This code is from a Visualforce page that’s used as a custom
event is in response to publisher.
action, which adds it to the publisher in the Salesforce1 app and the publisher menu in the
getPayload and contains
full site. The intent of the code is to navigate to the detail page for the account for whom
the order was placed, and it needs to work in both places:
X information about the feed item
you’re trying to create.
// Go back to the Account detail page
You can create three feed item types:
if( (typeof sforce != 'undefined') && (sforce != null) ) { • TextPost
// Salesforce1 navigation • LinkPost
sforce.one.navigateToSObject(aId); • CanvasPost
} publisher. Fired by the canvas app/page to
} else { setValidForSubmit indicate to the publisher that the
// Set the window's URL using a Visualforce expression
canvas app/page is ready to submit
window.location.href = '{!URLFOR($Action.Account.View, aId)}'; a payload. After this event fires, the
} Share/Submit button becomes active.

Publisher Events X X This code snippet enables the

Share button:
$$.client.publish(sr.
When you expose a Visualforce page or canvas app in the publisher, you can use well- client,
defined events to enable communication between the page and the publisher as well as {name : 'publisher.
utilize the Submit button to submit the form, close the publisher, and post to the feed. setValidForSubmit',
payload : true});
For Visualforce Include: publisher. Fired by the publisher when the
<script type='text/javascript' src='/canvas/sdk/js/29.0/ showPanel user selects a canvas app/page in the
publisher.js'></script> X X publisher. This event indicates that
the canvas app is being displayed.
For Force.com Canvas Include:
<script type='text/javascript' src='/canvas/sdk/js/29.0/ publisher.success Fired by the publisher after the
canvas-all.js'></script> X Share button is tapped and data is
successfully submitted.
The publisher event methods can be used both by the Visualforce and Canvas. Not all
publisher event methods are available to Canvas and Visualforce, and the availability of
these events are outlined below.
Subscription on Publisher Events Visualforce Example:
Use subscription methods to monitor events on your page and respond accordingly.
Note: When viewing a Visualforce publisher action outside of Salesforce1, the
You can place these directly on the page and use them by including the publisher.js
Submit button is no longer visible automatically. Use the navigation example above
library mentioned above.
to distinguish whether or not you are viewing the action from Salesforce1 and create
a submit button to fire the publisher.close event on submit. //Fired by the publisher when the user selects a Visualforce action
//in the publisher.
//This event indicates that the Visualforce is being displayed.
Visualforce Canvas Field Description Sfdc.canvas.publisher.subscribe({name: "publisher.showPanel",
onData:function(e) {
publisher. Fired by the publisher when the //Enables the Share button on the publisher
clearPanelState canvas app/page is deactivated or Sfdc.canvas.publisher.publish({name: "publisher.
hidden. This can happen when the setValidForSubmit", payload:"true"});
X X user selects a different application }});
in the publisher or after the Share/
//Fired by the publisher to indicate to the page that the submit
Submit button has been clicked. button has been pressed.
publisher.close Fired by the page to tell the Sfdc.canvas.publisher.subscribe({name: "publisher.post",
onData:function(e) {
publisher to close. Pair this action
//Closes the publisher and refreshes the feed
with a publisher.post to submit and
X close using the Submit button on
Sfdc.canvas.publisher.publish({name: "publisher.close",
payload:{ refresh:"true"}});
the publisher. }});
Set Canvas App Location and Create the Action Publisher Canvas App Access Considerations continued.
◊ This code snippet shows the default size values of a canvas app in the feed:
To add a canvas app to the publisher, you must set the location and create the action when
you create the canvas app. "dimensions": {
"width": "420px",
Note: Support for Force.com Canvas apps in the publisher, the Chatter feed, and "height": "100px",
Chatter Mobile is currently available through a pilot program and is available in all "maxHeight": "400px",
new Development Edition organizations. For information on enabling it for your "maxWidth": "420px"
organization, contact salesforce.com. }
1. In Salesforce, from Setup, click Create > Apps.
◊ The feed is a fixed width of 420 pixels. For example, if you resize your canvas app to
be 200 pixels, the feed width remains 420 pixels.
2. In the Connected Apps related list, click New. Fill out the fields for your canvas app. ◊ You can use the resize() method in the Force.com Canvas SDK to change the
3. In the Locations field, select Publisher. You must select this location for your canvas app values of your canvas app up to the maxHeight and maxWidth.
to appear in the publisher.
4. In the Canvas App Settings section, select the Create Actions Automatically field. Working with Canvas Apps in the Publisher
This creates a quick action for the canvas app.
and Chatter Feed
For the canvas app to appear as a publisher action, you must add the action to the global layout.
When submitting your request using the Share button you can choose what type
of feed item you would like to create. We currently support three types:
Create a Canvas Action
1. Text Post - This is the standard text type of post. The TextPost payload must contain:
If you didn’t select the Create Actions Automatically field when you created the canvas app, a. p.feedItemType = "TextPost"
then you’ll need to create the action manually. b. p.auxText - The text that you want to post. We concatenate this text with whatever
1. From Setup, click Create > Global Actions the user enters into the "What are you working on" field. There must be some text
2. Click New Action. provided (either by the user in the text box, or by your app) or there will be an error.
2. Link Post - This is the standard link type of post. The LinkPost payload must contain:
3. In the Action Type field, select Custom Canvas.
a. p.feedItemType = "LinkPost"
4. In the Canvas App field, select the canvas app that you want to appear as an action.
b. p.auxText - This is the text that appears over the link box in the feed item
Only canvas apps that have a location of Publisher will appear in this field.
c. p.url - This is the URL the link will direct to
5. In the Height field, enter the height of the canvas app in pixels. This is the initial d. p.urlName - This is the friendly name that appears over the URL in the link box
height of the canvas app when it appears in the publisher. You can use the Force.com
Canvas SDK resize() method to change the height up to a maximum of 500 pixels. 3. Canvas Post - This is a new feed item type that will create a feed item that can load a
Canvas App directly in the feed. The CanvasPost must contain:
6. In the Label field, enter a value. This value appears as the publisher action title in the
a. p.feedItemType = "CanvasPost"
user interface.
b. p.auxText - This is the text that appears over the canvas box in the feed item
7. In the Name field, enter a unique value with no spaces.
c. p.namespace - The namespace of your Canvas App (if set)
8. Optionally, in the Icon field, you can upload an icon by clicking Change Icon. d. p.developerName - The API name of your Canvas App
You must upload the icon as a static resource before you can change it here.
e. p.thumbnailUrl - An HTTPS URL to an icon you would like to display next to
9. Click Save. the app. If none is provided, the default canvas puzzle icon will be used
f. p.parameters - A JSON string of custom parameters you would like to send to
Sequence of Publisher Events in Force.com Canvas the app. This is an optional value that will be sent in the Signed Request as the
"parameters" object
Here’s the order of publisher events from the perspective of the canvas app: g. p.title - The linked title that will display in the canvas box in the feed item.
When clicked, this initiates the canvas app load
1. The canvas app listens for publisher.setupPanel.
h. p.description - A 255 character description that will appear under the link title
2. The canvas app listens for publisher.showPanel.
3. The user interacts with the canvas app, for example, clicks a button or enters some
text. The canvas app does any validation required and then fires publisher.
Creating Canvas Feed Items
setValidForSubmit. As a result, the publisher then enables the Share button. There are two ways to get a canvas app into the feed. The above example demonstrates
4. The canvas app listens for publisher.getPayload. creating the app from the Publisher. You can also create the canvas feed item directly from the
Connect API. The field requirements are the same, but the format would be slightly different.
5. The canvas app fires publisher.setPayload.
For instance, to create the preceding canvas feed item through the Connect API you would:
6. The canvas app listens for publisher.success. POST to the feed resource you want, like https://<instance>.salesforce.com/
7. The canvas app listens for publisher.failure. services/data/v29.0/chatter/feeds/news/<userId>/feed-items
8. The canvas app listens for publisher.clearPanelState. The message would look like:
{
Publisher Canvas App Access "body" : {
"messageSegments" : [ {
When you display a canvas app inside of a feed item, the context information you receive from "type" : "Text",
the signed request or from a getContext() call contains information specific to the feed: "text" : "Please Approve my trip: Release Planning at HQ"
} ]
• Location—If the canvas app is in the feed, then the Environment. },
displayLocation field contains the value ChatterFeed.
"attachment" : {
• Parameters—When you create a feed item that contains a canvas app, you can specify "description" : "This is a travel itinerary for Itinerary -
a JSON string as the parameters value. When the canvas app receives the context, the Release Planning at HQ. Click the link to open the Canvas App.",
parameters in the feed item will be contained in the Environment.Parameters object. "parameters" : "{&quot;itinerary&quot;:&quot;123&quot;}",
"title" : "Itinerary - Release Planning at HQ",
• Size—The Environment.Dimensions object contains information about the size of the "namespacePrefix" : "",
canvas app. "developerName" : "Itinerary_App",
◊ The canvas app height defaults to 100 pixels. "height" : "100px",
◊ The canvas app width defaults to 420 pixels, which is the same as the maximum width "thumbnailUrl" : "https://icons.iconarchive.com/icons/
of a canvas app in the feed. aha-soft/perfect-transport/48/ Airplane-icon.png",
"attachmentType" : "Canvas"
◊ The maximum height of a canvas app in the feed is 400 pixels.
}
◊ The maximum width of a canvas app in the feed is 420 pixels. }

For other cheatsheets: http://developer.salesforce.com/cheatsheets 10132014