Conditionals - Visualforce

Sometimes you want to display something dynamically, based on the value of an expression. For example, if an invoice has no line items, you might want to display the word “none” instead of an empty list, or if some item has expired, you might want to display “late” instead of showing the due date.

You can do this in Visualforce by using a conditional formula expression, such as IF(). The IF() expression takes three arguments:

• The first is a boolean: something that is either true or false. You’ve seen an example of that in the CONTAINS() function.
• The second argument is something that will be returned if the boolean is true.
• The third argument is something that will be returned if the boolean is false.

Insert the following and try to predict what will be displayed if you save the page:

{! IF ( CONTAINS('salesforce.com','force.com'), 'Yep', 'Nah') }
{! IF ( DAY(TODAY()) > 14, 'After the 14th', 'On or before the 14th') }

You’ll see something like this:

Yep
On or before the 14th

Of course, this all depends on when you run the code. After the 14th in a month, it looks different.

Basic Formulas - Visualforce

Visualforce lets you embed more than just variables in the expression language. It also supports formulas that let you manipulate values. The & character is the formula language operator that concatenates strings.

1. Add this to your Visualforce page: {! $User.firstname & ' ' & $User.lastname}
   This tells Visualforce to retrieve the firstname and lastname fields from the global User object, and to concatenate them with a space character. The output will be something like: Joe Bloggs.
   In general, formulas are slightly more advanced and have a simple syntax that includes the function name, a set of parentheses, and an optional set of parameters.
2. Add this to your Visualforce page:

   <p> Today's Date is {! TODAY()} </p>
   <p> Next week it will be {! TODAY() + 7} </p>

   You’ll see something like this in the output:
   

   Today's Date is Wed Feb 08 00:00:00 GMT 2012
   Next week it will be Wed Feb 15 00:00:00 GMT 2012

   The <p> tags are standard HTML for creating paragraphs. In other words, we wanted both sentences to be in individual paragraphs, not all on one line. The TODAY()function returns the current date as a date data type. Note how the time values are all set to 0. Also note the + operator on the date. The expression language assumes you want to add days, so it added 7 days to the date.
3. You can use functions as parameters in other functions, and also have functions that take multiple parameters too. Add this:

   <p>The year today is {! YEAR(TODAY())}</p>
   <p>Tomorrow will be day number  {! DAY(TODAY() + 1)}</p>
   <p>Let's find a maximum: {! MAX(1,2,3,4,5,6,5,4,3,2,1)} </p>
   <p>The square root of 49 is {! SQRT(49)}</p>
   <p>Is it true?  {! CONTAINS('salesforce.com', 'force.com')}</p>

   The output will look something like this:
   

   The year today is 2012
   Tomorrow will be day number 9
   Let's find a maximum: 6
   The square root of 49 is 7.0
   Is it true? true

   The CONTAINS() function returns a boolean value: something that is either true or false. It compares two arguments of text and returns true if the first argument contains the second argument. If not, it returns false. In this case, the string “force.com” is contained within the string “salesforce.com”, so it returns true.

Global Variables - Visualforce

Force.com retains information about the logged-in user in a variable called User. You can access fields of this User variable (and any others) by using a special expression language syntax: {! $<global variable>.<field name>}

1. Modify your existing page to include the following line: {! $User.FirstName}. Remember that any content must lie within the <apex:page> component (between its open and closing tags).
2. Click Save.

Your Visualforce page looks something like this:

<apex:page sidebar="false">
    {! $User.FirstName} </apex:page>

In the future we’ll assume that you know to put any Visualforce markup within the <apex:page> tag. We’ll also assume that by now you’re comfortable enough to “Click Save” and view the result as well!

The {! ... } tells Visualforce that whatever lies within the braces is dynamic and written in the expression language, and its value must be calculated and substituted at run time when someone views the page. Visualforce is case-insensitive, and spaces within the {! ... } syntax are also ignored. So this is just as effective:{!$USER.firstname}.

Here’s how to show the first name and last name of the logged-in user: {! $User.FirstName} {! $User.LastName}

Understanding Simple Variables and Formulas - Visualforce

The Visualforce pages you’ve created so far have been static. In general, Visualforce pages are dynamic—they can display data retrieved from the database, or data that changes depending on who is logged on and viewing the page. They can become dynamic through the use of variables and formulas.

This tutorial introduces you to variables, formulas and the expression language syntax used in Visualforce. Variables typically contain information that you have retrieved from objects in the Force.com database, or which the platform has made available to you—for example, the name of the logged-in user. A number of built-in formulas are available to add functionality to your page—you’ll discover some basic formulas in this tutorial too.

Add Nested Components - Visualforce

Adding additional components is easy.

1. Navigate to the end of the <apex:pageBlockSection> component, and add another <apex:pageBlockSection> component with its own title. Both<apex:pageBlockSection> components must be contained within the same <apex:pageBlock> component.
2. Click Save and admire your handiwork.

   <apex:page sidebar="false">
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
    </apex:pageBlockSection>
           <apex:pageBlockSection title="A New Section">
               This is another section.
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

Note the number of “nested” components. The start and the end tag for an <apex:pageBlockSection> are both within the start and end tag for the <apex:pageBlock>component. And your first <apex:pageBlockSection> ends before the next one starts (its end tag, </apex:pageBlockSection>, appears before the start of the new one, <apex:pageBlockSection>). All of the components on a Visualforce page tend to nest in this way—and the editor tells you when you’ve made a mistake (for example, if you forget an end tag).

Add Additional Components - Visualforce

You’ve created a page, used the <apex:page> component, and changed its behavior. You’ll typically want to use additional components that supply a lot more functionality.

Visualforce comes with a few dozen built-in components, and you can install and build your own components to extend this set. In this lesson you’ll learn how to locate them, and use one.

1. Click the Component Reference link in the Page Editor. A help popup window displays with all available components.
2. Click <apex:pageBlock>. A description of what the component does, and what attributes you can add to change its behavior displays in the Component Details tab.
3. Click the Usage tab to see an example of how to use the component. You’ll notice that the <apex:pageBlock> component is often used with the<apex:pageBlockSection> component. Click <apex:pageBlockSection> to learn more about that component.
   In general, you’ll dip into the component reference whenever you need to. You’ll soon learn what the major components do—and while some of them take a large number of attributes, in practice you will only use a handful.
   Now add both components to your page. We’re going to go a little faster here—see if you can do this without looking at the final code below:
4. Within the <apex:page> component, add an <apex:pageBlock> component with a title attribute set to A Block Title.
5. Within the <apex:pageBlock> component, add an <apex:pageBlockSection> component, with its title attribute set to A Section Title.
6. Within the <apex:pageBlockSection>, add some text, like I'm three components deep!
7. Click Save. Your final code will look something like this:

   <apex:page sidebar="false"> 
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
           </apex:pageBlockSection>
       </apex:pageBlock> </apex:page>

   The final page will look something like this:
   

You can click the tiny disclosure triangle next to A Section Title to minimize that section of the block.

Add Attributes Using Auto-Suggest - Visualforce

Let’s play some more with our first hello page. It turns out that the sidebar attribute is a valid attribute for the <apex:page> component.

1. Add sidebar="false" within the start tag of the <apex:page> component as follows:

   <apex:page sidebar="false">

2. Click Save.
   Notice that the left hand area of your page has changed—the sidebar has been removed. In effect, the sidebar attribute modifies the behavior and appearance of the<apex:page> component.
   
3. Position your cursor just after the final quotation mark ("), and hit the space bar. A helpful list of attributes pop up that are valid for the <apex:page> component. Choose the showHeader attribute.
4. The attribute is automatically added to your page, and you now need to supply a value for the attribute. Add false. Your complete first line should look like this:

   <apex:page sidebar="false" showHeader="false">

5. Click Save (remember, you can also press CTRL+S as a shortcut).
   This time your page looks completely different. By setting the showHeader attribute to false, you’ve not only removed the top header, but all the default styling associated with the page.
   
   Let’s put it back the way it was—having the top header is very useful during development.
6. Change the showHeader attribute’s value to true.
7. Click Save.