Salesforce Visualforce Development: Create Visualforce pages

Discover Visualforce, a component-based, tag-based markup language on the force.com platform, and learn to override standard Salesforce pages with custom Visualforce pages and tailored navigation.

Visualforce follows the MVC design pattern, enabling UI development separate from business logic in Apex, with an editor panel for instant updates and a rich set of built-in components.

Enable development mode in Salesforce to build Visualforce pages, then create pages via the editor, developer console, or Visualforce page links, with switching between lightning and classic.

Explore the seven core Visualforce tag categories: input, output, select, form, page, action, and style tags, and how they handle user input, display, and page structure.

Explore how Apex page attributes, specifically the sidebar and show header, control layout in Visualforce, allowing you to hide the sidebar or header and display Hello world.

Explore Visualforce pageBlock and pageBlockSection tags, and learn how blocks, sections, and items organize fields with a two-column layout and inherit standard Salesforce styling.

Use the page block buttons tag to place apex:commandButton controls on the top and bottom of a Visualforce page, wrapped in a page block button stack within the form.

Use the apex:pageMessage tag to display custom messages on a Visualforce page, with severity (confirm, info, warning, error) and strength (0-3) controlling icons and colors.

Learn how Visualforce input tags capture user input while enforcing field metadata and permissions, and explore types like text, secret, checkbox, file, hidden, and text area.

Explore Visualforce input tags through building a simple form that captures name, age, username, password, cover letter, and a checkbox, using input text, input secret, input text area, and button.

Learn how Visualforce output label and output link tags display text, link to a URL, and connect labels to inputs using the for and value attributes.

Learn to use panel bar and panel bar item tags in Salesforce Visualforce to create expandable panel where the active item’s content is shown and each item has a label.

Create a Visualforce page using panel bar and panel bar item tags to display item contents, with the first item expanded by default and attributes like label, style, and class.

Learn how the onEnter and onLeave attributes work on a panel bar item, with an example that triggers alerts when entering or leaving item one and item two.

Learn to use the panelGrid tag to arrange components into a table-like grid by setting the column attribute, placing elements into cells across rows, and optional border styling.

Create a panel grid in Visualforce using the panelGrid tag with three columns, add outputText items, and use panelGroup to group items in a single grid cell.

Build a tab panel with Apex tab components in Visualforce to display multiple tabs and switch content using a default server switch type, client or Ajax.

Learn to create a horizontal Visualforce toolbar with the toolbar tag, group it for left and right alignment, and configure id and item separator values (line, square, disk, grid).

Design a Visualforce toolbar using the Apex toolbar tag, add groups with output links and a line separator, and align inputs and links to the right.

Explore how standard controllers in Salesforce Visualforce manage user interactions and data display, using the standardController attribute for objects, with default actions like save, edit, delete, and cancel.

Create a Visualforce page that uses the account standard controller, build a two-column form with a page block and a save button to insert or update account records.

Harness the standard opportunity controller to build a Visualforce page with a delete action, using input or output fields to display data and refresh after deletion.

Learn to render a complete Visualforce account page with related lists using the Apex detail tag, display only specific lists such as contacts, and toggle related lists on or off.

Learn to display data with the Apex output field in Visualforce, showing account name, owner name, billing address, and industry using the standard controller.

Learn how to display account-related records in a Visualforce page using a pageBlockTable, iterating with an item variable to show contact name and title in a table.

Replace the standard account page with a custom Visualforce page (example one) to show account contacts by editing button links and actions in setup; revert later to the standard page.

Learn how standard list controllers let you work with a set of records in Visualforce pages, by binding a recordSet variable, iterating over accounts, and displaying fields.

Learn how to use the standard list controller with an account standard controller on a Visualforce page to display all accounts, showing name and account number in a table.

Use the standard list controller to access multiple opportunity records in a Visualforce page, displaying name and amount in a page block table.

Explore building a Visualforce page with the standard list controller for accounts, using a one-item dropdown filter and a go button to list records by chosen criteria.

Explore standard list controller actions in Salesforce Visualforce, including save, quick save, list, cancel, and pagination with first, last, next, and previous to manage sets of records.

Learn how to implement pagination with the standard list controller in Salesforce Visualforce, using previous, next, first, and last actions to navigate accounts and opportunity records.

Edit multiple opportunity records using the standard list controller, rendering fields as input fields for stage name and close date, with a save action to save or update the records.

Differentiate custom controllers and controller extensions in Salesforce Visualforce: custom controllers run entirely in system mode, while extensions reuse and extend standard controller functionality.

Learn how to build a Visualforce page with a custom controller in Salesforce, including wiring a controller, retrieving an account by url id, editing account name, and saving updates.

Use a custom controller to create or update account records via a visualforce page, using a URL id to distinguish new versus existing records, and upserting on save.

Extend the standard Salesforce controller with a controller extension to override or add actions in a Visualforce page, illustrating how a greeting method returns the account name and ID.

Explore how to use multiple controller extensions in a Visualforce page with a comma separated list, and learn that the first declared extension's foo method determines the output.

Explore using multiple extensions in a Visualforce page, define two extensions with the same get foo method, and learn how reference order determines whether foo one or foo two prints.

Explore how a custom list controller handles a set of records by defining methods from scratch, offering power beyond a standard list controller.

Create a custom list controller in Salesforce Visualforce to display opportunity names, close dates, and amounts by querying with a standard set controller and binding to a Visualforce page.

Explore a custom list controller example that builds a Visualforce page to display account records using a standard set controller, including a get accounts method and a page block table.

Learn to use Visualforce expressions to access the current user's first name, last name, and username, display today's date, and apply functions like max, min, sqrt, and contains.

Explore conditionals in Visualforce with if statements to display content dynamically based on expressions, including contains checks, case-insensitive comparisons, and date-based conditions.

Render a Visualforce page as a PDF document using the renderAs attribute set to PDF, and center content with the HTML center tag. Save or print the resulting PDF.

Learn how to embed web content in Visualforce pages using HTML, CSS, JavaScript, and iframes, and manage CSS and JavaScript as static resources for efficient rendering.

Learn to insert HTML tags in a Visualforce page using the standard account controller, apply styling via inline style or a static resource, and bind labels to inputs.

Learn to create and upload a separate CSS file as a static resource, then apply it to a Visualforce page via the epic stylesheet tag and a static resource reference.

Learn how to include JavaScript in a Visualforce page, either inline or via a static resource, and reference it with apex:includeScript.

Learn how to embed an external website inside a Visualforce page using the iframe tag, specify the source, width, and height to create an inline frame.

Identify where Visualforce pages can be used: custom tabs, overridden home pages, embedded in page layouts, buttons or links, dashboards, consoles, mobile quick actions, and community pages.

Override the Salesforce home tab with a Visualforce page, using either a standard list controller, a custom controller, or no controller at all, to display a custom account view.

Learn to embed a Visualforce page into a page layout using the standard controller for the same entity, and apply this in account or opportunity layouts in classic and lightning.

Launch a Visualforce page from a custom button on an account page using the standard controller, then place the button on the layout and override the standard new button.

Incorporate Visualforce pages as dashboard components using no controller, a custom controller, or a standard set controller. Create the Visualforce dashboard page and add it to the dashboard.

Create a Visualforce page, build a corresponding tab, and add it to the Salesforce mobile navigation to appear as a menu item, with mobile and Lightning enabled and profile access.