Newer Version Available

This content describes an older version of this product. View Latest

Understanding the MassUpdateStatus Visualforce Markup

Let's take a moment to discuss the main Visualforce tags we just added to our MassUpdateStatus page. Although we won't go into all of the use cases for each component or discuss every attribute in depth, you'll get a better understanding of how Visualforce works.

To see general descriptions and examples for all of the Visualforce components and their attributes, click the Component Reference link in the upper right corner of the Visualforce development mode page editor.

Tip

<apex:page>

As with all Visualforce pages, the MassUpdateStatus page must begin with an <apex:page> component. Notice the tag has the same standardController attribute used in our interactive Candidate Map feature, although this time it is set to the Job Application object (Job_Application__c). This makes sense because the Mass Update Status feature updates a field on job application records, not position records.

The component also has a recordSetVar attribute. We use this attribute to change the standardcontroller so that it accommodates a set of records rather than a single record.

<apex:sectionHeader>

The <apex:sectionHeader> component adds a header to the top of the page. The component's title attribute determines the text in the header.

<apex:form>

The <apex:form> component establishes a section on the page in which users can enter data and submit it by clicking a button or link. It's like an invisible container, similar to a <form> element in HTML.

<apex:pageBlock>

The <apex:pageBlock> component designates an outlined area on the page similar to the areas on detail pages that contain sections.

<apex:pageMessages>

The <apex:pageMessages> component allocates space for standard system messages (such as those that notify users when a file is being saved) and validation rule errors. These messages already exist in the Lightning platform, so you don't have to create them—you just have to use this component to make room for them in case the platform needs to display them.

<apex:pageBlockButtons>

The <apex:pageBlockButtons> component allocates space for a set of buttons on the page. Its subcomponents specify what the buttons do and how they are labeled.

<apex:commandButton>

Each <apex:commandButton> component creates an individual button inside the <apex:pageBlockButtons> component. The Mass Update Status page uses two <apex:commandButton> components: one to create a Save button and a second to create a Cancel button. The buttons are styled like standard Salesforce buttons.

The value attribute on the <apex:commandButton> component determines the words that appear on the button (such as “Save” or “Cancel”), while the action attribute determines the operation that occurs when the button is clicked. When setting the action attribute, you must use merge field syntax. For example, to configure the button to save the data entered on the page, set the action attribute to {!save}.

Each button appears twice on our MassUpdateStatus page—once at the top of the area allocated by the <apex:pageBlock> component and once at the bottom. This is a precautionary measure built into the <apex:pageBlockButtons> component to ensure that the button functionality is apparent to users, even if the page block is large.

<apex:pageBlockSection>

The <apex:pageBlockSection> component can be used within <apex:pageBlock> components to create a section on a page similar to the sections found on page layouts. On this page, the <apex:pageBlockSection> component is used twice.

The first instance of the <apex:pageBlockSection> component has a title attribute that's set to "Status Update." This text will appear at the top of the section. It also has a collapsible attribute that determines whether users can collapse and expand the section by clicking an arrow to the left of the title. We don't want users to accidentally collapse this page block section, so the attribute is set to “false.”

The second <apex:pageBlockSection> component creates a section that has a table showing the job applications selected for updating. Its title attribute is set to “Selected Job Applications." Also, its columns attribute is set to “1."

Unlike page layouts, a section on a Visualforce page can have more than two columns. However, the platform's stylesheets are optimized to accommodate one or two columns, so it's best not to exceed that limit.

Tip

<apex:inputField>

The <apex:inputField> component renders the Status field from the Job Application object on our page. Use <apex:inputField> components to create HTML input elements for any Salesforce field. All you need to do is set the component's value attribute to the API name of the Salesforce object and field.

<apex:pageBlockTable>

The <apex:pageBlockTable> component renders a table containing field values from multiple records of a specific object. For our feature, we need to set two of this component's attributes: value and var.

The value attribute tells the table which set of records contains the values to display. In this instance, we set the attribute to the expression {!selected} to enable the table to display values from the selected job applications.

The second attribute, var, creates a name that components within the table can use to reference individual records in the record set without actually referring to each record by name.

<apex:column>

The <apex:column> components inside the <apex:pageBlockTable> determine the columns of the table and the job application fields each column displays. For three of the four <apex:column> components, we just need to set the value attribute to an expression that references the field using the value of the <apex:pageBlockTable> component's var attribute followed by the API name of the field. For example, the following expression displays the values of the Job Application Number field:

1{!application.name}

For the Candidate Name field, though, we need to do a bit more because the field is actually a combination of the First Name and Last Name fields from the Candidate object. To combine these fields, we use an <apex:outputText> component inside an <apex:column> component and set its value attribute to an expression that combines the First Name and Last Name fields from the Candidate object.

1<apex:column headerValue="Candidate Name">
2  <apex:outputText value="{!application.
3      candidate__r.First_Name__c & ' ' &
4      application.candidate__r.Last_Name__c}"/>
5</apex:column>

When you generate column fields in this manner, the value attribute on the <apex:column> component is not set, so the table doesn't know what to use as the column header. Rectify this by setting the headerValue attribute on this <apex:column> component.

Beyond the Basics

Did you know you can add a Chatter feed to a Visualforce page?

Say you want to add the Chatter feed for a position to its detail page. You can simply use the <chatter:feed> standard component:

1<apex:page standardController="Position__c">
2  <chatter:feed entityId="{$!Position__c.id}">
3  <apex:detail />
4</apex:page>

To find out more, see the Visualforce Developer's Guide.