Try It Out: Write Visualforce Markup

In the footer at the bottom of your new Visualforce page, click CandidateMap to display the Visualforce development mode page editor. This editor displays all the markup for the page you're currently viewing—make sure to adjust the width of the bar so that you can see all the content.

Visualforce Development Mode

You'll notice that the page editor has default content.

1<apex:page >
2  <!-- Begin Default Content REMOVE THIS -->
3  <h1>Congratulations</h1>
4  This is your new Page: CandidateMap
5  <!-- End Default Content REMOVE THIS -->
6</apex:page>

The default content contains the Visualforce component tag <apex:page> on the first line and the closing tag, </apex:page>, on the last line. Just like elements in other markup languages, Visualforce component tags have a start tag, such as <apex:page>, and an end tag that is identical to the start tag except that it has a forward slash, such as </apex:page>.

The <apex:page> tag represents a single Visualforce page. All of the other content you want displayed on a page must be wrapped inside the start and end <apex:page> tags. As discussed earlier, content can be other Visualforce tags, plain text, merge fields, HTML, JavaScript, and so forth. For example, in the default content there are comments marked by the <!-- and --> symbols, the HTML <h1> header tag, and plain text.

Let's change the look and feel of the page so it matches the style of the Position object, the object that's most closely tied to our candidate map. We can do this just by setting an attribute on the <apex:page> tag. As with HTML tags, attributes on Visualforce tags configure the style or behavior of what the tag represents.

The attribute we need to set is standardcontroller. In Visualforce, controllers determine the style of the page, how the page acts when a user clicks a button, and the data that should be displayed in a page. Simply by setting the value of the standardcontroller attribute to the Position object, we're configuring our page to look and behave like the position pages, and display position data.

1. Place your cursor just inside the closing bracket of the <apex:page> tag, press the spacebar, and type standardcontroller="Position__c". The result should look like:
   1<apex:page standardcontroller="Position__c">

   You can develop your own controllers, but the Lightning platform also includes a standard controller for every object, including custom objects that you create. It's another one of the benefits of Lightning Platform!

   Tip

Note that the format for setting an attribute is the name of the attribute followed by the equals sign (=), then the value of the attribute enclosed in quotes. Also, remember that the unique API names of custom objects have two underscores (__) and the letter c at the end.

Let's save our work so we can see our changes applied.

2. Click the save icon () on the page editor, or press CTRL+S.

When you save your markup, the Lightning platform checks to make sure it's valid and lets you know if there are errors. If the markup is valid, the new version of your Visualforce page is saved and rendered in your browser.

Can you see how your page is different from before? Setting the standardcontroller attribute changed the look and feel of the default Visualforce page so that the Positions tab is selected.

Before and After Setting the standardcontroller Attribute

Next, let's remove the default HTML on our Visualforce page and replace it with something relevant to our Candidate Map, such as a brief description of the page just in case the purpose of the map isn't immediately obvious to users.

3. Delete the following markup:
   1<!-- Begin Default Content REMOVE THIS -->
   2  <h1>Congratulations</h1>
   3  This is your new Page: CandidateMap
   4  <!-- End Default Content REMOVE THIS -->

4. Enter the following markup between the start and end <apex:page> tags.
   1This map shows the locations of candidates who have applied for the <b>{!Position__c.Name}</b> position.

1<apex:page standardController="Position__c">
2This map shows the locations of candidates who have applied for the <b>{!Position__c.Name}</b> position.
3</apex:page>

The description includes the {!Position__c.Name} merge field enclosed in the <b> HTML tag. We've used merge fields quite a bit while building our app. They were in our email template and some of our formulas. Now, we're using them once again, this time side by side with HTML and Visualforce component tags.

5. Click the save icon () on the page editor.

Right now, our merge field isn't displaying because the Candidate Map is out of context, that is, there's no specific position record from which it can grab the data. Don't worry about that for now—we'll learn how to set context later. For now just trust that the {!Position__c.Name} merge field will render the position name, and the <b> HTML tag will make it bold.

Our Visualforce page is now ready for us to add our interactive map!