This webinar shows you how developers can use declarative tools like the Lightning App Builder to make apps more quickly than ever.

1. Lightning Customization
with Lightning App Builder
July 6, 2018 | 11:00 a.m. IST
Eric Jacobson
VP, Product Management,
Lightning Customization
Salesforce
Prakhar Jain
Software Engineering
Lead, Lightning
Customization
Salesforce
Shashank Srivatsavya
Developer Relations
Manager
Salesforce

2. Forward-Looking Statements
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.
Statement under the Private Securities Litigation Reform Act of 1995

3. Go Social!
Salesforce Developers
Salesforce Developers
Salesforce Developers
The video will be posted to YouTube & the
webinar recap page (same URL as registration).This webinar is being recorded!
@salesforcedevs

4. Have Questions?
Don’t wait until the end to ask your question!
• Technical support will answer questions starting now.
Respect Q&A etiquette
• Please don’t repeat questions. The support team is working their way down the queue.
Stick around for live Q&A at the end
• Speakers will tackle more questions at the end, time-allowing
Head to Developer Forums
• More questions? Visit developer.salesforce.com/forums

5. Agenda
• Lightning Pages
• Lightning App Builder
• Lightning Apps
• Developing components for App Builder
• Developing Custom Lightning Page Templates

6. Lightning
Page
Lightning Pages
Metadata drives the experience

7. Template
Regions
Lightning Pages
Metadata drives the experience
Header
Body Sidebar
Subhead

8. Lightning
Components
Lightning Pages
Metadata drives the experience
Highlights Panel
Body
News
Sales Path
Activities
Tabs
Related
Lists

9. Standard Components
Built by Salesforce
Custom Components
Built by customer developers
AppExchange Components
Built by Partners
Lightning Component Ecosystem

10. Lightning App Builder
Easily create and edit Lightning Pages with clicks!

11. Lightning Pages and Components
Customize pages with components using Lightning App Builder
SPRING / SUMMER ‘18 HIGHLIGHTS
• Accordion Component
• Paused Flow Interview
Component
• Pinned Workspace Regions
• Inline Edit for List View Cmp

12. Dynamic Lightning Pages
Control visibility of components without writing code
SPRING ‘18 HIGHLIGHTS
• Related Records
• User Context
• Form Factor
COMING SOON
• Custom & Standard
Permissions

13. Lightning Page Templates
Out of the box Lighting page Templates
Customize App pages that are responsive and tailored to your
needs
Build Lightning Pages With Ease
Over 57 different declarative Experience components for
customizing pages and apps
Create Page Templates
Deliver layouts that are suitable for all screen types and form
factors with Lightning Experience
Build with templates or create your own

14. Designing Performant Record Pages
Secondary tabs do not load by default
Use “Related List” component to only show most
important lists
Only show Details component by default if users
always need it

15. DEMO

16. Lightning
Apps

17. Build task-specific apps
All apps are unified into a single launcher

18. Navigation Styles
Standard and Console
Record-based workspaces
Subtabs related to main
workspace record
Object-based navigation
Navigation Item dropdowns
contain shortcuts to New,
Favorites, Recent Records,
Recent Lists
Console
Standard

19. Utility Bar
Persistent footer in Lightning
Experience, configured on a
per app basis
Add one or more utilities
Configure any required and
optional properties
One click access to productivity tools
Create your own utilities
with custom Lightning
Components

20. Deliver custom task-oriented experiences
Lightning Pages per App
Standard Account Page App-specific Account Page

21. Designing Components
for App Builder

22. Lightning Component Bundle
• Component
• Controller
• Helper
• Renderer
• Design
• SVG
• Style
• Documentation

23. Design
● Contains design time metadata about the component
● Configures the behavior in design time tools like Lightning App Builder & Community
Builder
● Required to expose attributes for admins to use

24. design:attribute
● Enables attribute to be edited
● Set the label
● Add description to explain behavior
● Set a default if needed
● Integer and Strings can have min and max validation.

25. Dynamic Picklists
● Apex backed attribute datasources.
● Populates picklist values in App Builder for ease of customization.
● Allows greater flexibility over comma separated list

26. SVG
Add an icon to
differentiate your
component in the
App Builder palette

27. Plan Ahead
Plan for your component to be future proof!
● Treat anything in the design definition as an API.
● Ensure updates are backwards-compatible.
● Think about your design.

28. Custom Lightning Page
Templates

29. Custom Lightning Page Templates
• Build your own
template
• Lightning component
• Style the template
• Support adaptive
components

30. Implement an interface
• lightning:recordHomeTemplate (Record Page)
• lightning:appHomeTemplate (App Page)
• lightning:homeTemplate (Home Page)

31. <aura:component implements=“lightning:recordHomeTemplate”>
<aura:attribute name=“region1” type=“Aura.Component[]” />
<div>
{!v.region1}
</div>
</aura:component>
Define regions
In the component markup, declare each region as an attribute of type ‘ Aura.Component[] ’

32. <design:component>
<flexipage:template>
<flexipage:region name=“region1” defaultWidth=“Large” />
</flexipage:template>
</design:component>
Define regions
In the design markup, define the regions in the template.

33. Define regions
In the design markup, define the regions in the template.
• Small
• Medium
• Large
• XLarge
<design:component>
<flexipage:template>
<flexipage:region name=“region1” defaultWidth=“Large” />
</flexipage:template>
</design:component>

34. DEMO

35. Q & A
Join the Trailblazer Community Groups:
Lightning App Builder
Lightning Now
India/APAC Salesforce Developer Webinars
Join the conversation: @salesforcedevs