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
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
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
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
Agenda
• Lightning Pages
• Lightning App Builder
• Lightning Apps
• Developing components for App Builder
• Developing Custom Lightning Page Templates
Lightning
Page
Lightning Pages
Metadata drives the experience
Template
Regions
Lightning Pages
Metadata drives the experience
Header
Body Sidebar
Subhead
Lightning
Components
Lightning Pages
Metadata drives the experience
Highlights Panel
Body
News
Sales Path
Activities
Tabs
Related
Lists
Standard Components
Built by Salesforce
Custom Components
Built by customer developers
AppExchange Components
Built by Partners
Lightning Component Ecosystem
Lightning App Builder
Easily create and edit Lightning Pages with clicks!
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
Dynamic Lightning Pages
Control visibility of components without writing code
SPRING ‘18 HIGHLIGHTS
• Related Records
• User Context
• Form Factor
COMING SOON
• Custom & Standard
Permissions
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
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
DEMO
Lightning
Apps
Build task-specific apps
All apps are unified into a single launcher
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
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
Deliver custom task-oriented experiences
Lightning Pages per App
Standard Account Page App-specific Account Page
Designing Components
for App Builder
Lightning Component Bundle
• Component
• Controller
• Helper
• Renderer
• Design
• SVG
• Style
• Documentation
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
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.
Dynamic Picklists
● Apex backed attribute datasources.
● Populates picklist values in App Builder for ease of customization.
● Allows greater flexibility over comma separated list
SVG
Add an icon to
differentiate your
component in the
App Builder palette
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.
Custom Lightning Page
Templates
Custom Lightning Page Templates
• Build your own
template
• Lightning component
• Style the template
• Support adaptive
components
Implement an interface
• lightning:recordHomeTemplate (Record Page)
• lightning:appHomeTemplate (App Page)
• lightning:homeTemplate (Home Page)
<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[] ’
<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.
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>
DEMO
Q & A
Join the Trailblazer Community Groups:
Lightning App Builder
Lightning Now
India/APAC Salesforce Developer Webinars
Join the conversation: @salesforcedevs
Lightning customization with lightning app builder

Lightning customization with lightning app builder

  • 1.
    Lightning Customization with LightningApp 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 presentationmay 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 SalesforceDevelopers 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 waituntil 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.
  • 7.
    Template Regions Lightning Pages Metadata drivesthe experience Header Body Sidebar Subhead
  • 8.
    Lightning Components Lightning Pages Metadata drivesthe experience Highlights Panel Body News Sales Path Activities Tabs Related Lists
  • 9.
    Standard Components Built bySalesforce Custom Components Built by customer developers AppExchange Components Built by Partners Lightning Component Ecosystem
  • 10.
    Lightning App Builder Easilycreate and edit Lightning Pages with clicks!
  • 11.
    Lightning Pages andComponents 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 Controlvisibility of components without writing code SPRING ‘18 HIGHLIGHTS • Related Records • User Context • Form Factor COMING SOON • Custom & Standard Permissions
  • 13.
    Lightning Page Templates Outof 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 RecordPages 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.
  • 16.
  • 17.
    Build task-specific apps Allapps are unified into a single launcher
  • 18.
    Navigation Styles Standard andConsole 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 footerin 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-orientedexperiences Lightning Pages per App Standard Account Page App-specific Account Page
  • 21.
  • 22.
    Lightning Component Bundle •Component • Controller • Helper • Renderer • Design • SVG • Style • Documentation
  • 23.
    Design ● Contains designtime 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 attributeto 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 ● Apexbacked attribute datasources. ● Populates picklist values in App Builder for ease of customization. ● Allows greater flexibility over comma separated list
  • 26.
    SVG Add an iconto differentiate your component in the App Builder palette
  • 27.
    Plan Ahead Plan foryour component to be future proof! ● Treat anything in the design definition as an API. ● Ensure updates are backwards-compatible. ● Think about your design.
  • 28.
  • 29.
    Custom Lightning PageTemplates • 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 thedesign 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.
  • 35.
    Q & A Jointhe Trailblazer Community Groups: Lightning App Builder Lightning Now India/APAC Salesforce Developer Webinars Join the conversation: @salesforcedevs