Architecting Lightning Components for Community Builder

Editor's Notes

• #2: 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?
• #3: 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
• #4: 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/
• #5: 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.
• #6: 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.
• #7: 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
• #8: 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
• #9: 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
• #10: 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
• #11: 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.
• #12: 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
• #13: Links posted at bit.ly/MW-DF16