Salesforce Customization with Visualforce and Lightning Framework Presented by :
Speaker
Soumitra Chakraborty Technical Consultant APPSeCONNECT
/in/soumitrachakraborty
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
1
What is Visualforce?
2
Visualforce • • •
A tag based language Used to create custom UI for Salesforce
<apex:page>
Enhance existing applications
</apex:page> Visualforce Components Similar to HTML for a web page
3
When to use Visualforce? • •
Standard Salesforce UI doesn’t fulfil the business requirements Create Page to display unrelated objects
4
Where to Write Visualforce Code? • • • •
Setup Page Developer Console Integrated Development Environment or IDE Development Mode Footer (Most Convenient)
5
Writing Visualforce Components
6
apex: page Component Example:
<apex:page> </apex:page> Required component for every Visualforce Page
<apex:page> All code goes hereâ&#x20AC;Ś </apex:page>
7
apex: pageBlock Component Example:
<apex:pageBlock> </apex:pageBlock> <apex:pageBlock title=â&#x20AC;&#x153;My Section"> This is a section </apex:pageBlock>
8
apex: pageblockSection Component Example:
<apex:pageblockSection> </apex:pageblockSection>
<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>
9
apex: form Component Example:
<apex:form> </apex:form>
<apex:form> <apex:inputText value="{!theText}"/>
<apex:commandButton value="Go"> action="{!action}" reRender="dynamic"/> </apex:form>
10
apex: outputField Component Example:
<apex:outputField>
<apex:outputField value="{! Contact.Name }"/> <apex:outputField value="{! Contact.Phone }"/> <apex:outputField value="{! Contact.website }"/>
11
Displaying Data in Visualforce Pages
12
Model View Controller (MVC) Pattern MODEL
CONTROLLER
VIEW
YOUR DATA
YOUR LOGIC
YOUR INTERFACE
Standard & Custom Objects
Standard Controller + Apex Code
Visualforce
13
Types of Controllers • • •
Standard
Custom Controller Extension
14
Standard Controllers in Visualforce
15
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>
16
List Controller in Visualforce Iteration Component
<apex:pageBlockTable> </apex:pageBlockTable>
17
Web Content in Visualforce
18
Web Content in Visualforce $Resource global variable
Static Resource
Tag
Image
<apex:image url="{!$Resource.imagename}" />
External JavaScript
<apex:includeScript value="{!$Resource.filename}â&#x20AC;&#x153; />
19
Using Visualforce pages in Force.com
20
Incorporating Visualforce Pages • • • • •
Custom Tab
Standard Button Custom Button Page Embed Share the Visualforce page link
21
DEMO Visualforce
22
Lightning Component Framework
23
What is a Component? • • •
Basic building blocks for app
Can run anywhere Works on variety of devices (mobile, table and desktops)
24
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
25
Uses of Lightning Component Framework • • • •
Create pages Edit pages Create components Create apps
Completely New App
26
Types of Lightning Components • Standard Component • Custom Component
• Appexchange Components
27
How to Create Lightning Apps? â&#x20AC;˘ â&#x20AC;˘
Developer Console (Coding)
Lightning App Builder (No coding, Drag and Drop)
28
DEMO Lightning App Builder
29
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.
30
Time for Q & A
Thank You For Salesforce Integrations, visit:
www.appseconnect.com Or Email us at sales@appseconnect.com