How To Create a Custom Salesforce Communities Login and Landing Page

October 31, 2013 Appirio

By Bryan Leboff

Intro to Salesforce Communities

The new Salesforce communities feature offers many advantages over the old customer portal. One of these major advantages is the increased amount of branding control given to both the login page, and internal portal pages. They are easy enough to configure from the communities setting, but the ability to customize these pages even further is offered as well, including the ability to completely change the look and feel of the login page as well as the landing page.

For this example I’m going to make use of the Bootstrap CSS framework, so make sure the bootstrap zip is included in your org as a static resource and make sure cache control is set to ‘public’. You can grab it here:

https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip

So now lets go into Customize -> Communities -> Settings and create a domain for your community. I am using ‘custom-login-demo’.

1-Salesforce-Communites

Now under Customize -> Communities -> Manage Communities lets create a community. I am going to keep mine under the root url and call it Custom Login Demo.

2-Create-Community

Login Page for Salesforce Communities

First let’s customize our login page. If you click the Force.com link you will see that the default page for Salesforce Communities login is the CommunitiesLogin page and the controller on that page is the CommunitiesLoginController.

3-Custom-Login

 

3a-errors

Let’s start by creating our own controller called CustomLoginController.

The controller for this page must have a variables for both the username and password, a login function as well as a function that will be the action of the login Visualforce page.

The login function simply calls the method Site.login() with the Username and Password

The forwardToCustomAuthPage() will be the action method of our CustomLogin Visualforce page. This keeps a non authenticated user of Salesforce Communities on our CustomLogin page.

So your controller looks something like this:

[snippet caption=””]

/**
 * An apex page controller that exposes the site login functionality
 */
global with sharing class CustomLoginController {
    global String username{get;set;}
    global String password{get;set;}
    global CustomLoginController () {}
    global PageReference forwardToCustomAuthPage() {
        return new PageReference( '/CustomLogin');
    }
    global PageReference login() {
        return Site.login(username, password, null);
    }

}

[/snippet]

Now we will create our login page. On it we will have a simple form in the middle of the page for username, password and submit. This ends up looking like this:

[snippet caption=””]

<apex:page docType="html-5.0" controller="CustomLoginController" showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'dist/css/bootstrap.min.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'dist/js/bootstrap.min.js')}"/>
    <div>
    <apex:form styleClass="form-horizontal">
      <fieldset>
        <div id="legend">
          <legend class="">Login</legend>
        </div>
        <div>
          <!-- Username -->
          <apex:outputLabel value="Username" styleClass="col-lg-2 control-label" for="username"/>
          <div>
              <apex:inputText value="{!username}" id="username" styleClass="form-control" />
          </div>
        </div>
        <div>
          <!-- Password-->
          <apex:outputLabel value="Password" styleClass="col-lg-2 control-label" for="password"/>
          <div>
            <apex:inputSecret id="password" value="{!password}" styleClass="form-control" />
          </div>
        </div>
        <div>
          <!-- Button -->
          <div></div>
          <div>
            <apex:commandButton action="{!login}" styleClass="btn btn-success" value="Login"/>
          </div>
        </div>
      </fieldset>
    </apex:form>
    </div>

[/snippet]

Salesforce Communities Landing Page

Now on to our landing page. First we create our CustomLandingController.

Again we create a method called forwardToCustomAuthPage() that will forward guest users to the CustomLogin page.

[snippet caption=””]

* An apex page controller that takes the user to the right start page based on credentials or lack thereof
 */
public with sharing class CustomLandingController {
// Code we will invoke on page load.
	public PageReference forwardToCustomAuthPage() {
		if(UserInfo.getUserType() == 'Guest'){
			return new PageReference('/CustomLogin');
		}
		else{
			return null;
		}
	}
	public CustomLandingController() {}
}

[/snippet]

And we create our CustomLanding page which for the purpose of this will just be a simple Hello World page. Mine looks like this:

[snippet caption=””]

<apex:page doctype="html-5.0" controller="CustomLandingController" action="{!forwardToCustomAuthPage}" showheader="false" sidebar="false" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'dist/css/bootstrap.min.css')}" /> <apex:includescript value="{!URLFOR($Resource.bootstrap, 'dist/js/bootstrap.min.js')}" />
<div>
	<div>
		<h1>
			Hello, world!
		</h1>
		<p>
			...
		</p>
		<p>
			<a>Click me!</a>
		</p>
	</div>
</div>
</apex:page>

[/snippet]

Setting Up the Community

Now we need to edit our community settings to use this custom login and landing page. So go to Customize -> Communities -> Manage Communities and click on force.com for the community that these will apply to.

At the top of the page you can see the default settings for Active Site Home Page and Inactive site homepage. Let’s change these to our new CustomLanding and CustomLogin pages

4-Site-Edit

 

Now at the bottom , we want to change the authorization and maintenance pages to our new custom login page as well.

5-Assign-Error-Pages

 

Make sure it works!

Now its time to test it out.  First attempt to go to your community url. (mine is custom-login-demo-developer-edition.na15.force.com)

First, it should send you to the login page because you don’t have access yet.

6-Login

 

Now create a community user for one of the contacts in your organization. Keep in mind you must add their profile to your community in the community ‘members’ settings. and login at that url

Portal Account Owner Has No Role” you must give your user object a role in your org

Login with that community user and it should send you to the landing page!

7-hello-world

 

That’s all there is to it! For more information, please reference this guide from Salesforce: Getting Started With Communities Please leave any questions in the comments!

Bryan Leboff is an Associate Consultant working in Appirio’s Salesforce Consulting practice. 

Previous Article
Salesforce Admin Hack Series: Case Object
Salesforce Admin Hack Series: Case Object

A couple of weeks ago I was very fortunate to co-host another Salesforce Admin Hack webinar with the one an...

Next Article
Are your Salesforce Queue Members being bugged by Owner change notifications?
Are your Salesforce Queue Members being bugged by Owner change notifications?

By Enda Traynor Have you ever experienced the scenario where changing the Owner of a record in Salesforce t...