Brand Your Community Using Less and Gulp
-
Upload
salesforce-developers -
Category
Technology
-
view
847 -
download
0
Transcript of Brand Your Community Using Less and Gulp
Brand Your Community Using Less and Gulp
Shuji Ui Senior Technical Architect, 7summits [email protected] Twitter @shujiui
Shuji Ui Senior Technical Architect
7summits
• How many people 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?
• Community Templates
• Configure Visualforce Template to Community
• Loading Visualforce Header/Footer to OOTB pages
• Configure color code fields in “Community Configuration” custom object and add them to a apex controller
• Less
• Gulp
• Generating CSS Visualforce component using Gulp
• Demo: adding header to Customer and Partner communities
Agenda
Community Templates
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
Community Templates
Configure Visualforce Template
• Select Salesforce Tabs + Viauslforce template type
• Create Visualforce template and add header and footer Visualforce components to the teamplate
Create Visualforce Template
• Configure the Visualforce template to community
Configure Visualforce Template in Community Site Details
OOTB Header / Footer
Salesforce Tabs + Visualforce template: OOTB pages
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
• Create Header / Footer Visualforce pages
• Create jQuery script pages
• Load jQuery script pages in HTML Header / Footer pages
Steps to load Visualforce Header / Footer for OOTB pages
• 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
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
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
Community Configuration Object
• Create “Community Configuration“ custom object
• Add fields for Brand Primary Color, Brand Secondary Color…etc
Configure color code fields in “Community Configuration” object
• Query Community Configuration Record and assign values to properties
Apex controller
• Create an empty Visualforce component named “SC_CSSMain.component”
CSS Component
Less
Front-end development framework, one of the most popular css pre-processors.
Mixins
.v-align {
display: inline-block;
vertical-align: middle;
}
#navbar{
.v-align;
}
Less
Nested Rule
#header-top{
.vertical-align;
.brand-color;
width: 100%;
height: 84px;
.header-left {
position: relative;
.vertical-align;
}
}
Less cont.
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.
• IMap Visualforce merge fields to Less variables using ~
Map Visualforce merge fields to Less variables
Gulp
• One of 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
“compileCSS” task to dynamically generate Visualforce SC_CSSMain.component and upload to SFDC org
Demo
Goal - Changing branding colors from SFDC internal tab without modifying code
• 2 Communities (Customer and Partner) using one code base
• In Community Configuration custom object tab “Brand Customer Community” and “Brand Partner Community” records
• Develop SC_Header.component
• Style SC_Header.component in header.less
• Configure VF merge fields in variable.less
• Using Less and Gulp generating SCMainCSS.component
• Change branding colors from SFDC internal tab without modifying code.
Demo: Add Header to Customer and Partner Community Using Less and Gulp
• Gulp compiled less files
• Because of the less variables, merge fields were generated to css files
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? Instead of uploading css to static resource…
“compileCSS” task to dynamically generate Visualforce SC_CSSMain.component and upload to SFDC org
Summary
• Communtiy Templates: SALESFORCE TABS + VISUALFORCE
• Visualforce Template
• JQuery loading Visualforce Header/Footer Components to OOTB pages
• “Community Configuration” custom object
• Using Gulp + Less to generate SC_CSSMain.component
Summary
• Multiple Communities with same code base
• Managed Package
These techniques are useful when
• Twitter: @shujiui
• Github: https://github.com/shujiui
• Slideshare: TBD
Call to Action
Q&A
Thank you