Get Started with Visualforce

Introduction to Visualforce:

Visualforce is a markup language used to build custom user interfaces in the Salesforce platform

Visualforce pages are used to create custom pages that can be integrated into the Salesforce user
interface

Visualforce pages allow you to create a unique look and feel for your custom pages, and can be used to
display data from Salesforce records, display charts and graphs, and perform various actions such as
creating or updating records

Creating Visualforce Pages:

Visualforce pages are created using a combination of Visualforce tags and standard HTML tags

Visualforce tags are used to access Salesforce data and functionality, while HTML tags are used to define
the layout and styling of the page

Visualforce pages can be created using the Visualforce editor in the Salesforce developer console, or
using an external code editor such as Eclipse

Using Apex Controllers with Visualforce Pages:

Apex controllers are Java-like classes that provide additional functionality to Visualforce pages

Apex controllers can handle user input, interact with Salesforce data, and perform various actions such
as creating or updating records

Apex controllers can be used to customize the behavior of Visualforce pages, and can be used to
implement business logic and validation rules

Using Visualforce Pages with Salesforce:

Visualforce pages can be accessed from within Salesforce, or can be embedded in external websites
using the Salesforce Lightning Out feature

Visualforce pages can be used for a variety of purposes, such as creating custom record detail pages,
creating custom list views, building custom data entry forms, and creating custom dashboards
Visualforce pages can be accessed by users with the appropriate permissions, and can be restricted to
specific profiles or user groups

Customizing Visualforce Pages:

Visualforce pages can be customized to meet a wide range of requirements

Visualforce pages can be styled using standard HTML and CSS techniques, or can use pre-defined styles
provided by Salesforce

Visualforce pages can be customized using custom components, which are reusable blocks of Visualforce
code that can be easily incorporated into multiple pages

Visualforce pages can be customized using custom controllers, which are Apex classes that provide
additional functionality to the page

Here is an example of Visualforce page

<apex:page standardController="Contact" >

<apex:form >
<apex:pageBlock title="Edit Contact">
<apex:pageBlockSection columns="1">
<apex:inputField value="{!Contact.FirstName}"/>
<apex:inputField value="{!Contact.LastName}"/>
<apex:inputField value="{!Contact.Email}"/>
<apex:inputField value="{!Contact.Birthdate}"/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Explanation :

This is a Visualforce page that allows users to edit a contact record. The page includes a form with a
page block that contains input fields for various fields on the contact record, including the first name,
last name, email, and birthdate. The page also includes a command button that allows the user to save
their changes to the contact record when clicked.
The page uses the standard controller for the Contact object, which provides access to the contact
record data and allows the page to perform actions such as saving changes to the record. The input
fields use the "apex:inputField" tag to display the values of the corresponding fields on the contact
record, and allow the user to edit the values. The "apex:commandButton" tag is used to create a button
that, when clicked, performs the specified action (in this case, saving the changes to the contact record).

Overall, this Visualforce page provides a user-friendly interface for editing contact records in Salesforce.
It allows users to easily update the fields on a contact record and save their changes, making it a useful
tool for managing contact data within the Salesforce platform.

Create & Edit Visualforce Pages

Create Visualforce Pages in the Developer Console

Use the Developer Console to create and edit Visualforce pages, with access to other powerful Lightning
Platform development tools. The Developer Console has automatic syntax highlighting, tag pair
matching, auto-suggest and auto-complete, smart indenting, and many other features aimed at making
it useful for editing markup and code. It’s the best built-in tool to use when you’re working on the same
page for a while, or for Visualforce pages with custom controllers, longer, more complex code, and so
on.

Follow these steps to create a Visualforce page 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>
<h1>Hello World</h1>
</apex:page>
Click File | Save.

To see your new page, click Preview. The rendered page opens in a new window. Note that this page
preview shows your page without Salesforce styling. To see your page in the context of Lightning
Experience, return to your main Lightning Experience browser window. Open your browser’s JavaScript
console and enter the following code. Don’t forget to replace pageName with your page’s name:

$A.get("e.force:navigateToURL").setParams(
{"url": "/apex/pageName"}).fire();

Add Attributes Using Auto-Suggest

In your HelloWorld page, click inside the opening <apex:page> tag, right before the closing >. Type a
space and then s. Auto-suggest presents a list of possible completions for what you type. As you type
additional characters, the list of suggestions is reduced to only matching values.

Add and Compose Components to Form a Page Structure

In your HelloWorld page, add a <apex:pageBlock> component below the text “Hello World”.
<apex:pageBlock> is a structured user interface element that groups related items on a page. Use auto-
suggest to add it, and set the title attribute to “A Block Title”.

Add a <apex:pageBlockSection> component inside the <apex:pageBlock> component. Set the title
attribute to “A Section Title”. <apex:pageBlockSection> is another component that adds structure and
hierarchy to a page. When rendered, <apex:pageBlockSection> elements can be collapsed by the user to
hide all but the section title.
Add some text inside <apex:pageBlockSection> component, such as “I’m three components deep!”. Your
code should look like this.

<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>

Create & Edit Visualforce Pages-

Challenge
Question :-

Create a Visualforce page without the standard Salesforce header and display an image using the
Visualforce image component.

Challenge Requirements

Create a new Visualforce page:

Label: DisplayImage

Name: DisplayImage

It must not display the standard Salesforce headerIt must use a Visualforce apex:image component to
display this image: https://developer.salesforce.com/files/salesforce-developer-network-logo.png. Give
the code for this without comments

Answer

<apex:page showHeader="false">
<apex:image url="https://developer.salesforce.com/files/salesforce-developer-network-
logo.png"/>
</apex:page>
This page includes the following Visualforce tags and attributes:

apex:page: This is the root tag for a Visualforce page. It has an attribute called showHeader that
specifies whether the standard Salesforce header should be displayed (in this case, it is set to false to
hide the header).

apex:image: This tag represents an image on a Visualforce page. It has an attribute called url that
specifies the URL of the image to display (in this case, the URL of the Salesforce developer network
logo).

Use Simple Variables and Formulas

Global Variables
Use global variables to access and display system values and resources in your Visualforce markup.

For example, Visualforce provides information about the logged-in user in a global variable called $User.
You can access fields of the $User global variable (and any others) using an expression of the following
form: {! $GlobalName.fieldName }.

<apex:page>
<apex:pageBlock title="User Status">
<apex:pageBlockSection columns="1">
{! $User.FirstName } {! $User.LastName }
({! $User.Username })
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Formula Expressions
Visualforce lets you use more than just global variables in the expression language. It also supports
formulas that let you manipulate values.

For example, the & character is the formula language operator that concatenates strings.

In your UserStatus page, replace the separate expressions for the first and last name with the following
formula expression.

{! $User.FirstName & ' ' & $User.LastName }

This expression combines the logged in user’s first name and last name, separating them with a space.
The output should look identical.
Add the following to the page markup, below the user information.

<p> Today's Date is {! TODAY() } </p>

<p> Next week it will be {! TODAY() + 7 } </p>

These are more complex formulas that use the TODAY()function. Functions are built-in calculations that
you can identify by the parenthesis after their name.The first expression simply calculates the current
date, and the second uses the addition operator to add seven days to the date. The output in your page
will look something like this.

Today's Date is Thu Sep 18 00:00:00 GMT 2014

Next week it will be Thu Sep 25 00:00:00 GMT 2014

Add the following to the page markup, below the date expressions.

<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>

Some functions, like TODAY(), have empty parenthesis, but some take parameters, values that you want
the function to use to do its calculation. In this example, YEAR() takes a date parameter, which is
provided by the TODAY() function, which takes no parameters. The MAX() function can take any number
of parameters. The CONTAINS() function is especially interesting. It 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.

Conditional Expressions
Conditional expressions are used in Visualforce pages to execute a piece of code or output a value based
on a condition. Here is an example of how to use a conditional expression in a Visualforce page:

In your UserStatuspage, below the other expressions, add the following code.

<p>{! IF( CONTAINS('salesforce.com','force.com'),

'Yep', 'Nope') }</p>
<p>{! IF( DAY(TODAY()) < 15,
 'Before the 15th', 'The 15th or after') }</p>

The Final code should look like this.

<apex:page >
<apex:pageBlock title="User Status">
<apex:pageBlockSection columns="1">
{! $User.FirstName & ' ' & $User.LastName }
({! IF($User.isActive, $User.Username, 'inactive') })
<p> Today's Date is {! TODAY() } </p>
<p> Next week it will be {! TODAY() + 7 } </p>
<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>
<p>{! IF( CONTAINS('salesforce.com','force.com'),
'Yep', 'Nope') }</p>
<p>{! IF( DAY(TODAY()) < 15,
'Before the 15th', 'The 15th or after') }</p>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Use Simple Variables and Formulas –

Challenge
Challenge Question :
Create a Visualforce page that shows user information
Create a Visualforce page that displays the first name of the currently logged-in user.

Challenge Requirements

 Create a new Visualforce page:

 Label: DisplayUserInfo
 Name: DisplayUserInfo
 The displayed user information must be generated dynamically from the logged-in user
Challenge Answer :

<apex:page >
<apex:pageBlock title="User Status">
<apex:pageBlockSection columns="1">
{! $User.FirstName & ' ' & $User.LastName }
({! IF($User.isActive, $User.Username, 'inactive') })
<p> Today's Date is {! TODAY() } </p>
<p> Next week it will be {! TODAY() + 7 } </p>
<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>
<p>{! IF( CONTAINS('salesforce.com','force.com'),
'Yep', 'Nope') }</p>
<p>{! IF( DAY(TODAY()) < 15,
'Before the 15th', 'The 15th or after') }</p>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Use Standard Controllers

Standard controllers are a feature of Visualforce that allow you to access the standard functionality and
data of a standard object, such as an Account or a Contact, in your Visualforce pages.

To use a standard controller in a Visualforce page, specify the standardController attribute on the
apex:page tag and set its value to the API name of the standard object.

Standard controllers provide access to standard object data and functionality, such as record create,
read, update, and delete (CRUD) operations, and default list views.

Standard controllers also provide access to standard object fields, as well as standard object-specific
functionality, such as the ability to add related records or open related lists.

You can use standard controllers in combination with Visualforce controllers and extensions to add
custom logic and functionality to your Visualforce pages.

Standard controllers are typically used to create simple pages that display or edit a single record, or to
create list views that display a list of records.
You can use standard controllers in Visualforce pages that are accessed through the Salesforce mobile
app, Lightning Experience, or Salesforce Classic.

Find a Record ID and Add It to the Request URL

Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page.
Enter AccountSummary for the page name.

In the editor, replace any markup with the following.

<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>

To preview your page in the context of Lightning Experience, return to your main browser window
where you can see the account detail page. From the account detail page, open your browser’s
JavaScript console and enter the following code. Don’t forget to replace pageNamewith your page’s
name:

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

Alternatively, the destination page could use a Visualforce controller to retrieve the Account record data
using a SOQL query, and then display the data using apex:outputField components or custom
Visualforce components.

<apex:page controller="MyController">
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection>
<apex:outputField value="{! account.Name }" />
<apex:outputField value="{! account.Phone }" />
<apex:outputField value="{! account.Industry }" />
 <apex:outputField value="{! account.AnnualRevenue }" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Paste the below code by creating a new class named MyController and this will give you the current
account record details from apex class and show it in the UI

public class MyController {

public Account account { get; set; }

public MyController() {
account = [SELECT Name, Phone, Industry, AnnualRevenue FROM Account WHERE Id
= :ApexPages.currentPage().getParameters().get('id')];
}
}

This page would retrieve the Account record data using a SOQL query, and then display the data using
apex:outputField components.

Use Standard Controllers - Challenge

Question :

CREATE A VISUALFORCE PAGE THAT SHOWS A BASIC CONTACT RECORD

USING THE CONTACT STANDARD CONTROLLER, CREATE A VISUALFORCE PAGE THAT DISPLAYS A CONTACT'S FIRST
NAME, LAST NAME AND THE EMAIL ADDRESS OF THE CONTACT'S OWNER .

CHALLENGE REQUIREMENTS

CREATE A NEW VISUALFORCE PAGE :

LABEL: CONTACT VIEW

NAME: CONTACT VIEW

STANDARD CONTROLLER: CONTACT

YOUR PAGE MUST INCLUDE THREE BIND VARIABLES THAT USE THE STANDARD CONTROLLER TO DISPLAY THE
FOLLOWING CONTACT RECORD INFORMATION :

FIRST NAME

LAST NAME

OWNER EMAIL

ANSWER

<apex:page standardController="Contact">
<apex:outputField value="{!Contact.FirstName}" />
<apex:outputField value="{!Contact.LastName}" />
<apex:outputField value="{!Contact.Owner.Email}" />
</apex:page>

Display Records, Fields, and Tables

To display a record or field value in a Visualforce page, you can use an apex:outputField component. This
component automatically displays the value of the specified field for the record specified by the
standard or custom controller. It is important to use the apex:outputField component instead of just
displaying the field value directly, because it ensures that the field value is properly formatted and
security is enforced.

To display a list of records in a Visualforce page, you can use an apex:dataTable component. This
component allows you to specify the data source for the records and the fields to be displayed. You can
also use other Visualforce components such as apex:pageBlockTable or apex:repeat to display lists of
records. It is important to paginate large lists of records to improve performance and usability.

To customize the appearance of records and fields in a Visualforce page, you can use CSS styles and
Visualforce components such as apex:pageBlock and apex:pageBlockSection. These components allow
you to add formatting, layout, and grouping to your page. You can also use Visualforce components such
as apex:panelGrid and apex:pageBlockSectionItem to control the layout of individual fields.
To provide users with the ability to interact with records and fields in a Visualforce page, you can use
Visualforce components such as apex:inputField, apex:commandButton, and apex:selectList. These
components allow you to create forms, buttons, and dropdown lists that allow users to input data and
perform actions. It is important to validate user input and handle errors to ensure data integrity and
user experience.

To access and manipulate records and fields in a Visualforce page, you can use standard controllers,
custom controllers, and controller extensions. Standard controllers provide access to the standard
functionality and data of a standard object, such as record CRUD operations and default list views.
Custom controllers and controller extensions allow you to add custom logic and functionality to your
pages, such as custom queries, calculations, and business rules.

To display related records in a Visualforce page, you can use Visualforce components such as
apex:relatedList or apex:pageBlockTable with a custom controller or controller extension. You can use a
SOQL query or a relationship query to retrieve the related records, and then display the records using
the appropriate Visualforce components.

To display records from multiple objects in a Visualforce page, you can use a custom controller or
controller extension that retrieves the records using SOQL queries or relationship queries. You can then
use Visualforce components such as apex:pageBlockTable or apex:dataTable to display the records.

To display records in a Visualforce page based on user input or other conditions, you can use Visualforce
components such as apex:inputField, apex:commandButton, and apex:selectList to gather user input,
and then use a custom controller or controller extension to perform the necessary queries and
calculations. You can also use Visualforce components such as apex:outputPanel and apex:panelGroup
to control the visibility of different elements on the page based on certain conditions.

To display records in a Visualforce page with a custom layout or design, you can use Visualforce
components such as apex:panelGrid and apex:pageBlockSectionItem to control the layout of individual
fields, and then use CSS styles and custom Visualforce components to further customize the appearance
of the page.
To display records in a Visualforce page that can be sorted, filtered, or searched by users, you can use
Visualforce components such as apex:commandLink, apex:inputText, and apex:selectList to allow users
to interact with the data, and then use a custom controller or controller extension to implement the
necessary sorting, filtering, and searching logic.

Below is an example on how to Print Account Record along with a contact related list which is in table
format

<apex:page standardController="Account">
<apex:form >
<apex:pageBlock title="Edit Account">
<apex:pageMessages />
<apex:pageBlockSection columns="1">
<apex:inputField value="{! Account.Name }"/>
<apex:inputField value="{! Account.Phone }"/>
<apex:inputField value="{! Account.Industry }"/>
<apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton action="{! save }" value="Save" />
</apex:pageBlockButtons>
</apex:pageBlock>
<apex:pageBlock title="Contacts">
<apex:pageBlockTable value="{!Account.contacts}" var="contact">
<apex:column >
<apex:outputLink value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
Edit
</apex:outputLink>
&nbsp;
<apex:outputLink value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
Del
</apex:outputLink>
</apex:column>
<apex:column value="{!contact.Name}"/>
<apex:column value="{!contact.Title}"/>
<apex:column value="{!contact.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
Display Records, Fields, and Tables -
Challenge
Question :

Create a Visualforce page that displays a variety of output fields

Create a page that displays a subset of Opportunity fields using apex:outputField components. Bind the Name,
Amount, Close Date and Account Name fields to the apex:outputField components.

Challenge Requirements

 Create a new Visualforce page:

 Label: OppView
 Name: OppView
 Standard controller: Opportunity
 It must have four apex:outputField components bound to the following Opportunity fields:
 Opportunity Name
 Amount
 Close Date
 Account Name of the Opportunity

Answer :

<apex:page standardController="Opportunity">
<apex:outputField value="{!Opportunity.Name}" />
<apex:outputField value="{!Opportunity.Amount}" />
<apex:outputField value="{!Opportunity.CloseDate}" />
<apex:outputField value="{!Opportunity.Account.Name}" />
</apex:page>

Input Data Using Forms

To create a form for users to input data in a Visualforce page, you can use the apex:form component
and nested Visualforce components such as apex:inputField, apex:inputText, and apex:selectList.

To create a form that allows users to create or update a record, you can use a standard or custom
controller that provides access to the record data and functionality, such as the save method.
To create a form that allows users to input multiple records at once, you can use a Visualforce
component such as apex:pageBlockTable with nested apex:inputField or apex:inputText components,
and a custom controller or controller extension that processes the input data and creates or updates the
records.

To validate user input in a form, you can use Visualforce components such as apex:inputField and
apex:inputText with the required attribute set to true, and use custom controller or controller extension
logic to validate the data using Apex methods such as isBlank and isValid, and to handle errors and
display error messages to the user.

To provide users with helpful hints or guidance while inputting data in a form, you can use Visualforce
components such as apex:outputLabel and apex:outputText to display static or dynamic text, and use
the title attribute on input components to display tooltips.

To improve the user experience and usability of a form, you can use Visualforce components such as
apex:pageBlockSectionItem and apex:pageBlockSection to group related fields, use the label attribute on
input components to display field labels, and use the size attribute on input components to control the
width of input fields.

Below is an example of VF page that creates Account and Contact and displays error on top of the page
if any

<apex:page standardController="Account">
<apex:form >
<apex:pageBlock title="Edit Account">
<apex:pageBlockSection columns="1">
<apex:inputField value="{! Account.Name }"/>
<apex:inputField value="{! Account.Phone }"/>
<apex:inputField value="{! Account.Industry }"/>
<apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton action="{! save }" value="Save" />
</apex:pageBlockButtons>
</apex:pageBlock>
 <apex:pageBlock title="Contacts">
<apex:pageBlockTable value="{!Account.contacts}" var="contact">
<apex:column >
<apex:outputLink value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
Edit
</apex:outputLink>
&nbsp;
<apex:outputLink value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
Del
</apex:outputLink>
</apex:column>
<apex:column value="{!contact.Name}"/>
<apex:column value="{!contact.Title}"/>
<apex:column value="{!contact.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:pageMessages />
</apex:form>
</apex:page>

Input Data Using Forms- Challenge

Challenge :

Create a Visualforce form which inserts a basic Contact record

Using the Visualforce apex:form component, create a page that inserts a Contact record based on First Name,
Last Name and Email. After submitting the form, the user should be redirected to the detail page of the new
Contact record.

Challenge Requirements

 Create a new Visualforce page:

 Label: CreateContact
 Name: CreateContact
 Standard controller: Contact
 Your page must use a Visualforce apex:form component
 Your page must have three apex:inputField components bound to the following Contact fields:
 First Name
 Last Name
 Email
  Your page must have an apex:commandButton component that uses the save method from the
standard controller

Answer:

<apex:page standardController="Contact">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:inputField value="{!Contact.FirstName}" />
<apex:inputField value="{!Contact.LastName}" />
<apex:inputField value="{!Contact.Email}" />
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Use Static Resources

Introduction to Static Resources

Static resources allow you to upload content that you can reference in a Visualforce page. Resources can
be archives (such as .zip and .jar files), images, stylesheets, JavaScript, and other files.

Static resources are managed and distributed by Lightning Platform, which acts as a content distribution
network (CDN) for the files. Caching and distribution are handled automatically.

Static resources are referenced using the $Resource global variable, which can be used directly by
Visualforce, or used as a parameter to functions such as URLFOR().

Add a Static Resource to a Visualforce Page

Use the $Resource global variable and dot notation to reference a stand-alone static resource.

Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce page.
Enter HelloJQuery for the page name.

In the editor, replace any markup with the following.

<apex:page>
<!-- Add the static resource to page's <head> -->
<apex:includeScript value="{! $Resource.jQuery }"/>
<!-- A short bit of jQuery to test it's there -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#message").html("Hello from jQuery!");
});
</script>
<!-- Where the jQuery message will appear -->
<h1 id="message"></h1>
</apex:page>

Create and Upload a Zipped Static Resource

Create zipped static resources to group together related files that are usually updated together.

When your static assets are a set of related items—for example, a set of application icons, or a complex
JavaScript library—it’s best to create a zipped static resource. Create a zip file containing all of the
elements you want to group together, and upload only the one zip file to Lightning Platform.

 Download the current version of the jQuery Mobile JavaScript library, in the ZIP format, from
http://jquerymobile.com/download/.
 Open the zip file and remove the /demos/ directory and its contents.
 Compress the folder and rename it jquery.zip.
 From Setup, enter Static Resources in the Quick Find box, then select Static Resources, and then
click New.
 Enter jQueryMobile for the Name.
  If you see the Cache Control menu, choose Public. This item isn’t visible in all organizations.
 Click Save.

Add Zipped Static Resources to a Visualforce Page

 If you haven’t already downloaded the current version of the jQuery Mobile JavaScript library,
follow the directions in the Create and Upload a Zipped Static Resource section to do so. Add it
as a static resource.
 Open the Developer Console and click File | New | Visualforce Page to create a new Visualforce
page. Enter jQueryMobileResources for the page name.
 In the editor, replace any markup with the following

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

<!-- Add static resources to page's <head> -->
<apex:stylesheet value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
<apex:includeScript value="{! $Resource.jQueryMobile }"/>
<apex:includeScript value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.js')}"/>
<div style="margin-left: auto; margin-right: auto; width: 50%">
<!-- Display images directly referenced in a static resource -->
<h3>Images</h3>
<p>A hidden message:
<apex:image alt="eye" title="eye"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/eye-
black.png')}"/>
<apex:image alt="heart" title="heart"
 url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/heart-
black.png')}"/>
<apex:image alt="cloud" title="cloud"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/cloud-
black.png')}"/>
</p>
<!-- Display images referenced by CSS styles, all from a static resource. -->
<h3>Background Images on Buttons</h3>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-star">star</button>
</div>
</apex:page>