Webinar: Salesforce Customization using Visualforce and Lightning Component Framework

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