CRT-450 Salesforce Certified Platform Developer – User Interface – 25%

1. 4.1- Display Salesforce Data using Visualforce – Part 1 – Visualforce Overview

Hey guys. This is section four. User interface. And this is lecture number one display Salesforce data using VisualForce. In this lecture we will talk about VisualForce, what it is, when should we use it and where can we build it. And finally we’ll talk about how we can pull Salesforce data into VisualForce pages. First of all. What’s? VisualForce. Visual Force allows you to create eight custom user interface pages in Salesforce and the Force platform instead of the standard pages. It is a case insensitive tag based markup language just like HTML. When should you write Visual force pages? VisualForce is used when the standard Salesforce user interface cannot fulfill the business requirement that is needed. We have some examples. Let’s say you want to display three columns and the standard Salesforce page. We can only display maximum two columns.

So if you want to, let’s say, display three, four, five columns, you can do that using the Visual post pages. Let’s say you want to display data from different unrelated objects. This cannot be done using the standard Salesforce pages. And for that you need to create VisualForce pages. So anything that cannot be done using the standard pages of Salesforce, you should build a VisualForce page for it. Now. What’s the VisualForce? Syntax. VisualForce is a markup language that is based on tags. So if you want to write anything in VisualForce, you have to use tags. VisualForce tags all begin with Apex semicolum prefix and all VisualForce pages are enclosed within these two tags. So you have to begin your VisualForce page using this tag and you have to end it with that one. VisualForce supports HTML tags, so you can use VisualForce tags and HTML tags. And the VisualForce page and VisualForce tags have attributes that define specific tag characteristics.

So you can add some attributes after the tag itself. So you have to first define the tag and then some tags support attributes. We’ll see that in detail. This is the visual force syntax. This is an example of one tag. We are giving the example of the Page tag. As you can see, this is the tag. It starts with the Apex keyword and then semicolon and then the tag name. And always attack should end. How? We can end a tag by using the backslash and then the same tag name. As you can see, this tag has one attribute and this is the value of the attribute. This is the body of the tag. We can have commands just like HTML and we can also use HTML tags. So we are using the H one tag. We are opening it and we are closing it. And also we are using the Paragraph tag. Whenever you start a tag, it should have an ending tag. So let’s say you added some tags here. Each tag added should have a corresponding ending tag and some tags have ending tags within them. We’ll see that in detail later on. And finally, VisualForce has so many tags. This is just an example of one tag. We have a link in Salesforce to check all of these tags and to see some examples of them.

Where can we write VisualForce pages? We have many different options that we can use to write VisualForce pages. First of all, we talk about the development mode. This provides a development footer and a live preview. It’s a type of what you see is what you get the editor. So it has a footer and you can write your VisualForce components inside this. And then you have a live preview on the salesforce page. And then the most important thing that you have a link to the Visual Force components references. So you can see all the tags that we have talked about. You can see also examples of each one of these tags and you can also change the font size of this editor. You can also use the developer console to create new VisualForce pages and to edit them. You can use ides like the Force. IDE like Mavens Mate, like Cloud Nine and others. And finally you can create and edit VisualForce pages and the setup page. These are some examples of some VisualForce page components or tags. The first one is mandatory. You have to start your VisualForce page by using it. This is an example. We have a simple page that only has this string and as you can see, it starts with this component and we have the corresponding ending component. We can also use something called Apex page block.

So this component will render as a section. So as you can recall from the standard salesforce page we have something called sections. So if you want to do the exact same thing in Visual Force, you have to use this tag. So this is an example we have to provide the title of this block. So if we provide user, we’ll have user here and then we have the body of this component. We can also use something called page block section. This renders as a collapsible section inside the page block. So we can only use these inside the page block. This is an example, we have a page block that has a title of page block title. So this is the same as you can see here and it has two different page block sections. The first one has this title and the second one has that title.

Now you can have anything inside the body of these page block sections. This is the link that we have talked about. So whenever you click on this link, we see that in detail. In the demo you will have a reference for all the VisualForce page components. So if, let’s say you want to know more about one of the components and you want to check an example of this component, you can click on the component itself. You can see the definition and the syntax of this component. You can see the attributes that you can write with this component. And you can see also an example.

So we see that in detail in the demo now. So now let’s go to salesforce and let me show you visual force in action. So first of all, let me show you where can we create VisualForce pages. The first way is the setup menu. Let me search for visual force and I will click on VisualForce page. So here I can click on you and I can give the label. So let’s call this VF page one and the API name description. And this is the code. So as you can see I have an auto generated code. So the Apex page is starting this VisualForce page and it is ending it. And then I can type any code here. So let me save this. So this will render as congratulations between h one, HTML tags and I will also have this. So let’s see this in action. So I will save and then I can click on a preview to check this VisualForce page.

There you go. So this is a very simple page. Now I can also create VisualForce page from within the developer console. So I will go there and then to do so I need to go to the file menu item new and VisualForce page. I will call this VF page two. There you go. I have the automatic starting and ending component and then I can type anything here. So this is a VisualForce page from the developer console controls. And now I can go back to salesforce and I will refresh. And as you can see I have the second page. I can also preview it from here. That’s it. We can also create VisualForce pages from the development mode footer. To do so I need to check a box in my user. This is an update, I will just cancel it. Now click on user and then click on the user that you want to allow to do so. And then click on Edit. And you can see we have something called development mode. We have to allow this for this user to be able to edit VisualForce pages from the development mode footer. So let me save this. You can also create VisualForce pages from the URL itself.

To do so, just make sure that you check the development mode. Checkbox and then delete everything after the salesforce. com, type Apex and then type the name of the VisualForce page. So I will choose this name and then enter. So let’s see what will happen. I will have this page. This is an error page mentioning that I don’t have such page in my and I have a link that will allow me to create it. So in this case I don’t need to go to the setup menu and to create this page. I can do it from the URL. Let me click on this. Now I have the page and notice what I have at the bottom, I have this. This is the development mode footer that I told you about. So to see it, just click on this icon and you can see the code of this page. Now if I change anything here and hit on Save, I will have it here change. So this is also a way to create and to edit your VisualForce pages. You can also do the same for the pages that you have created. And the last way is from the IDE. I will open the force IDE. Let me close this and then I will right click New VisualForce Page. So the label will be VF page from IDE next. And I will use this template and finish. There you go. I can also change anything here. I can add any tag that I want. And I can do the exact same thing that I can do under Other options. Let me go back to the salesforce page and let’s see what we can do here. So I will change this.

I can add the tags that we talked about. So let me first delete all of that. So I will add the tag Apex page block. As you can see, I will automatically have the closing tag. And I can also add attributes. Let’s add the title attributes. Let’s see what will happen now. Save. There you go. I have a new page block and this is the title. I can also add anything inside. There you go. I can also add a page block section inside this. So Apex this is the first section. I can also add other sections. So this will be section two. I can also use the Shift tab for a proper alignment. There we go.

Let me add some text and I will do the same for the first section. Control Ads. I will have this. I can also use HTML tag, so I can use the SAP tag. Thank you and let me save this. So there you go. I can also build a table by using the table, HTML tags and so on. Let me finally show you the component reference link. So this is the link. As you can see, I can click on this and I will have a new page. This link contains all of the VisualForce tags. So let’s see the ones that we have talked about the page block. So if I click on this, I can see an example. This is an example. I can see the different attributes. So I can use this attribute. We use the title attribute. So let’s go there. This is the title attribute and it will take a string as a value. So this is a very good reference to check all of the visual force tags. So that’s it for this first part. And the second part will talk about how to add values from your salesforce. org to the visual force pages. Thank you.

2. 4.1- Display Salesforce Data using Visualforce – Part 2 – Standard Controller

Up until now we have created VisualForce Pages, but with all the static data, we did not get any data from Salesforce into these pages. We did not get any data from different records, from different fields of these records and so on. How can we get data from Salesforce into these VisualForce pages? To do that we use something called Controller. You can record Controller from the MVC lecture and we’ll talk about it right now. Now, the controller will be responsible of pulling data from the Salesforce database and also of pushing data into the Salesforce database. And the controller can also contain the logic to be executed whenever you click a button. This is the MVC pattern. As you can recall from a previous lecture. We talk about this. The MVC pattern is a software development pattern that promotes the separation of these three components. First of all, we have the view component and we have the module component on the back end. The view component is what you can see on the page. It’s the VisualForce page itself. The module component is the database. This is the back end. And then we have the controller component. This is what we are talking about in this chapter. The controller component is responsible of pulling data from the database to the VisualForce page and it’s also responsible of pushing data from the page itself to the database.

So this is what is needed on a Visual post page to be able to view data from Salesforce into the page and also to be able to save data from the page to the database. We have three different types of controllers. First of all, we have the standard controllers. These are mainly the default ones. They come with the salesforce. And you don’t need to build them, you just need to refer them in your VisualForce page. We have also the custom controllers. These are mainly built by the developer. They are mainly Apex classes. And finally we have the controller extensions. These are mainly extensions to the standard controllers or to the custom controllers. Most standard and custom objects have standard controllers that can be used in your VisualForce pages. So you just need to refer to these and the page and then you can use them. Standard controllers run in user mode and in this chapter we’ll only talk about the standard controller. If you want to know more about the custom controller and how we can build them, you can go back to section three and you can see that.

Now, how can we extract a VisualForce page to use a standard controller and how we can specify which controller it should use? To do so, we have to use the standard controller attribute on the page component. So, as you can see here, we have the first line of the VisualForce page as a page component. And then to instruct this VisualForce page to use a standard controller, we can use this attribute and then we can specify the name of the standard controller. So in this case, this page is using this controller and it can have access to the database by this controller. It can have access to the account records by using this controller. To test this, we can specify an ID of the object record. So in this case, if we are using the account controller, we can specify an account ID and the URL after this. So this is the name of the visual force page. And then we can specify this interrogation mark, then ID equals and then the ID of the record. And then we can hit enter.

And then we can fetch the data of this record into our VisualForce page and the body of the visual force page. We can add these, we can add, let’s say this text and then we can add between curly brackets and exclamation mark. We can add this. This is what mainly this is the object name and this is the field name. So this will display the name field of the object record ID that we specified in the URL. We can do the same thing for different fields. So this will display the phone field of the ID of the record ID. This will display the industry field and so on. So this is how we can display different fields and the VisualForce page by using the standard controller. This is the code of the VisualForce page. On the first line we have the page component with the standard controller attribute specifying the account standard controller. And then in the URL we have the ID of one of the account records. And then we have a page block component. And after that we have a page block section component. And inside this page block section we have these text.

And then between curly brackets and exploration mark we have the fields. So this will display a name and then the value of the name field of the record and the URL and so on. This is the result. This is the page block section titled and these are the different tags and the different field values. This is the detailed explanation on how this code works. First of all, when the page is loaded and the page component is activated, it can see that it has an attribute called standard controller and this is referring to the account standard controller. So it will load it and then what it will do, it will check that there’s an ID and the URL. So it will search and it will retrieve the matching record of this ID and it will take it what it will do to it, it will save it to a variable called account.

So because we are using the standard controller account, this VisualForce page will use a variable of the same controller name and it will save this record into this variable. And after that it can use this variable to fetch the field values so let’s say I want to fetch the name field value. What I will do, I will first have the variable name which is the same name as the standard controller and then I will use the dot notation to fetch the value of the name field. And I need to enclose that between curly brackets and I need to proceed this with an explanation mark. I will do the same thing for all the other fields that I want in this VisualForce page. I’d note that all of that is inside a page block section component which is inside a page block component. You can also use the dot notation to display data from related records from Parent records. Let’s say you want to display the owner name. To do so we can use the same dot notation inside the curly brackets and preceded by the exclamation mark. But in this case we are using account owner name. You can also use a component called Detail to quickly add the whole record details to a VisualForce page.

This is a self contained component. So it starts and it ends on the same line. As you can see, the backslash is at the end of the component. So if I use this and I run this VisualForce page, I will have all the record details in my VisualForce page. So I will have all the fields, all the sections and so on in my page. To display a single field value from a record, you can use a component called output field. This is the output field component. Let’s say you want to display the account name. What you can do, you can use this component inside the page block component and then you can use the attribute value to give the field that you want to be displayed. So in this case I will have the value of this field. If you use the output field component by itself, you will only get the field value. You will not get the field label. But if you put this component inside page block and inside page block section components, you will get the label plus the field value. Let me give you an example. This is an example. We have three such components. These are enclosed in a page block section which is enclosed in a page block component. So if we do that, we will get the field label, the name labeled plus the value of the name. So instead of only getting the value, we will get the label plus the name. And note that on the page block section component we can specify the number of columns we want. As you can recall the maximum number of columns in a standard salesforce pages two.

But in this component we can specify the number of columns by using the columns attribute. Up until now, we are displaying data from only one salesforce record by using the standard controller and by specifying the ID of this record and the URL but how can we display more than one? To do so we can use something called standard list controller. In a standard list controller you are dealing with a collection of records instead of a single one. For that you have to use a special type of components called iteration components. An iteration component works on a collection of similar items. Instead of a single value, an iteration component loops through its collection and for each record it will generate some output based on a template that you provide as a part of the component markup. We have more than one type of iteration component. We can use the page block table component and we can use the repeat component. This is a visual force example that is using the standard list controller. Notice that we are using the same attribute standard controller to refer to the standard controller contact. But now we are adding another attribute called record setbar.

This is mainly the variable that we want to use in our code and then we are using the page block component with the title and then we are using the page block table component which is an iteration component. We are giving it a value. This value is the variable that we have specified in the first line. So in this case we are using the contacts and then we are specifying the variable that we want to use on each iteration. So this is now called CT. So if you can recall from the for each group we give a variable and then this variable will be used on each iteration. This is the same thing and then in the body of the page block table component we have CT which is this variable and then we have the field. Let’s see that in detail. First of all the page block table component is an iteration component and that is using the variable that was set on the first line. It’s the contacts variable. So this is the list of the records that this page block table component will work with. And then for each one of these records we are specifying its variable and in this case it will be called CT.

And then for each record a page block component constructs a new row by using the column component. So you can see we have four different columns here. Each one will represent a field and this is done by the column component and the column component will use the variable that was set by the page block table component which is in this case CT. So CT will be used to construct the different field values on each one of these columns. This is the content of the table. But what about the table header? Well outside the loop a page block table will use the column component to construct the headers of each one of these columns. So first it will check how many column components I have and then it will fetch the label for each one of these. And this will be the label of the column outside the content of the column. So this is the first step, and then step two will be the loop. To understand all of that, we’ll do the same in salesforce. So let’s jump into salesforce.

3. 4.1- Display Salesforce Data using Visualforce – Demo

So let’s go to the setup page and we will go to the VisualForce pages section and let’s choose one of these. So I will go to this one and then I will edit this to get data from salesforce. So what we have to do now, let me get rid of this. I will use the standard controller attribute to specify the controller. So in this case, let me specify this to the account and I will specify some page block component. So notice if I click on Save, the look and feel of this page will be the account page look and field. There you go. So the color is now blue and we can see that this is now under account. So if I change this to let’s say Opportunity and I click on Save. Now this will be yellow and it will be under Opportunity. There you go. So this is also linked to the look and field. Now I will also add a section section and inside the section I will use Name let’s say and also type and Save.

To get the new line we will use the break tag. And now let’s get the value of an account record. To do that let’s get an account ID. So I will choose this account and I will get the ID from the URL. And now what I will do, I will add this here. So now I’m extracting this VisualForce page to use the account standard controller on this ID. So by clicking on Enter, now this VisualForce page will get the detail of this account ID and it will put it in a variable called account. Now to display the field values I will use the curly brackets and let’s say I want to display the name here. I will do that control dash. There you go. To display the type we’ll use the same thing. I don’t have any type I think here. Yeah, let’s add the type and I will save this and I will refresh. So we have a type now.

Now we’ll use the output field component. This output field component will display both the label and the name and it should be inside the page block section component. So I will remove these and I will add the output field component which is a self contained component. I don’t need to close it in another line, it will be closed on the same line and it will take the value attribute and I will use the same curly brackets to denote the field. So in this case it will be account name control S. There you go. So we’ll have the label involved and we’ll also have the value. So let’s display other fields. Notice by default I have only two columns to add. I will use the attribute columns on the page block section. There you go.

So now I have three columns here. Now let’s use the component to display the whole detail of the record to do so we’ll use the detail component. So let’s get rid of all of that and it will be between the page block and it will be called Apex detail and it’s a self contained component. So controllers, I will have the whole detail of this record as and the standard page. I will now show you the standard list controller. So I will use the same controller account. Let me remove this and to do so I will have to add the variable and let’s call this account. And inside the page block component I will add an iteration component which is in this case the page block table. And now I will specify the variable. So I need to tell this iteration component to use this variable and then I need to specify the variable of each one of the iterations. So step one will be to give the value attribute. In this case it will be the variable that we have given and then we’ll specify the VAR. It will be, let’s say ACC.

Now inside this component we will specify the field that we want to display. To do so we’ll use the column component and we’ll give the value. In this case I need to use this variable because this is the iteration variable. So ACC, let’s say I need to give the account name. So in this case it will be name and I can do the same thing for other fields. So I will copy this control s and I also need to fix this. I did not specify the right variable, so let me put this with s and CTRL s again, there you go. Now we have a list of all the accounts that this user can see. Remember, a standard controller runs in user mode. So this is the standard list controller.

Of course, I can do so many things in the VisualForce. I can add buttons, I can add actions, I can add checkboxes to, check what you can do, check this component reference and go through each one of these. So in this lecture you have learned about VisualForce, what it is, when we have to use it and where we can write it. What is the syntax of a VisualForce page? What are the different components that we can use in a VisualForce page? What is a standard controller? How can we display data using the standard controller? How can we display data of a salesforce record using the standard controller? How we can get the different field values and we can display them on the VisualForce page, how we can use the standard disk controller to display more than one record. And we have seen all of that in Salesforce and the Demo. And finally, as usual, thanks for watching.