In this article by Matt Kaufman and Michael Wicherski, authors of the book Learning Apex Programming, we will see how we can use Apex to extend the Salesforce1 Platform. We will also see how to create a customized Force.com page.
(For more resources related to this topic, see here.)
Apex on its own is a powerful tool to extend the Salesforce1 Platform. It allows you to define your own database logic and fully customize the behavior of the platform. Sometimes, controlling “what happens behind the scenes isn’t enough. You might have a complex process that needs to step users through a wizard or need to present data in a format that isn’t native to the Salesforce1 Platform, or maybe even make things look like your corporate website. Anytime you need to go beyond custom logic and implement a custom interface, you can turn to Visualforce.
Visualforce is the user interface framework for the Salesforce1 Platform. It supports the use of HTML, JavaScript, CSS, and Flash—all of which enable you to build your own custom web pages. These web pages are stored and hosted by the Salesforce1 Platform and can be exposed to just your internal users, your external community users, or publicly to the world.
But wait, there’s more! Also included with Visualforce is a robust markup language. This markup language (which is also referred to as Visualforce) allows you to bind your web pages to data and actions stored on the platform. It also allows you to leverage Apex for code-based objects and actions. Like the rest of the platform, the markup portion of Visualforce is upgraded three times a year with new tags and features.
All of these features mean that Visualforce is very powerful.
s-con-what?
Before the “introduction of Visualforce, the Salesforce1 Platform had a feature called s-controls. These were simple files where you could write HTML, CSS, and JavaScript. There was no custom markup language included. In order to make things look like the Force.com GUI, a lot of HTML was required. If you wanted to create just a simple input form for a new Account record, so much HTML code was required. The following is just a” small, condensed excerpt of what the HTML would look like if you wanted to recreate such a screen from scratch:
<div class="bPageTitle"><div class="ptBody"><div class="content">
<img src="/s.gif" class="pageTitleIcon" title="Account" />
<h1 class="pageType">
Account Edit<span class="titleSeparatingColon">:</span>
</h1>
<h2 class="pageDescription"> New Account</h2>
<div class="blank"> </div>
</div>
<div class="links"></div></div><div class="ptBreadcrumb"></div></div>
<form action="/001/e" method="post" onsubmit="if (window.ffInAlert) { return false; }if (window.sfdcPage && window.sfdcPage.disableSaveButtons) { return window.sfdcPage.disableSaveButtons(); }">
<div class="bPageBlock brandSecondaryBrd bEditBlock secondaryPalette">
<div class="pbHeader">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="pbTitle">
<img src="/s.gif" width="12" height="1" class="minWidth" style="margin-right: 0.25em;margin-right: 0.25em;margin- right: 0.25em;">
<h2 class="mainTitle">Account Edit</h2>
</td>
<td class="pbButton" id="topButtonRow">
<input value="Save" class="btn" type="submit">
<input value="Cancel" class="btn" type="submit">
</td>
</tr>
</tbody></table>
</div>
<div class="pbBody">
<div class="pbSubheader brandTertiaryBgr first tertiaryPalette" >
<span class="pbSubExtra"><span class="requiredLegend brandTertiaryFgr"><span class="requiredExampleOuter"><span class="requiredExample"> </span></span>
<span class="requiredMark">*</span>
<span class="requiredText"> = Required Information</span>
</span></span>
<h3>Account Information<span class="titleSeparatingColon">:</span> </h3>
</div>
<div class="pbSubsection">
<table class="detailList" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="labelCol requiredInput">
<label><span class="requiredMark">*</span>Account Name</label>
</td>
<td class="dataCol col02">
<div class="requiredInput"><div class="requiredBlock"></div>
<input id="acc2" name="acc2" size="20" type="text">
</div>
</td>
<td class="labelCol">
<label>Website</label>
</td>
<td class="dataCol">
<span>
<input id="acc12" name="acc12" size="20" type="text">
</span>
</td>
</tr>
</tbody></table>
</div>
</div>
<div class="pbBottomButtons">
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td class="pbTitle"><img src="/s.gif" width="12" height="1" class="minWidth" style="margin-right: 0.25em;margin-right: 0.25em;margin-right: 0.25em;"> </td>
<td class="pbButtonb" id="bottomButtonRow">
<input value=" Save " class="btn" title="Save" type="submit">
<input value="Cancel" class="btn" type="submit">
</td>
</tr>
</tbody></table>
</div>
<div class="pbFooter secondaryPalette"><div class="bg">
</div></div>
</div>
</form>
We did our best to trim down this HTML to as little as possible. Despite all of our efforts, it still “took up more space than we wanted. The really sad part is that all of that code only results in the following screenshot:
Not only was it time consuming to write all this HTML, but odds were that we wouldn’t get it exactly right the first time. Worse still, every time the business requirements changed, we had to go through the exhausting effort of modifying the HTML code. Something had to change in order to provide us relief. That something was the introduction of Visualforce and its markup language.
Your own personal Force.com
The markup “tags in Visualforce correspond to various parts of the Force.com GUI. These tags allow you to quickly generate HTML markup without actually writing any HTML. It’s really one of the greatest tricks of the Salesforce1 Platform. You can easily create your own custom screens that look just like the built-in ones with less effort than it would take you to create a web page for your corporate website. Take a look at the Visualforce markup that corresponds to the HTML and screenshot we showed you earlier:
<apex:page standardController="Account" >
<apex:sectionHeader title="Account Edit" subtitle="New Account" />
<apex:form>
<apex:pageBlock title="Account Edit" mode="edit" >
<apex:pageBlockButtons>
<apex:commandButton value="Save" action="{!save}" />
<apex:commandButton value="Cancel" action="{!cancel}" />
</apex:pageBlockButtons>
<apex:pageBlockSection title="Account Information" >
<apex:inputField value="{!account.Name}" />
<apex:inputField value="{!account.Website}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Impressive! With “merely these 15 lines of markup, we can render nearly 100 lines of earlier HTML. Don’t believe us, you can try it out yourself.
Creating a Visualforce page
Just like” triggers and classes, Visualforce pages can “be created and edited using the Force.com IDE. The Force.com GUI also includes a web-based editor to work with Visualforce pages. To create a new Visualforce page, perform these simple steps:
- Right-click on your project and navigate to New | Visualforce Page. The Create New Visualforce Page window appears as shown:
- Enter” the label and name for your “new page in the Label and Name fields, respectively. For this example, use myTestPage.
- Select the API version for the page. For this example, keep it at the default value.
- Click on Finish. A progress bar will appear followed by your new Visualforce page.
Remember that you always want to create your code in a Sandbox or Developer Edition org, not directly in Production. It is technically possible to edit Visualforce pages in Production, but you’re breaking all sorts of best practices when you do.
Similar to other markup languages, every tag in a Visualforce page must be closed. Tags and their corresponding closing tags must also occur in a proper order. The values of tag attributes are enclosed by double quotes; however, single quotes can be used inside the value to denote text values. Every Visualforce page starts with the <apex:page> tag and ends with </apex:page> as shown:
<apex:page> <!-- Your content goes here --> </apex:page>
Within “the <apex:page> tags, you can paste “your existing HTML as long as it is properly ordered and closed. The result will be a web page hosted by the Salesforce1 Platform.
Not much to see here
If you are” a web developer, then there’s a lot you can “do with Visualforce pages. Using HTML, CSS, and images, you can create really pretty web pages that educate your users. If you have some programming skills, you can also use JavaScript in your pages to allow for interaction. If you have access to web services, you can use JavaScript to call the web services and make a really powerful application. Check out the following Visualforce page for an example of what you can do:
<apex:page>
<script type="text/javascript">
function doStuff(){
var x = document.getElementById("myId");
console.log(x);
}
</script>
<img src="http://www.thisbook.com/logo.png" />
<h1>This is my title</h1>
<h2>This is my subtitle</h2>
<p>In a world where books are full of code, there was only one that taught you everything you needed to know about Apex!</p>
<ol>
<li>My first item</li>
<li>Etc.</li>
</ol>
<span id="myId"></span>
<iframe src="http://www.thisbook.com/mypage.html" />
<form action="http://thisbook.com/submit.html" >
<input type="text" name="yoursecret" />
</form>
</apex:page>
All of this code is standalone and really has nothing to do with the Salesforce1 Platform other than being hosted by it. However, what really makes Visualforce powerful is its ability to interact with your data, which allows your pages to be more dynamic. Even better, you” can write Apex code to control how “your pages behave, so instead of relying on client-side JavaScript, your logic can run server side.
Summary
In this article we learned how a few features of Apex and how we can use it to extend the SalesForce1 Platform. We also created a custom Force.com page.
Well, you’ve made a lot of progress. Not only can you write code to control how the database behaves, but you can create beautiful-looking pages too. You’re an Apex rock star and nothing is going to hold you back. It’s time to show your skills to the world.
If you want to dig deeper, buy the book and read Learning Apex Programming in a simple step-by-step fashion by using Apex, the language for extension of the Salesforce1 Platform.
Resources for Article:
Further resources on this subject:
- Learning to Fly with Force.com [article]
- Building, Publishing, and Supporting Your Force.com Application [article]
- Adding a Geolocation Trigger to the Salesforce Account Object [article]
