Architecting
Lightning Components
for Community Builder
michael.welburn@gmail.co
m
@MichaelWelburn
Michael Welburn
Salesfo...
Michael Welburn
Salesforce Engineer, Twitch
9 x
What is Community Cloud?
Collaborate with people outside your company using your Salesforce data
• Customers
• Partners
• ...
Community Cloud Customization in the Past
Previous Options
• Salesforce Classic Tabs
• Visualforce & Force.com Sites
• Sit...
Community Builder
Evolution of Community Cloud into Community Builder
• Community Templates / WYSIWYG
• Color Picker
• Ima...
Community Builder
Demo
Basic Requirements
Implement the forceCommunity:availableForAllPageTypes interface
• That is it!
Enabling a Lightning Comp...
Basic Requirements
Create a defaultTokens.token bundle extending
force:base
Within the Style portion of custom Lightning
C...
Basic Component Setup
Demo
Respecting Community Security & Configuration
Be aware of configurable Community Preferences
• Community Nickname vs Full ...
Community Nuances
Demo
Next Steps & Resources
What is Community Cloud?
• http://bit.ly/CC-FAQ
Community Builder Overview
• http://bit.ly/CBOvervi...
Thank Y u
Upcoming SlideShare
Loading in …5
×

Architecting Lightning Components for Community Builder

492 views

Published on

Dreamforce 2016 session on enabling Lightning components within Salesforce's Community Builder.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
492
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Welcome!
    Session Title – Architecting Lightning Components for Community Builder
    Talking about the basics of Community Cloud, Community Builder, and building components specifically for Community Builder

    How many people have seen community builder? What about app builder?
  • Recently started working as a Salesforce Engineer at Twitch
    Twitch is the world’s leading social video platform and community for gamers, video game culture, and the creative arts.
    Work on Salesforce and be around video games
    Have 9 certifications, including the new Community Cloud Consultant certification
    Just moved to SF, previously spent 3 years working remotely at 7Summits, focusing solely on pixel perfect Community Cloud implementations
    7Summits is one of the premier partners & leaders in Community Cloud
    One of my projects won the Salesforce Partner Innovation Award for Community Cloud last year
    One of the first companies to release Lightning components on the Exchange for Communities
    Released a Lightning Bolt template
  • What is a Community?
    Way to expose select data from your internal Salesforce to external users
    Customers
    Partners
    Employees
    Full Chatter capabilities within that Community
    Community Users don’t see internal Chatter
    Custom branding supported
    Can have more than 1 community for different (or the same) users
    Each Community has its own Chatter instance that is separate from other Communities.
    Think of Communities like you previously considered Force.com App Development
    You can do fulfill any use case -- but the desire for custom interfaces is much higher since they are exposed outside the company
    Branding is important
    Big demand for Communities = lots of opportunity for INTERESTING custom development


    http://www.salesforce.com/communities/faq/
  • Force.com Sites + Visualforce has traditionally been the best way for pixel perfect Communities
    Very developer heavy to make the slightest of changes
    Pages were the deliverable, not components.
    Every community and developer implemented different frameworks, standards, etc. No SLDS.
    Salesforce Classic wasn’t inherently responsive, which hampered our ability to leverage those standard Chatter pages.

  • Evolved into Community Builder
    Community Builder is the equivalent of Lightning Experience for Community Cloud
    WYSIWYG interface to customize record home pages, list view pages, custom pages and more.
    Choose a starting template. Prior to Lightning Bolt, this was typically Napili, but now the possibilities are expanding
    Comes with a large number of Salesforce provided standard components.
    As of Winter 16, ability to create your own components that can have configurable options for Admins to change as necessary.
  • Demo 0 (Community Builder)
    Show color picker / image upload
    Show ability to create object representation of pages
    Show ability to create custom page
    Show Drag / Drop interface with Standard component library


    ** Quick walkthrough - Compare to App Builder
  • Existing Lightning Components that you want to expose in Community Builder only require one small update.
    Only need to add this if you want that component to show up in Community Builder. Don’t need to update helper components.


    https://releasenotes.docs.salesforce.com/en-us/winter16/release-notes/rn_lightning_community_builder.htm
  • Inherit site-wide standards for your UI
    All components have a consistent look and feel
    Handful of standard design tokens available
    Font Color
    Font Type
    Border Color
    Link Color
    Etc…

    https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_standard_communities.htm
  • Demo 1 (Enable Visibility)
    Open Lightning Experience App Builder to show Component in use
    Open Community Builder to show Component not available
    Open Developer Console
    Open existing Lightning Component that shows your User Information
    Update component to implements=“forceCommunity:availableForAllPageTypes”. Save
    Refresh Community Builder to show Component available.
    Drag component onto page and Preview
    Demo 2 (Design Tokens)
    Change the font-family from Helvetica to something else in Community Builder. Show that the component is now inconsistent font
    Open Developer Console to show Component “Style”
    Change font-family to token
    Note that defaultTokens token needs to be created first
    Show Community Builder, fonts are consistent.
    Change font in Community Builder to something else
    Show fonts remain consistent
  • Communities are technically very similar to internal Salesforce. Big difference is data scoping and privacy.
    Need to be sure that your components do not expose data the Community is configured not to show.
    Respect Community Settings. Admins can toggle settings like the following that your components need to respect:
    Display Real Name vs Nickname
    Customer support community may not want real names to be used. Don’t want to write a component that ignores this.
    Need to be mindful to check Field Level Security in your Components before presenting data to the screen
    Visualforce inputField & outputField tags did this work for you
    Ensure that any queries you run are scoped to the correct Community.
    Users with access to multiple Communities (or internal Salesforce) may see data they have access to, but do not belong in this Community, such as Knowledge Articles or Chatter Groups.
  • Demo 1 (Nickname vs Full Name)
    Open Community Administration to show Nickname is set to show for names
    Open Community Builder to show a Component with the following issues:
    Displaying a User’s real name
    Open Developer Console to Component
    Open Apex Class controller and paste in code to check whether to display Nickname or Full Name
    Update response data to set the appropriate value. Save.
    Refresh Community Builder to show the correct value is being shown
    Open Community Administration to change Full Name to show
    Refresh Community Builder to show the correct value is being shown
    Demo 2 (Query – Chatter Groups)
    Open Community to show the Featured Groups
    Open Groups tab in Community to show that there is only 1 group – the rest were internal
    Open Developer Console to Apex Class controller
    Show that the query was ambiguous in the NetworkId filter
    Update NetworkId part of query
    Refresh Community home page to show that featured groups are now filtered
  • Links posted at bit.ly/MW-DF16
  • Architecting Lightning Components for Community Builder

    1. 1. Architecting Lightning Components for Community Builder michael.welburn@gmail.co m @MichaelWelburn Michael Welburn Salesforce Engineer, Twitch
    2. 2. Michael Welburn Salesforce Engineer, Twitch 9 x
    3. 3. What is Community Cloud? Collaborate with people outside your company using your Salesforce data • Customers • Partners • Employees Each Community is a “mini-Salesforce” instance tied to your org • Support for multiple Communities against 1 Salesforce instance • Record data can be shared between environments • Chatter data segmented between each Community
    4. 4. Community Cloud Customization in the Past Previous Options • Salesforce Classic Tabs • Visualforce & Force.com Sites • Site.com Moving away from Visualforce & Force.com Sites • Developer required for all changes • No standard implementation across Communities • Page-centric development is not reusable • Standard Salesforce interfaces not mobile responsive • Salesforce is prioritizing Community Templates for new functionality
    5. 5. Community Builder Evolution of Community Cloud into Community Builder • Community Templates / WYSIWYG • Color Picker • Image Uploads • Page Creation • Object & Custom Pages • Standard Components • Support for custom Lightning Components • Salesforce Lightning Design System (SLDS) • Design Tokens • Component Events • Mobile Responsive Creating Maintainable Custom Branded Communities
    6. 6. Community Builder Demo
    7. 7. Basic Requirements Implement the forceCommunity:availableForAllPageTypes interface • That is it! Enabling a Lightning Component to be used in Community Builder
    8. 8. Basic Requirements Create a defaultTokens.token bundle extending force:base Within the Style portion of custom Lightning Component, leverage token(fontFamily) syntax Leveraging Design Tokens for Configurable Branding
    9. 9. Basic Component Setup Demo
    10. 10. Respecting Community Security & Configuration Be aware of configurable Community Preferences • Community Nickname vs Full Name Ensure your Data is scoped correctly • Data may be accessible in a Community where it is not applicable • Zones • Chatter Groups • Data Categories
    11. 11. Community Nuances Demo
    12. 12. Next Steps & Resources What is Community Cloud? • http://bit.ly/CC-FAQ Community Builder Overview • http://bit.ly/CBOverview Lightning Components Developer Guide • http://bit.ly/LC-DG Trailhead for Communities • http://bit.ly/trailheadcc Source Code • http://bit.ly/MW-DF16Code Set Up Your First Community • http://bit.ly/SetupCommunity Using Templates to Build Communities • http://bit.ly/UsingTemplates Configure Components for Communities • http://bit.ly/ConfigComponent Network Object API Definition • http://bit.ly/NetworkAPI Standard Design Tokens for Communities • http://bit.ly/DesignTokens All links available at http://bit.ly/MW-DF16
    13. 13. Thank Y u

    ×