How to create Visualforce page – Salesforce Tutorials

How to create Visualforce page

Create Visualforce Page:- In our previous Salesforce Tutorial we have learned about What is Visualforce? Where we use visualforce? Advantages of Visualforce pages, Visualforce Model view Architecture and Visualforce Controller Architecture. In this Salesforce Training Tutorial we are going to learn about Creating our first Visualforce page in Salesforce.com. Before creating Visualforce page we have to enable development mode in salesforce. Read Development mode Salesforce tutorial article here.

How to create Visualforce page

Before creating Visualforce page we have to enable development mode in salesforce. Development mode feature in Salesforce.com allows user to code and view the compiled results within the same browser window. In Salesforce Visualforce pages can be created in two ways. They are

  • Creating Visualforce page by going to setup=>Build=>Develop=>Pages.
  • By entering new page name in https://c.ap1.visual.force.com/apex/Enter your page name here. Ex:- https://c.ap1.visual.force.com/apex/MySecondVFPage

How to create Visualforce page - Salesforce Tutorials

  • Click on Create Page MYSecondVFPage  to create Visualforce page.
  • To create Visualforce page go to Setup=>Build=>Develop=>Pages.How to create Visualforce page - Salesforce Tutorials
  • Click on Pages.

How to create Visualforce page - Salesforce Tutorials

  • Select New button to create new VF page.

How to create Visualforce page - Salesforce Tutorials

  • Enter all the details as shown above.
  • Now write your visualforce code below.

How to create Visualforce page - Salesforce Tutorials

  • Every Visualforce page is started with <apex:page> tag and should end with </apex:page>.
  • Comment must be written between <!–> tag.
  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6> are the Headlines.
  • <p/> :- New paragraph.
  • Now click on Quick Save button.
  • Select preview button.

How to create Visualforce page - Salesforce Tutorials

Visualforce page  Output for Mypage is as shown above. Click on Cross symbol to open development mode. By enabling development mode we can modify code and can see output in above screen.