customizing salesforce user interfaces with lightning components

21
Customizing Salesforce UIs with Lightning Components Skip Sauls Director of Product Management [email protected] @SkipSauls Doug Chasman Distinguished Engineer, Force.com Architect [email protected] @dougchasman

Upload: salesforce-developers

Post on 08-Jan-2017

802 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Customizing Salesforce User Interfaces with Lightning Components

Customizing Salesforce UIs with

Lightning Components

Skip Sauls

Director of Product Management

[email protected]

@SkipSauls

Doug Chasman

Distinguished Engineer, Force.com Architect

[email protected]

@dougchasman

Page 2: Customizing Salesforce User Interfaces with Lightning Components

Safe harbor statement under the Private Securities Litigation Reform Act of 1995:

This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize

or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the

forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any

projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding

strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or

technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for

our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate

of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with

completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability

to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our

limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential

factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year

and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are

available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and

may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are

currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Safe Harbor

Page 3: Customizing Salesforce User Interfaces with Lightning Components

Overview

Containers & Environments

Details

Demo

Q&A

Agenda

Lightning Customizations

Page 4: Customizing Salesforce User Interfaces with Lightning Components

Lightning

Experience

Salesforce1

Mobile

Salesforce

ClassicCommunities

Mobile SDK

Hybrid Apps

Standalone

Lightning AppsExternal Sites

Lightning

Components

Lightning Apps

Lightning

Component

Tabs

Lightning Pages

Lighting

Components for

Visualforce

Lightning Out*

Lightning

Extensions*

Containers & Environments

Lightning Customizations

* Pre-GA in Winter ‘16

Page 5: Customizing Salesforce User Interfaces with Lightning Components

Modular, reusable, and extensible, forming the basis of modern Salesforce user interfaces.

Architecture

• Component Bundles – Server-side resources, including XML, CSS, JavaScript, and SVG

• Component Instances – Client-side instances comprised of HTML, CSS, and JavaScript

• Events – Application- or component-scoped events with optional payload parameters

• Interfaces – Indicates that a component adheres to the specified contract, with or without attributes

• Attributes – Define the shape of the component, with strong-typing and default values

• Scope – Indicates whether the component or attribute is available only to package or to entire application

Lightning Components

Lightning Customizations

Page 6: Customizing Salesforce User Interfaces with Lightning Components

Top level containers for Lightning Components.

• URL-addressable, e.g, https://gs0.lightning.force.com/myns/demo.app

• May utilize a template for controlling style, splash screen, persistence, etc.

• Does not define a particular style, navigation scheme, etc.

• Examples include Lightning Experience, Salesforce1 Mobile, App Builder, Process Builder

Lightning Apps

Lightning Customizations

Page 7: Customizing Salesforce User Interfaces with Lightning Components

Containers for using Lightning Components as tabs/pages.

• Programmatic creation of pages

• Implements the force:appHostable interface

• Defined by the administrator as tabs

• Used in the Salesforce1 Mobile App as tabs in the left-nav

• Used in Lightning Experience in Application Groups (tabsets)

• May be used in standalone apps, interface is simply a marker

Lightning Component Tabs

Lightning Customizations

Page 8: Customizing Salesforce User Interfaces with Lightning Components

Containers for using Lightning Components as tabs/pages.

• Declarative creation of pages

• Implements the flexipage:availableForAllPageTypes interface

• Created by administrator using Lightning App Builder

• Used in the Salesforce1 Mobile App as tabs in the left-nav

• Used in Lightning Experience in Application Groups (tabsets)

• Future releases will provide

• Further customization of Lightning Experience

• Custom templates

Lightning Pages

Lightning Customizations

Page 9: Customizing Salesforce User Interfaces with Lightning Components

Lightning App Builder

Lightning Customizations

Drag & DropBuild with standard and custom

Lighting Components

Any DeviceDesign for every screen from

one canvas

Page 10: Customizing Salesforce User Interfaces with Lightning Components

Templates provide customers with

near-turnkey community solutions

that can be easily customized and

deployed with Community Builder

Templates consist of:- Pages: canvas for building UI, has

distinct URL, layout

- Components: renders content, input

data

- Branding: general properties

including color palettes and fonts

BRANDING

Color palette,

logo, fonts

PAGE

Main canvas

COMPONENT

Renders content

Communities – Templates

Lightning Customizations

Page 11: Customizing Salesforce User Interfaces with Lightning Components

3a. select from

standard components

3b. Build your own custom

Lightning components or reuse

Partner built components

3. Add Lightning

Components to build your

page

2. Intuitively drag & drop

components onto page

regions

1. Create New Page

Community Builder – Design new Pages with Drag & Drop Components

Lightning Customizations

Page 12: Customizing Salesforce User Interfaces with Lightning Components

Lightning Components may be used in Visualforce/Salesforce Classic

Powered by Lightning Out

Lightning Components for Visualforce

Lightning Customizations

Page 13: Customizing Salesforce User Interfaces with Lightning Components

Lightning Components for Visualforce

Lightning Customizations

Page 14: Customizing Salesforce User Interfaces with Lightning Components

Lightning Components can now be used in nearly any remote web container

Requirements

• Valid Salesforce session ID (SID), for example from OAuth

• Ability to modify the generated markup for the remote site

Supports

• Secure browser (HTTPS)

• Cross-Origin Resource Sharing (CORS)

Lightning Components for Visualforce is powered by Lightning Out

Availability

• Lightning Components for Visualforce is GA in Winter ‘16

• Lightning Out is in pre-release in Winter ‘16, with plans to be GA in Spring ‘16

Lightning Out

Lightning Customizations

Page 15: Customizing Salesforce User Interfaces with Lightning Components

Lightning Out – Platforms

Lightning Customizations

Page 16: Customizing Salesforce User Interfaces with Lightning Components

Lightning Out – Frameworks, Toolkits, and Libraries

Lightning Customizations

? XXX

Page 17: Customizing Salesforce User Interfaces with Lightning Components

Dynamic, runtime substitution of standard components with Lightning Components

Designed for use with the Salesforce1 Mobile App, and future UIs

Target users are admins who will install and configure the components as extensions

Complements and completes the Lightning Components framework

Extensions (Future)

Lightning Customizations

Page 18: Customizing Salesforce User Interfaces with Lightning Components

Extensions (Future)

Lightning Customizations

Object: Account

Field: Rating

Lightning Component: customRatingView

Mode: View

Custom Field Extension

Page 19: Customizing Salesforce User Interfaces with Lightning Components

Demos

Page 20: Customizing Salesforce User Interfaces with Lightning Components

Q&A

Page 21: Customizing Salesforce User Interfaces with Lightning Components

Thank you