Coding the Salesforce User Interface with Visualforce Pages

896 views
689 views

Published on

An Introduction to creating custom user interfaces for your Salesforce data using Visualforce.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
896
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Coding the Salesforce User Interface with Visualforce Pages

  1. 1. Coding the Salesforce User Interface with Visualforce Pages May 22nd, 2014
  2. 2. Christopher Alun Lewis Advanced Developer Force.com MVP Welcome! Simon Goodyear Advanced Developer Force.com MVP
  3. 3. What is Visualforce? • A Framework for building custom user interfaces for your Salesforce data • 100% native, hosted in your Salesforce org • Componentised, tag based syntax
  4. 4. Model View Controller (MVC) Pattern Model Controller View Your Data Your Logic Your Interface Standard and Custom Objects Standard Controllers + Apex Code Visualforce
  5. 5. Anatomy of a Visualforce Component <apex:outputField value = “{!account.Name}”/> Prefix – Library the Component belongs to (apex, chatter etc.) Component Name – Type of Component to be generated Attribute Value – String literal or merge field value passed to the Component Attribute Name – The name of a value to be passed to the Component
  6. 6. Anatomy of a Visualforce Tag <apex:outputField value = “{!account.Name}”/>
  7. 7. Use the Expansive Tag Library… • 140+ tags to choose from (more included through releases) • Apply SF standard styling easily • Create fields, actions, charts, forms and chatter feeds <apex:actionFunction> <apex:actionPoller> <apex:actionRegion> <apex:actionStatus> <apex:actionSupport> <apex:areaSeries> <apex:attribute> <apex:axis> <apex:barSeries> <apex:canvasApp> <apex:chart> ...
  8. 8. …Or Roll Your Own! • Visualforce integrates easily with other standard web tech: • HTML • Javascript • CSS • Create your own custom reusable components <c:myComponent/>
  9. 9. DEMO LET’S SEE SOME CODE!
  10. 10. Other Visualforce Use Cases
  11. 11. Further Reading • Visualforce Workbook http://www.salesforce.com/us/developer/docs/workbook_vf/index.htm • Visualforce Developer’s Guide http://www.salesforce.com/us/developer/docs/pages/index_Left.htm • Developer Resources https://developer.salesforce.com
  12. 12. Thank You! Christopher Alun Lewis @ChrisAlunLewis Simon Goodyear @simongoodyear

×