Join Sara Morgan Nettles for an in-depth discussion in this video Building a Visualforce page using the MVC model, part of Visualforce for Developers.
- If you are a software developer who has used another language such as Java or .NET then you may already be familiar with the software architecture pattern known as MVC or Model-View-Controller. The MVC design pattern has been around for many years and was originally designed for desktop systems long before the emergence of the internet. While there have been many interpretations of it by various languages and platforms, Salesforce uses it in a very specific way.
In this design pattern M stands for Model, V is for View and C is for Controller. The purpose of this design is to separate the way data is presented from the way it is controlled and ultimately stored in the database. On the Force.com platform, the Model is represented by Objects or sObjects as you will see them called. The s part by the way just means that it is a Salesforce Object. If you are familiar with databases, you can think of these as tables in a database.
Salesforce comes with several built-in sObjects such as account, contact and opportunities which you see here in their built-in Schema Editor. And while Salesforce includes many standard sObjects out of the box, you can also create and define your own custom sObjects in the setup menu by going here to create and objects and clicking New Custom Object. What is really great about how Salesforce uses the MVC model is that you can define validation roles declaratively such as this one for the contact.
And when you do, because these rules are not tied directly to a particular page, they can be used on any page that uses a particular field associated with that rule. For example, you could setup a rule in which a contact's phone number is always required when a lead source is marked as phone inquiry, and you would just have to enter the particular conditional logic down here in the box and give it a rule name that is something you would understand. This type of validation can also come from the data type assigned to a particular field.
For example, these are the fields that are used to define a contact. And you'll notice down here that the email field is defined with a data type called Email. This means that if I use that field on a Visualforce page and a user tries to enter an invalid email address, it will automatically detect that and throw back an error message. For instance, if I go here to edit a contact and then I go ahead and get rid of the .com on the end of the email address and click save, notice that I instantly receive a data.
All of the pages that you designed would receive the same error if setup properly. The next part of the MVC model is the View and in the Force.com world, this is a page. This is also where Visualforce comes in since it includes the markup language used to build these pages. The page is what is visible to the user and it can contain one or more components. Components are just a way of breaking your Visualforce code up into pieces. They offer the developer a way of wrapping chunks of markup code up and then possibly reusing them in other pages.
The last piece of the design is the Controller and this is where the code used to control the view is kept. Every time a user interacts with a page such as loading it for the first time or clicking on some button that it contains, the controller will execute code that initiates some action. Essentially it contains the code used to manage the data or the model that is then passed on to the page or the view. One of the things that makes Visualforce so powerful is that we can access what are called Standard Controllers and these are included for every data object and they allow you to get data values using a very small amount of markup code.
All of the really difficult stuff about accessing the database is in the Standard Controller which can be referenced with a single line of code. To help you understand all of this a little better, let's go to our free Developer Edition and walk through creating a very basic visual force page which uses a standard control to do something pretty simpler. When you signed up for your free Developer Edition, not only did you get a full copy of the Salesforce but you also got a handful of built-in test data. To see some of these, let's go here to account.
And by the default, we're only gonna see all those recent accounts that you have. And since this is a new developer org we don't have any. So to see some, we can click this tab here and go to all accounts and then click go, and we will receive a list of all the accounts that are on this org. And this is the sample data that Salesforce has provided to you for your Developer Edition org. Let's start by clicking on one of these accounts to bring up the record. And when I do, notice the URL in my browser.
If you are following along with me in your own Development Edition, you may notice that the URL in your browser might look slightly different than mine. What I really want you to notice is the 15-digit ID appended to the end of the URL. This is the unique ID used to access this particular account. And remember, the value you have for this particular account will be different than mine. For now, I just want you to know how to access this ID because we will need it in a few minutes.
So now, I'm gonna create a page that uses the account Standard Controller to access data for this particular account and to do that, I'm gonna go up here to this URL and I'm gonna replace this portion of it, and type apex and then the words account and test and hit enter. And when I do just like before, I'll get an error that tells me that that page does not exist. I can go ahead and click that link and bring up the inline development editor and just like before, I can click the little arrow down here to bring up my code.
As you saw before, a small amount of code is provided for every new page created using this method but for the page I'm about to create I can just start by removing all of these code in between the page text, and click the save icon to see what it looks like. And as you can see, it's just pretty much a blank page with all of the surrounding header and sidebar that comes standard with Salesforce. In the next video, I'm gonna go over in detail some commonly used page components but for now, I'm just gonna paste in the code and then click this little save icon up here, and you can see the page will re-render and we will get some different data.
And up here our page will say, "Hello." And in this case, Sara. You are viewing a particular account. And notice that there's nothing after the word account even though if you go down here it says you're viewing the account .name account. Well, what happened to this portion of the code? It doesn't seem to have rendered at this point and why do you think that is? It got the value from a name from this code here which uses a thing called the expression syntax and the user global variable to access the user's first name.
The expression syntax which is anything inside of curly brackets followed by an exclamation point allows me to embed formulas and to access values from records that are currently in context. The formulas can be simple or complex and could even be created using the built-in formula editors. To get more information about formulas I suggest you check out An Introduction to Formulas which is seen in the URL here. It's part of the Developer Force library. I really suggest that you take a look through this document because hint, hint, you may need the information within it to complete a challenge later on.
In the page here, I am just accessing the user global variable. So that is what makes up the inside part of this expression. The user global variable will always start with a dollar sign followed by the word user, and it is just one of several global variables that contain general information about the user and the organization. I will access the first name field when I follow the dollar sign user part with a dot and the word first name. The next thing to notice about this page is that the accounts tab is active.
This was done because of the fact that I'm accessing the account Standard Controller. And I'm doing that by just adding the Standard Controller attribute here in the page tag. By referencing the account Standard Controller, I automatically get access to formatting and data through the current context. Great, but now you should be asking why is there no account name listed? My page just says that you are viewing the account but there is no account name visible. Even though I specified down here in the code that I wanted to include the account name.
The reason the account name is not showing up is that I've not provided the page with any context for which account I am referencing. I provide this context through the URL when I include a unique ID passed in as a parameter. Remember back when I showed you the account data for Burlington Textiles and pointed out the ID value and the URL? I need that now for the account text page to provide it with the context it needs. So what I can do is just copy this value from the URL and then go back to my account test page and by once again changing the URL to add a question mark and then ID= and then I will paste in that value that I just retrieved and hit enter.
Now notice what happens. I now see, "You are viewing "the Burlington Textiles Corp of America account." Just as I expected. And that is it. Using just four lines of code we have accessed the value from the global user variable as well as the account data model. In the next video I will expand on this page to show you more about what you can do with the built-in components that Visualforce offers.
- What is Visualforce?
- Registering for an account
- Building a Visualforce page
- Building a tabbed page
- Configuring permissions
- Using standard list controllers and custom controllers
- Exploring unit testing