You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Customizing Salesforce Community Login with Apex and Visualforce


Salesforce Community provides an efficient way  for collaboration and communication among the Customers, Partners,  and Employees of an organization. Even though Salesforce provides a standard way of configuring the look and feel of our community by using branding, still the community reflects the same standard look and feel. In order to overcome this, we can use Apex and Visualforce to customize our community login. This provides our customers and partners an attractive experience which may attract them to visit the community more often.

Refer the below link for creating a Community:  Creating Salesforce Communities

Customizing Community Login Page

Now, let us create our own Login Page for Community. Salesforce provides an Apex controller, Test Class and a VF page for the Community Login and Community Landing pages. We can edit and customize these pages and controllers, or we can completely create new controllers and pages. So, we will create our own Visualforce pages and use the existing Controllers by customizing them with some modifications.

First, we need to create a Visualforce Page with the controller named “CommunitiesLoginController” which should have the User Name, Password, and a Login button to log into the community. Before creating your VF page, modify your “CommunitiesLoginController” first.

Modify the Apex Controller “Communities Login Controller” with the below changes:

1) Variables for Username and Password.

2) forwardToCustomAuthPage method to return the VF page as the  Community Login Page.

3) Site.login function to authenticate the username, password and redirect it to the Community landing page.

The modified CommunitiesLoginController:

global with sharing class CommunitiesLoginController {

 public String password { get; set; }

 public String username { get; set; }

 global CommunitiesLoginController () {}

 global PageReference forwardToAuthPage() {

 String startUrl = System.currentPageReference().getParameters().get('startURL');

 String displayType = System.currentPageReference().getParameters().get('display');

 return Network.forwardToAuthPage(startUrl, displayType);

 }

 global PageReference RedirectToLogin()

 {

 return new PageReference( '/apex/StudentLogin');

 /* 'StudentLogin' is the name of the VF Page for login that is created below */

 }

 public PageReference loginUser()

 {

 return Site.login(username, password,'/NeedSupport');

 /* 'NeedSupport'  is the Page to which we will be redirected after Login */

 }

 }

StudentLogin (VF Page for Login):

<apex:page showHeader="false" sidebar="false" controller="CommunitiesLoginController" standardStylesheets="true">

<apex:Pagemessages id="msg"/>

<!-- To allow Salesforce to display error messages -->

<center><div><b>GLOBAL EDUCATION</b></div></center>

<apex:form >

<p><b>Global Education Login</b><br /></p>

<apex:panelGrid columns="2" style="float:center;">

<p><b><font color="white">UserName</font></b><br />

<apex:inputText required="true" id="username" value="{!username}"/></p>

<p><b><font color="white">Password</font></b><br />

<apex:inputSecret id="password" value="{!password}"/></p>

</apex:panelGrid>

<p><apex:commandButton action="{!loginUser}" value="Login" id="Login"/>

</p>

</apex:form>

<style>

html,body{

background-image:url('https://prelibertina.files.wordpress.com/2015/07/bg.jpg');

background-repeat: no-repeat;

background-size: 100% 100% ;

height:100%;

color:white;

float:top;

}

form{

float:right;

color:white;

border:1;

}

</style>

</apex:page>

Note:

Edit the ‘Communities Login’ page and change the apex action attribute as,   action=”{!RedirectToLogin}”

Our resulting Login Page will be similar to the below screenshot:

Customizing Community Header and Footer:

To make our Community look more attractive and appealing, let us create two separate pages for Header and Footer and include them in all our pages except our Login page.

Community Header

Our header page should include a Header image, a Logout Button for User Logout, and it should display the Username and Email of a User after the user logs in.

   public with sharing class Header {

   public PageReference Logout() {

   Pagereference pg1 = new Pagereference('/secur/logout.jsp?

   retURL=StudentLogin');

   /* After Logging out, we are redirecting the user to Login page */

   pg1.setRedirect(true);

   return pg1;

   }

   }

Header Page (VF page for Header):

<apex:page id="header" showHeader="false" sidebar="false"  controller="Header">

<div class="head"><font size="40"><center>EDUCATION CENTER</center></font></div>

<div align="right" class="icon">

<apex:image value="https://prelibertina.files.wordpress.com/2015/07/icon.png" width="3%"

height="3%"/>

</div>

<br/>

<div class="name" align="right" bgcolor="#993333"> 

<apex:outputText value="{!$User.FirstName}"/>

<br/>

<apex:outputText value="{!$User.Email}"/>

</div>

<apex:form >

<apex:commandButton value="Back" action="{!backMethod}"/>

<apex:CommandButton value="Logout" action="{!Logout}"/>

</apex:form>

<br/>

<br/>

<div class="line">&nbsp;</div>

<style>

.head{

background-color:#003366;

background-image:url("https://prelibertina.files.wordpress.com/2015/07/bg.jpg");

background-repeat:no-repeat;

background-size:100% 100%;

width:100%;

color:white;

height:30px;

padding:80px;

}

.icon{

background-color:#003366;

color:white;

float:right;

height:5%;

width:100%;

}

.name{

background-color:#003366;

color:white;

}

form{

float : right;

}

.line{

background-color:#999966;

width=100%;

height=10%;

}

</style> 

</apex:page>

Footer (VF Page for Footer):

<apex:page showheader="false">

<div class="line" height="20%">&nbsp;</div>

<div class="Footer" align="center">

© 2015 MST Solutions – Community Team. All Rights Reserved

</div>    

<style>

.line{

background-color:#999966;

width=100%;

height=10%;

}

.Footer{

background-color:#003366;

color:white;

position:top;

width:100%;

padding :50px;

}

</style>

</apex:page>

Modified CommunitiesLandingController:

The modified CommunitiesLandingController with the ‘forwardToCustomAuthPage’ method:

public with sharing class CommunitiesLandingController {

  // Code we will invoke on page load.

   public PageReference forwardToStartPage() {

   return Network.communitiesLanding();

   }

    public CommunitiesLandingController() {}

   public PageReference RedirectToLandingPage()  

   {

   return  new PageReference('/apex/NeedSupport');

   }

   }

NeedSupport Page:

As we are keeping our ‘NeedSupport’ page as our Landing page, we need to set the controller of our ‘Need Support’ page as ‘CommunitiesLandingController’

<apex:page controller="CommunitiesLandingController"  showHeader="false" sidebar="false">

<apex:include pageName="Header"/>

<apex:tabPanel switchType="Client" selectedTab="NeedSupport" id="TabPanel1">

<apex:tab label="Need Support" name="NeedSupport" id="NeedSupport">

<div align="left" width="50%">

<apex:include pageName="ListCase"/>

<!-- ListCase is a VF page which lists all the Cases -->

</div>

</apex:tab>

</apex:tabPanel>

<apex:include pageName="Footer"/>

</apex:page>

Note:

Edit the ‘Communities Landing’ page and change the apex action attribute as,   action=”{!RedirectToLandingPage}”

The resulting page will look like this:

Note:

After creating all the above pages and apex classes, don’t forget to ensure the respective profile has access to all the Visualforce pages and Apex classes.

To set the ‘StudentLogin’ page as your Community Home Page :

Setup → Communities → All Communities → Click Manage at the side of Community Name → Administration Settings → Pages → Choose the StudentLogin page as Community Home.

To set the ‘StudentLogin’ page as your Community Login Page :

Setup → Communities → All Communities → Click Manage at the side of Community Name → Administration Settings → Click Login & Registration → Under login choose the StudentLogin page → Click Save.