1. @archladies archladies.com
PLATFORM DEVELOPER I Certification Study Group Week 5 Led by: Blanca V. Leon-Carter
#LBAjourneytoPD1

2. Week 5 Objectives User Interface
Describe how to display Salesforce data using a Visualforce page.
Describe the types of web content that can be incorporated into Visualforce pages.
Describe how to incorporate Visualforce pages into Lightning Platform applications.
Describe the benefits of the Lightning Component framework.
Describe the resources that can be contained in a Lightning Component.

3. Visualforce What is it and why do we use Visualforce?
Framework to build custom user interfaces
Hosted on Force.com
Create internal (custom modules, templates, and replacement pages) and public facing pages (sites and portals)
Highly customizable even for mobile devices
Ability to use other web technologies
Image Source: Salesforce, An Introduction to Visualforce

4. Model-View-Controller (MVC) paradigm
Describe how the Salesforce platform features map to the MVC pattern. Referred to generally as standard controllers, or even the standard controller.
Model
View
Controller
Data objects
User Interface
Business logic
Browser page Mobile page
Page layout
Visualforce page
Standard controller
Custom controller (Apex)
Database Salesforce objects and related elements
Defines the structure of data.
Represents the presentation layer.
Contains the business logic.
Image Source: Salesforce, Edureka: Salesforce for Beginners
Source: Focus On Force

5. Data in Visualforce Object Related Global User Static
Display object data by using expression syntax and components Expression syntax is used to bind components to the data set in the page controller
e.g. {!objectName.<fieldname>} getObject()
Related
Display related object records by using merge field syntax
Child to parent- up to five levels
Parent to child one level
Merge field syntax uses dot notation to retrieve data e.g. {!Object.Field} {!Applicant__c.First_Name__c}
Global
Use global variables to retrieve general information
System
Organization
User
Current user
Static
Use global variable $Resource to display static resources
Image Source: Salesforce, Understand Custom & Standard Objects

6. Visualforce Controllers
Controller - A set of instructions on what happens when a user interacts with a page. Provide Visualforce pages with data and business logic.
Standard Controller - same functionality and logic as standard Salesforce pages. Provided for every standard and custom object. - standardController attribute is added to the tag and assigned the name of the object (standard or custom).
- Provide mechanism to manipulate records.
Standard List Controller - enables you to create pages that display or act on a set of records
Custom Controller - Apex class that adds implements all of the page’s logic without leveraging the standard controller - controller attribute is assigned to the custom controller
Controller Extension - Apex Class that extends the functionality of standard or custom controllers
Source: Salesforce, What is Visualforce?
Source: LBA Study Group Week 4 by Kelsey Shannon, Slide 31

7. <apex:outputField value=“{!Applicant__c.First_Name__c}”
Standard Components
Attribute define components
Data Binding to objects and class variables
Reference Field dot notation
<apex:outputField value=“{!Applicant__c.First_Name__c}”
Merge Field to define attribute
Component Name tables, forms, etc

8. Sample Visualforce Page Code

9. Sample Visualforce Page

10. Data Context
Data context is provided to controllers by the id parameter of the page
getParameters() method is used to retrieve parameters passed to the URL
- Returns a map of the query string parameters in the page URL

11. Global Data
Use global variables to reference general information about either the user or organization
Uses expression syntax to be evaluated e.g. {!$User.FirstName} or {!$Organization.Country}.
Use global variable $Resource and dot notation to display static resources Static resources should be uploaded as .zip file before they can be used by the page.
Use URLFOR() function to reference items contained in the .zip static resource e.g. URLFOR()$Resource.<nameofresource>,’images/salesforcelogo.png’)

12. Data from a Detail Page
Use <apex:detail> component to display a specific object
The page layout for that specific object will dictate what fields will be displayed e.g. {!$User.FirstName} or {!$Organization.Country).
Use attributes including or excluding - associated related lists
- related list hover links
- title bar

13. Related Lists Related Lists
relatedList attribute is used to show/hide related list to a record
You can use the component to display a list of records to the current record e.g. display a list of test scores related to an applicant record.

14. Table of Data Table of Data
Use iteration components to display table (table of data & complete styling)
Use the value attribute to set the list of records e.g. <apex:pageBlockTable>
Use the var attribute to assign each record in the list
Use the <apex:column> component to retrieve field values

15. Types of Web Content HTML CSS JavaScript Others HTML code
HTML tags generated by Visualforce
Override HTML tags generated by Visualforce
Inline CSS code can be defined for HTML tags
CSS
CSS stylesheets
Reference stylesheets
styleClass attribute defines style classes
style attribute directly applies style
CSS files saved as static resource
JavaScript
JavaScript code
<script tags> to access functions
$Resource to access file
JavaScript files are also saved as static resource
Others
JavaScript based Map
Markers
<apex:iframe> to add inline frame
<apex:iframe> to display external website

16. Sample Visualforce Page with Styling

17. Sample Visualforce Page with Styling

18. Incorporate Visualforce Pages into Lightning Platform Apps
Custom Tabs
Custom tabs special for Visualforce pages can be added to the Nav menu
Object Home Pages Overrides
Override tab home pages for standard/custom objects
Custom Buttons & Links
Launch Visualforce pages with buttons and/or links for standard/custom objects
Standard Button Overrides
Override standard buttons eg. NEW to Visualforce page
Page Layouts
Embed Visualforce pages in page layouts for standard/custom objects

19. Incorporate Visualforce Pages into Lightning Platform Apps
Dashboard
Use Visualforce as data sources for components
Custom Console
Incorporate into your Sales or Service Console custom components with Visualforce pages
Salesforce Mobile App Menu
Use Visualforce tab for your mobile app menu
Quick Actions in Salesforce Mobile App
Custom actions using Visualforce added to your mobile app & Lightning Experience Actions section
Community Pages
Use Visualforce components to add to your Napili Customer Service community

20. Visualforce Pages in Lightning
Display from your App Launcher
Add to your Navigation Menu
Display Visualforce pages with standard layout
Launch from Quick Action when you override buttons/links
Source: Salesforce, Use Visualforce in Lightning Experience

21. Visualforce Pages in Dashboard
Use Visualforce pages as dashboard components
Pages must have no controller, custom controller, or reference bound to the StandardSetController class.
You can use custom list controllers

22. Salesforce Mobile App Menu & Quick Actions
Use Visualforce pages to extend your Salesforce mobile app
Must create a new Visualforce tab for a Visualforce page prior to adding as a menu item
Enable Visualforce page in setup for both Salesforce mobile apps and Lightning pages
Visualforce tab is added to the Navigation menu so other mobile app users can access
The tab should be visible to the profile(s) that will be accessing the menu item in the mobile app
Quick Actions
Create Visualforce pages, make available for the action bar of your mobile app.
Add Visualforce custom action to page layout of the object in order to enable it for mobile app
Override predefined actions in the mobile app and Lightning Experience action sections.

23. Service Community Pages
Use Visualforce pages to in your communities by using Customer Service template
Visualforce page component can be used from the Components panel to add on your community page
You can specify Record ID and height for the component
Use Visualforce pages in Salesforce tabs and template based communities
Source: Salesforce, Use Visualforce in Lightning Components

24. Benefits of the Lightning Component Framework
Develop dynamic and responsive web applications
Event-Driven Architecture
Pre-defined Components
Multiple Use Cases
Increased Performance
Reduce Development Time
Available on the AppExchange
Cross-browser compatibility
Image Source: Salesforce, Getting Started with Lightning Components

25. Event-Driven Architecture
Event-Driven and/or Message-Driven
Communication simplified by separating producer and consumer
Components can subscribe to an application event or component event
Information processed is real time
Image Source: Salesforce, Understand Event-Driven Software Architecture

26. Components of Event-Driven Systems
Event: Change in “meaningful” state in business process
Event message: Message that contains data about an event
Event producer: Publisher of an event
Event channel: Stream of events where event producer sends messages and consumers read the messages
Event consumer: Subscriber to the channel
Image Source: Salesforce, Understand Event-Driven Software Architecture

27. Increased Performance
Uses stateful client and stateless server architecture
Javascript on client-side to manage component data and metadata
Reduced number of calls to the server
Client only receives needed data from the server
JavaScript Object Notation is used to exchange data between client & server.
Reduces development time by having responsive components work on various devices
Compatibility cross web browsers and responsive design increase user experience levels

28. Resources that can be Contained in a Lightning Component
Markup definition which can contain references to components and metadata
Application
Preview components before they are in pages
CSS Styles
Styles for the components eg. font family, font size, color, etc.
Controller
Client-side JavaScript resource which handle events
Design
Includes attributes of components
Documentation
Includes description, references to example components, sample code
Helper
JavaScript functions which can be called from code in a controller
SVG
Custom icon resources for components
Renderer
Framework for components modify DOM (document object model) elements

29. Resources Trailhead: Get Started with Visualforce
Trailhead: Standard Controllers
Visualforce Developer Guide: Standard Controllers
Visualforce Developer Guide: Standard List Controllers
Visualforce Developer Guide: Creating Visualforce Dashboard Components
Pluralsight: Intro to Visualforce by Matt Lacey
Visualforce in Practice by Michael Floyd, Don Robins, Matt Lacey, Michael Topalovich, Dan Appleman, Lior Gotersman, Ryan Sieve, & Peter Gruhl
Trailhead: User Interface Development Considerations

30. Deployment Review & Exam
Platform Developer I Certification Study Group
*Schedule: June 28 – September 13, 2018
Week 5 August 30
Week 6 September 6
Week 7 September 13
User Interface
Heroku feat. Charly Prinsloo LBA Co-Founder & Technical Architect Deloitte Digital Testing & Debug
Deployment Review & Exam
*Schedule was updated on 8/30/2018