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

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.

Visualforce What is it and why do we use Visualforce? Framework to build custom user interfaces Hosted on Force.com Create internal (custom modules, email 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

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

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

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

<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

Sample Visualforce Page Code

Sample Visualforce Page

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

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’)

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

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.

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

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

Sample Visualforce Page with Styling

Sample Visualforce Page with Styling

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

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

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

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

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.

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

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

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

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

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

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

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

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