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