Your SlideShare is downloading. ×
  • Like
HOT - Intro to Visualforce pages
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HOT - Intro to Visualforce pages



Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Introduction to Visualforce Pages Leah McGowen-Hare Senior Technical Instructor, David Reece Training Consultant© Copyright 2010, inc. All rights reserved. 1
  • 2. Safe Harbor Statement This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions prove incorrect, the results of, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking statements, including: any projections of earnings, revenues, or other financial items; any statements regarding strategies or plans of management for future operations; any statements concerning new, planned, or upgraded services or developments; statements about current or future economic conditions; and any statements of belief. The risks and uncertainties referred to above include - but are not limited to - risks associated with our new business model; our past operating losses; possible fluctuations in our operating results and rate of growth; interruptions or delays in our Web hosting; breach of our security measures; the immature market in which we operate; our relatively limited operating history; our ability to expand, retain, and motivate our employees and manage our growth; risks associated with new releases of our service; and risks associated with selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, inc. are included in our registration statement (on Form S-1) and in other filings with the Securities and Exchange Commission. These documents are available on the SEC Filings section of our Web site., inc. assumes no obligation and does not intend to update these forward-looking statements. Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Training Org Login Org will be active for 30 days post Cloudforce Username: Password: cf2012 For ###: use the 3-digit number on the cover of your exercise guide Example: Your three digit number = 010 Your username =© Copyright 2010, inc. All rights reserved. 2
  • 3. Agenda  What is Visualforce?  Visualforce Features  Exercise 1: Visualforce “Hello World”  Demo: Creating a PDF  Further Studies  Q&A What is Visualforce? Visualforce is a framework for building custom user interfaces.  Any application  Any user interface  Any device© Copyright 2010, inc. All rights reserved. 3
  • 4. Visualforce Key Features  Are composed with Visualforce markup language.  Use standard Web technologies like JavaScript Pages and CSS.  Are rendered as HTML.  The individual elements on a page. Components  Leverage many standard features.  The library of components is extendable.  Standard controllers access objects and actions without Apex. Controllers  Custom controllers use Apex code for new behaviors. Visualforce Example tag attribute attribute value start tag 1 <apex:page standardController=“Account”> 2 <!-- This is a comment --> 3 <h1>Congratulations</h1> <p/> 4 This is your new page: myNewPage 5 <apex:detail/> 6 </apex:page> self-contained tag end tag© Copyright 2010, inc. All rights reserved. 4
  • 5. Expression Syntax Expressions use the syntax {!...} to execute logic and bind to data and functionality you want to use in your page. 1. Data binding: pulls in data from the page controller <apex:inputField value="{!Review__c.Interviewer__c}"/> 2. Action binding: calls actions in the page controller <apex:commandButton value="Edit" action="{!edit}"/> 3. Formulas: executes many of the functions also available in formula fields and rules. Data Binding Example Visualforce tag <apex:pageBlockSection title="Contact Information"> <apex:inputField value="{!contact.firstname}"/> <apex:inputField value="{!contact.salutation}"/> <apex:inputField value="{!contact.lastname}"/> </apex:pageBlockSection> data binding expression© Copyright 2010, inc. All rights reserved. 5
  • 6. Editing Visualforce Pages  Inline Page Editor (pictured) – Enabled with user setting: Development Mode  Setup Menu  IDE Plug-In for Eclipse How to Use Your Visualforce Page  Override standard buttons and tabs – Example: Visualforce page for creating an opportunity  Custom buttons, tabs, and links – Example: Manual case escalation page invoked from a new button  Embed in page layouts, dashboards, or external sites – Example: Visualforce section on a Page Layout  Go public, go mobile – Example: Sites public page© Copyright 2010, inc. All rights reserved. 6
  • 7. Exercise 1: Visualforce “Hello World” Page Hands-on Exercise Tasks:  Enable development mode.  Create a simple new page.  Update the page to include the user name.  Update the page to display position detail information.  Update the page to remove unwanted related lists.  Update the page to create a form to edit position data. Demo: Generate a PDF from Visualforce Hands-on Exercise Goal: Create a printable PDF using Visualforce. Scenario: Universal Containers wants to create a PDF for offer letters to merge relevant candidate and position data into an offer letter and have a button to generate it from the offer page. Task: Modify a Visualforce page to render a PDF.© Copyright 2010, inc. All rights reserved. 7
  • 8. Visualforce Documentation  The component library reference is available online in both the in-line page editor and the Setup menu.  The Visualforce Developer’s Guide is available from the  In addition, there are white papers, blogs, and forums available on all technologies at the DFC website. Key Takeaways  Visualforce pages allow developers to customize any app and any user interface for any device.  Visualforce pages are rendered in HTML.  Data binding and action binding make your UI communicate with the rest of your app.  Enable Development Mode to create Visualforce pages.  Use the Component Reference to find standard components.© Copyright 2010, inc. All rights reserved. 8
  • 9. What’s Next? Ready for more hands-on training? Have Premier? Take a great online Follow up with an class, we suggest: instructor-led course, we suggest: Visualforce Pages Building Applications with and Visualforce Don’t forget.. Visit us in the Tell us what you Cloud Expo! for your think with the 10% off training session survey voucher!© Copyright 2010, inc. All rights reserved. 9
  • 10. Question and Answer© Copyright 2010, inc. All rights reserved. 10