VISUALFORCE DEVELOPMENT

Visualforce: Introduction – Creating Visualforce pages – Important

Visualforce Tags - Exploring the View and Controller layers of
Visualforce – Standard Controller – Display data from a record in a
Visualforce page – Display related data – Invoke standard controller
actions – Using standard list controller in a Visualforce page – Using
custom controllers and extensions – Security concerns.

https://trailhead.salesforce.com/content/learn
/modules/visualforce_fundamentals
Introduction to Visualforce
• Visualforce
• is a web development framework that enables developers to build
sophisticated, custom user interfaces for mobile and desktop apps that can be
hosted on the Lightning Platform.
• use Visualforce to build apps that align with the styling of Lightning
Experience, as well as your own completely custom interface
• enables developers to extend Salesforce’s built-in features, replace them with
new functionality, and build completely new apps.
• Use powerful built-in standard controller features, or write your own custom
business logic in Apex.
• You can build functionality for your own organization, or create apps for sale
in the AppExchange.
Introduction to Visualforce cntd….
• Developers create Visualforce pages by composing components,
HTML, and optional styling elements.
• Visualforce can integrate with any standard web technology or
JavaScript framework to allow for a more animated and rich user
interface.
 An Example Visualforce Page
apex:page standardController="Contact" >
<apex:form >

<apex:pageBlockButtons >
<apex:pageBlock title="Edit Contact"> <apex:commandButton action="{!save}"
<apex:pageBlockSection columns="1"> value="Save"/>
<apex:inputField value="{!Contact.FirstName}"/> </apex:pageBlockButtons>
</apex:pageBlock>
<apex:inputField value="{!Contact.LastName}"/>
<apex:inputField value="{!Contact.Email}"/> </apex:form>
<apex:inputField value="{!Contact.Birthdate}"/> </apex:page>
</apex:pageBlockSection>
Creating Visualforce Pages
• Visualforce uses a tag-based markup language that’s similar to HTML.
• Each Visualforce tag corresponds to a coarse or fine-grained user
interface component, such as a section of a page, a list view, or an
individual field.
• Visualforce boasts nearly 150 built-in components, and provides a
way for developers to create their own components.
• Visualforce markup can be freely mixed with HTML markup, CSS
styles, and JavaScript libraries, giving you considerable flexibility in
how you implement your app’s user interface.
Create Visualforce Pages in the Developer Console

• Open the Developer Console under Your Name or the quick access
menu (Setup gear icon).
• The Developer Console opens in a new window.
• Click File | New | Visualforce Page.
• Enter HelloWorld for the name of the new page, and click OK.
• A new, blank Visualforce page opens in the Developer Console.
• In the editor, enter the following markup for the page.
<apex:page>
• Click File | Save. <h1>Hello World</h1>
• To see your new page, click Preview. </apex:page>
Ex:
<apex:page >
<apex:page > <h1>Hello World</h1>
<p>
<h1>Hello World</h1> This is my first visual Page!....
</apex:page> </p>
</apex:page>
Add Attributes Using Auto-Suggest

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

<h1>Hello World</h1>
</apex:page>
Add and Compose Components to Form a Page
Structure
apex:page>
<h1>Hello World</h1>
<apex:pageBlock title="A Block Title">
<apex:pageBlockSection title="A Section Title">
I'm three components deep!
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Simple Variables and Formulas
• Global Variables
• to access and display system values <apex:page>
and resources in your Visualforce
markup. <apex:pageBlock title="User Status">
<apex:pageBlockSection columns="1">
• For example, Visualforce provides
information about the logged-in
user in a global variable called {! $User.FirstName } {! $User.LastName }
$User. Y ({! $User.Username })
• ou can access fields of the $User <p> Today's Date is {! TODAY() } </p>
global variable (and any others) <p> Next week it will be {! TODAY() + 7 } </p>
using an expression of the
following form: {! </apex:pageBlockSection>
$GlobalName.fieldName } </apex:pageBlock>

</apex:page>
Important Visualforce Tags
• <apex:page> • <apex:inputHidden>
• <apex:form> • <apex:inputsecret>
• <apex:pageblock> • <apex:inputText>
• <apex:pageBlockSection> • <apex:inputTextarea>
• <apex:commandButton> • <apex:inputCheckbox>
• <apex:pageBlockButtons> • <apex:outputField>
• <apex:commandLink> • <apex:outputLabel>
• <apex:outputLink> • <apex:outputText>
• <apex:inputField> • <apex:pageBlockSectionItem>
• <apex:inputFile> • <apex:pageBlockTable>
Important Visualforce Tags
• <apex:column> • <apex:actionFunction>
• <apex:dataTable> • <apex:detail>
• <apex:tabPanel> • <apex:actionPoller>
• <apex:tab> • <apex:actionRegion>
• <apex:toolbar> • Message Class
• <apex:toolbarGroup> • <apex:variable>
• <apex:stylesheet>
• <apex:pageMessage>
• Referencing a Static Resource in Visualforce
• <apex:panelBar> Pages
• <apex:panelBarItem> • <apex:SectionHeader >
• <apex:panelGrid> • <apex:relatedList>
• <apex:panelGroup> • <apex:listViews>
• <apex:param> • <apex:enhancedList>
• <apex:repeat> • <apex:actionStatus>
• <apex:facet> • <apex:actionSupport>
 Exploring the View and Controller layers of
Visualforce
• Model view controller (MVC) is a software architecture pattern
which separates the representation of information from the
user’s interaction with it.
• SFDC MVC pattern contains below three modules:
• Model
• View
• Controller
• Model: What schema and data does salesforce uses to
represent the system completely. In salesforce, we can say
that sObjects are the model as every entity in salesforce is
mapped to some sObject.
• View: How the schema and data is represented. Visualforce is
used to present the data to users.
• Controller: How the interface actions. Controllers are used to
perform the actions whenever users interact with visual force.
SFDC MVC
• View Layer of Model View controller
• Visual Force pages, Page Layouts, Tabs
• Controller part in Model View controller
• Workflows, Apex Classes, Triggers
• Model Layer of Model View Controller .
• Objects, Fields, Relationships
Standard Controller
• built-in controllers are referred to generally as standard controllers,
or even the standard controller.
• built-in controllers
• to handle standard actions and data access
• providing simple and tight integration with the Lightning Platform database
• Most standard and all custom objects have standard controllers that
can be used to interact with the data associated with the object
Display Data from a Single Record
• Add the standard controller for accounts to the page, and then
reference account fields to display a record’s data.
<apex:page standardController="Account">
<apex:pageBlock title="Account Summary">
<apex:pageBlockSection>

Name: {! Account.Name } <br/>

Phone: {! Account.Phone } <br/>
Industry: {! Account.Industry } <br/>
Revenue: {! Account.AnnualRevenue } <br/>

</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Find a Record ID and Add It to the Request URL
Cntd…..
<apex:page>
<apex:pageBlock title="Account Summary">
<apex:pageBlockSection>

$A.get("e.force:navigateToURL").setParams( {"url":
"/apex/pageName?&id=00141000004jkU0AAI"}).fire();

</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Display Fields from Related Records
• viewing the object details for Account,
• Account Owner, and that its type is Lookup(User).

Account owner: {! Account.Owner.Name } <br/>

Invoke standard controller actions
• Action methods perform logic or navigation when a page event
occurs, such as when a user clicks a button, or hovers over an area of
the page.
• Tags Support:
• <apex:commandButton> creates a button that calls an action
• <apex:commandLink> creates a link that calls an action
• <apex:actionPoller> periodically calls an action
• <apex:actionSupport> makes an event (such as “onclick”, “onmouseover”, and
so on) on another, named component, call an action
• <apex:actionFunction> defines a new JavaScript function that calls an action
• <apex:page> calls an action when the page is loaded
Action Description
save Inserts a new record or updates an existing record if it is currently in context. After
` this operation is finished, the save action returns the user to the original page (if
known), or navigates the user to the detail page for the saved record.
quicksave Inserts a new record or updates an existing record if it is currently in context. Unlike
the save action, this page does not redirect the user to another page.
edit Navigates the user to the edit page for the record that is currently in context. After
this operation is finished, the edit action returns the user to the page where the
user originally invoked the action.
delete Deletes the record that is currently in content. After this operation is finished,
the delete action either refreshes the page or sends the user to tab for the
associated object.
cancel Aborts an edit operation. After this operation is finished, the cancel action returns
the user to the page where the user originally invoked the edit.
list Returns a PageReference object of the standard list page, based on the most
recently used list filter for that object. For example, if the standard controller
is contact, and the last filtered list that the user viewed is New Last Week, the
Display Records, Fields, and Tables
• https://trailhead.salesforce.com/content/learn/modules/visualforce_
fundamentals/visualforce_output_components
Input Data Using Forms
• https://trailhead.salesforce.com/content/learn/modules/visualforce_
fundamentals/visualforce_forms

• Create a Basic Form

• Add Field Labels and Platform Styling
• Display Form Errors and Messages
• Edit Related Records
Standard List Controllers
• Displaying a list of records is a fundamental behavior of almost all
web apps.
• Visualforce makes it extremely easy to display a list of records of the
same type, using just markup, no back-end code.
• The secret, as usual, is the standard controller, in this case, the
standard list controller

• https://trailhead.salesforce.com/content/learn/modules/visualforce_
fundamentals/visualforce_standard_list_controllers
Display a List of Records
<apex:page standardController="Contact" recordSetVar="contacts">
<apex:pageBlock title="Contacts List">
<!-- Contacts List -->
<apex:pageBlockTable value="{! contacts }" var="ct">
<apex:column value="{! ct.FirstName }"/>
<apex:column value="{! ct.LastName }"/>
<apex:column value="{! ct.Email }"/>
<apex:column value="{! ct.Account.Name }"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Add List View Filtering to the List
Filter:
<apex:selectList value="{! filterId }" size="1">
<apex:selectOptions value="{! listViewOptions }"/>
<apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>
Add Pagination to the List
<!-- Pagination -->
<table style="width: 100%"><tr>
<td>
<!-- Page X of Y -->
</td>
<td align="center">
<!-- Previous page -->
<!-- Next page -->
</td>
<td align="right">
<!-- Records per page -->
</td>
</tr></table>
Create & Use Custom Controllers
• Custom controllers
• contain custom logic and data manipulation that can be used by a Visualforce
page.
• For example, a custom controller
• can retrieve a list of items to be displayed, make a callout to an external web service,
validate and insert data, and more—and all of these operations will be available to the
Visualforce page that uses it as a controller.

• https://trailhead.salesforce.com/content/learn/modules/visualforce_fundam
entals/visualforce_custom_controllers