We recently had a #Webinar on Salesforce Customization using Visualforce and Lightning Component Framework. #Salesforce is a highly customizable platform that allows people to create apps that are needed and are useful in the business process. It allows designers and developers to create mesmerizing front-end UI for a better user experience. The front-end UI development is generally done via #VisualForce and the #Lightning Component Framework in Salesforce and it proves to be of a great help since it customizes the required platform according to the needs of the business organization. To help and educate people more about how they can customize #SalesforceCRM using VisualForce and Lightning Component Framework, we had organized this webinar. The key points covered in the Webinar were: •Visualforce introduction. •Using Visualforce in Salesforce. •Creating Visualforce pages in Salesforce. •Introduction to the Visualforce Syntax. •Displaying Salesforce data using Visualforce. •Visualforce Component Library. •Visualforce Controllers. •Web Content in Visualforce •Incorporating Visualforce Pages in force.com platform. •Lightning Component Framework introduction. •Live Demo. Check out the Webinar Recap!! Integrate Salesforce CRM with your back-end ERP System: https://www.appseconnect.com/salesforce-crm-integrations/

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