1.
Salesforce Customization with
Visualforce and Lightning Framework
Presented by :

2.
Soumitra Chakraborty
Technical Consultant
APPSeCONNECT
/in/soumitrachakraborty
Speaker

3.
Agenda
• What is Visualforce?
• When to use Visualforce?
• Where to write Visualforce code?
• Visualforce Components
• Displaying data in Visualforce
• Lightning Component Framework
• Lightning App Builder
• Live Demo

4.
What is
Visualforce?
1

5.
Visualforce
• A tag based language
• Used to create custom UI for Salesforce
• Enhance existing applications
<apex:page>
</apex:page>
2
Visualforce Components
Similar to HTML for a web page

6.
When to use Visualforce?
• Standard Salesforce UI doesn’t fulfil the business requirements
• Create Page to display unrelated objects
3

7.
• Setup Page
• Developer Console
• Integrated Development Environment or IDE
• Development Mode Footer (Most Convenient)
Where to Write Visualforce Code?
4

8.
Writing Visualforce
Components
5

9.
apex: page Component
<apex:page>
</apex:page>
Example:
<apex:page>
All code goes here…
</apex:page>
6
Required component for
every Visualforce Page

10.
apex: pageBlock Component
<apex:pageBlock>
</apex:pageBlock>
Example:
<apex:pageBlock title=“My Section">
This is a section
</apex:pageBlock>
7

11.
apex: pageblockSection Component
<apex:pageblockSection>
</apex:pageblockSection>
Example:
<apex:pageBlock title=“My Sections">
<apex:pageBlockSection title="Section 1”>
Section 1
</apex:pageblockSection>
<apex:pageblockSection title="Section 2“>
Section 2
</apex:pageblockSection>
</apex:pageBlock>
8

12.
apex: form Component
<apex:form>
</apex:form>
Example:
<apex:form>
<apex:inputText value="{!theText}"/>
<apex:commandButton value="Go">
action="{!action}" reRender="dynamic"/>
</apex:form>
9

13.
apex: outputField Component
<apex:outputField>
Example:
<apex:outputField value="{! Contact.Name }"/>
<apex:outputField value="{! Contact.Phone }"/>
<apex:outputField value="{! Contact.website }"/>
10

14.
Displaying Data in
Visualforce Pages
11

15.
Model View Controller (MVC) Pattern
MODEL
YOUR DATA
CONTROLLER
Standard &
Custom Objects
YOUR LOGIC YOUR INTERFACE
VIEW
Standard Controller
+ Apex Code
Visualforce
12

16.
Types of Controllers
• Standard
• Custom
• Controller Extension
13

17.
Standard Controllers
in Visualforce
14

18.
Standard Controllers in Visualforce
• Defined using standardController attribute <apex:page standardController="Account">
</apex:page>
• To access a particular data
{! Controller.FieldName }
• To access all the data for a record
<apex:detail />
<apex:page standardController="Account">
<apex:detail />
</apex:page>
15

19.
List Controller in Visualforce
Iteration Component
<apex:pageBlockTable>
</apex:pageBlockTable>
16

20.
Web Content
in Visualforce
17

21.
Web Content in Visualforce
$Resource global variable
Static Resource Tag
Image <apex:image url="{!$Resource.imagename}" />
External JavaScript <apex:includeScript value="{!$Resource.filename}“ />
18

22.
Using Visualforce pages
in Force.com
19

23.
Incorporating Visualforce Pages
• Custom Tab
• Standard Button
• Custom Button
• Page Embed
• Share the Visualforce page link
20

24.
DEMO
Visualforce
21

25.
Lightning Component
Framework
22

26.
What is a Component?
• Basic building blocks for app
• Can run anywhere
• Works on variety of devices
(mobile, table and desktops)
23

27.
Benefits of Lightning Component
• Multi-tier architecture
• Drag and Drop Interface
• Improved Performance
• Responsive, mobile first design
• Supports popular web technologies like HTML5, CSS3, JavaScript etc
24

28.
Uses of Lightning Component Framework
• Create pages
• Edit pages
• Create components
• Create apps
Completely
New App
25

29.
• Standard Component
• Custom Component
• Appexchange Components
Types of Lightning Components
26

30.
How to Create Lightning Apps?
• Developer Console (Coding)
• Lightning App Builder (No coding, Drag and Drop)
27

31.
DEMO
Lightning App Builder
28

32.
APPSeCONNECT is an Integration Platform as a Service (iPaaS) which
connects Salesforce with other major business applications. It seamlessly
streamlines business operations, thus increasing productivity and efficiency.
29

33.
Time for Q & A
30

34.
Thank You
For Salesforce Integrations, visit:
www.appseconnect.com
Or Email us at sales@appseconnect.com