Slides from Dreamforce 2015 session

1. Brand Your Community Using Less
and Gulp
Shuji Ui
Senior Technical Architect, 7summits
shuji.ui@7summitsinc.com
Twitter@shujiui

2. Shuji Ui
Senior Technical Architect
7summits

3. • How many people have built Community sites using Community cloud?
• How many people have used Salesforce Tabs + Visualforce Community template?
• How many people have used Less?
• How many people have used Gulp?
Have you used Community Cloud?

4. • Community Templates
• Configure Visualforce Template to Community
• Load Visualforce Header/Footer to OOTB pages
• Configure color code fields in “Community Configuration” custom object
• Less
• Gulp
• Generate CSS Visualforce component using Gulp
Demo
• Adding header to Customer and Partner communities
• Changing brand colors from internal SFDC tab without modifying code
Agenda

5. Community Templates

6. Community Builder Based (KOKUA, KOA, NAPILI, and ALOHA)
• Branding Editor to change colors and fonts
• Site.com Studio to adjust templates
• KOKUA, KOA for Knowledge and Cases
• NAPILI for Knowledge, Cases, and Q&A
• ALOHA App Launcher for Identity and Connected App
SALESFORCE TABS + VISUALFORCE
• OOTB tabs
• Use Visualforce Template + Header/ Footer components
Community Templates

7. Community Templates

8. Configure Visualforce Template

9. • Create Visualforce template and add header and footer Visualforce components to the template
Create Visualforce Template

10. • Configure the Visualforce template to community
Configure Visualforce Template in Community Site Details

11. OOTB Header / Footer

12. Salesforce Tabs + Visualforce template: OOTB pages

14. Configure Header / Footer html pages to the Salesforce Tabs +
Visualforce template
• Create Header / Footer html pages
• Upload them to a Document folder
• Configure them in Community Administration: Branding tab

15. • Create Header / Footer Visualforce pages
• Create jQuery script pages
• Load jQuery script pages in HTML Header / Footer pages
Using jQuery to load Visualforce Header / Footer
for OOTB pages

16. • Create Header / Footer Visualforce pages
• Add Header / Footer Visualforce components to the pages
Header Example: SC_HTMLHeader.page
<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false”
standardStylesheets="false”>
<c:SC_Header />
</apex:page>
Create Header / Footer Visualforce Pages

17. Header Example: SC_LoadHeader.page
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" contentType="text/javascript" >
$j = $.noConflict();
$j(".header-wrap" ).load( "{!$Page.SC_HTMLHeader} #header" ,function(){
$j("div[role='banner']").remove();
$j(".zen-bodyZen").css("border-top", "0px");
});
</apex:page>
Using jQuery to load the Visalforce Header / Footer pages

18. Header Example: SC_CustomerHeader.html
<div class="header-wrap"></div>
<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Load Visualforce page as a script -->
<script type="text/javascript" src="/customer/SC_LoadHtmlHeader"></script>
Header.html / Footer.html

20. Community Configuration Object

21. • Create “Community Configuration“ custom object
• Add fields for Brand Primary Color, Brand Secondary Color…etc
Configure color code fields in “Community Configuration” object

22. • Query Community Configuration Record and assign values to properties
Apex controller

23. • Create an empty Visualforce component named “SC_CSSMain.component”
CSS Component

24. Less

25. CSS pre-processors. One of the most popular front-end development tools.
Mixins
.v-align {
display: inline-block;
vertical-align: middle;
}
#navbar{
.v-align;
}
Less

26. Nested Rule
#header-top{
.vertical-align;
.brand-color;
width: 100%;
height: 84px;
.header-left {
position: relative;
.vertical-align;
}
}
Less cont.

27. Variables
@brand-primary: #2084ba;
@brand-primary-dark: #165C82;
@brand-title-text-color: #F6F6F6;
#header-top{
.v-align;
background: radial-gradient(@brand-primary-color,@brand-primary-dark-color);
width: 100%;
height: 84px;
color: @brand-title-text-color;
}
Less cont.

28. • Map Visualforce merge fields to Less variables using ~
Map Visualforce merge fields to Less variables

29. Gulp

30. • One of the most popular JavaScript build tools (Grunt, Brunch…etc)
• Gulpfile.js, defines build tasks. Great thing about “Gulpfile.js” is JavaScript code not configuration file.
• Simple: 5 basic functions
• gulp.task: registers function
• gulp.run: run tasks
• gulp.watch: watch file changes and run tasks
• gulp.src: returns a readable stream
• gulp.dest: return a writable stream
Gulp

31. “compileCSS” task to dynamically generate
Visualforce SC_CSSMain.component and upload to SFDC org

32. Demo

33. Demonstrate changing brand colors from internal SFDC tab without modifying code
Steps
• 2 Communities (Customer and Partner) using one code base
• In “Community Configuration” custom object tab
 “Brand Customer Community” record
 “Brand Partner Community” record
• Add SC_Header.component
• Style SC_Header.component in header.less
• Configure VF merge fields in variable.less
• Using Less and Gulp generating SC_MainCSS.component
• Change branding colors from internal SFDC tab without modifying code.
Demo: Adding header to customer and partner communities
using less and gulp

34. • Gulp monitors file changes
• Gulp compiled less files
• Because of the less variables, merge fields were generated to a css file
background: radial-gradient({!BrandPrimaryColor}, {!BrandPrimaryDarkColor});
• Gulp constructed SC_MainCSS.component
• Gulp executed MavensMate command to saved SC_MainCSS.component to SFDC org.
• SC_MainCSSCotroller read the brand colors in Community Configuration records based on the community
name.
Here is what happened.

35. “compileCSS” task to dynamically generate
Visualforce SC_CSSMain.component and upload to SFDC org

36. Summary

37. • Community Templates: SALESFORCE TABS + VISUALFORCE
• Visualforce Template
• JQuery loading Visualforce Header/Footer Components to OOTB pages
• “Community Configuration” custom object
• Using Less + Gulp to generate SC_CSSMain.component
• Add header to customer and partner communities
• Changing brand colors from internal SFDC tab without modifying code
Summary

38. • Multiple Communities with same code base
• Managed Package
These techniques are useful when

39. • Twitter: @shujiui (Blog, Slides)
• Github: https://github.com/shujiui
Call to Action

40. Q&A

41. Thank you

42. Share Your Feedback, and Win a GoPro!
3
Earn a GoPro prize entry for each completed
survey
Tap the bell to take a survey2Enroll in a session1