• Breaking News

    Saturday 24 January 2015

    Home customer portal customized customer portal salesforce How to create customize login and register customer portal in salesforce

    How to create customize login and register customer portal in salesforce

    22:34 , ,
    Customer portal is allow to user to login our internal system and access redistricted data. In this post we learn how to create customize customer portal in Salesforce,  how customize already available login and register page and access portal data using sites.

    Create Customer Portal:

    Step:1 click on setup->Build->Customize->Customer Portal->setting and enable customer portal. once you enable it you are not able to revoke it.after this step default portal is automatically created and we are able to create new one.In this post we used already created so click on edit.Below is screenshot




     when you create portal four profile automatically created.

            1. Customer Portal Manager Custom
            2. High Volume Customer Portal
            3. Customer Portal Manager Standard
            4. Customer Community User

    After save click on edit profile button in assign profile section in portal detail page. where you active profile for that portal.
    .
    After filling all information click on share group setting.in which you add user by which you want to share this portal. 

    Then Go to contact edit layout then drag it.


      Drop it on contact detail section.

      Now create an account and click on enable as partner.


     Now create an contact under related list of this account and create on enable as customer.

    Now user is created 

      After this check your mail in which user name and password is given to login in portal.Then go to your customer portal url which is given into to your customer portal detail page.

    Login with username and password given in your mail and access your customer portal  But guess look and feel of this login page is not good so we have to customize look and feel of this page.so let's begin.

    First create visual force page give name to CustomLogin.


     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
    <apex:page showChat="false" showHeader="false" sidebar="false"  doctype="html-5.0" controller="SiteLoginController" standardStylesheets="true"  language="en-US" applyHTMLTag="false"  >

  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
  <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap/js/bootstrap.min.js')}"/>
   <link href="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
  <link href="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.css')}" rel="stylesheet" media="screen"/>
    <head>
        <title>Customized Customer Login</title>
 
        <script type='text/javascript'>
        function noenter(ev)  {
            if (window.event && window.event.keyCode == 13 || ev.which == 13) {
                javascriptLogin();
                return false;
             } else {
                  return true;
             }
         }
        </script>
     <style type="text/css">
   
      .btnTask{
        -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
        -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
        box-shadow:inset 0px 1px 0px 0px #54a3f7;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7)) !important;
        background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%) !important;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
        background-color:#007dc1 !important;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid #124d77;
        display:inline-block;
        cursor:pointer;
        color:#ffffff !important ;
        font-family:arial;
        font-size:13px;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #154682;
     }
     .btnTask:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1)) !important;
        background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%) !important;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
        background-color:#0061a7 !important;
     }
     .btnTask:active {
        position:relative;
        top:1px;
     }
       
     .content {
         margin: 0 auto;
         width: 419px;
         border:1px solid black;
         padding-top:25px;
         padding-left:100px;
         margin-top:50px; 
      }
        </style>
    </head>
    <body>
       <div class="content">
            <div class="login">
                <apex:form id="loginForm" forceSSL="true">
                    <apex:actionFunction name="javascriptLogin" action="{!login}" />
                       <apex:pageMessages id="error" />
                        <div class="form-group">
                           <apex:outputLabel value="{!$Label.site.username}" for="username" />
                           <apex:inputText styleClass="form-control" id="username"
                                value="{!username}" />
                        </div>
                        <div class="form-group">
                           <apex:outputLabel value="{!$Label.site.password}" for="password" />
                        <apex:inputSecret id="password"
                            value="{!password}" styleClass="form-control" onkeypress="return noenter(event);" />
                        </div>
                        <apex:commandButton value="Login" styleClass="btnTask"
                                action="{!login}" id="submitbutton" />&nbsp;&nbsp;
                        <apex:outputLink value="/apex/CustomRegister">Not Register Click Here</apex:outputLink>                  
                </apex:form>
            </div>
        </div>
    </body>
</apex:page>
 
    

    

    

                                           

    

    

    

    

    

    
Then create SiteLoginController Apex class 
    

    

    

    

    

    

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    
    		


    global with sharing class SiteLoginController {
 
    global String username {get; set;}
    global String password {get; set;}
    global PageReference login() {
 
      //static org-id and portal id
      String strOrgID = 'your org id';
      String strPortalID = 'your portal id';
      String strURL = '';
      //start url of the page
      String startUrl = strUrl + '/secur/login_portal.jsp?orgId=' + strOrgID + '&portalId=' + strPortalID; 
      startUrl += '&un=' + username;
      startUrl += '&pw='+ password;
        //set reference and attempt login
      PageReference portalPage = new PageReference(startUrl);
      portalPage.setRedirect(true);
      PageReference p = Site.login(username, password, startUrl);
      if (p == null) {
          return Site.login(username, password, null);
      }else{       
          return Site.login(username, password, '/home/home.jsp');
        }
    }
    //test data provided by salesforce
     global SiteLoginController () {}  
}

    

    

    

    

    

    

    

    
Then create CustomRegister visual force page
    

    

    

    

    

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
    

    <apex:page showChat="false" showHeader="false" sidebar="false"  doctype="html-5.0" controller="SiteRegisterController" standardStylesheets="true"  language="en-US" applyHTMLTag="false"  >

  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
  <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap/js/bootstrap.min.js')}"/>
   <link href="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
  <link href="{!URLFOR($Resource.bootstrap, 'bootstrap/css/bootstrap.css')}" rel="stylesheet" media="screen"/>
   <style type="text/css">
      .btnTask{
        -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
        -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
        box-shadow:inset 0px 1px 0px 0px #54a3f7;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7)) !important;
        background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%) !important;
        background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%) !important;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
        background-color:#007dc1 !important;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid #124d77;
        display:inline-block;
        cursor:pointer;
        color:#ffffff !important ;
        font-family:arial;
        font-size:13px;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #154682;
     }
     .btnTask:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1)) !important;
        background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%) !important;
        background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%) !important;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
        background-color:#0061a7 !important;
     }
     .btnTask:active {
        position:relative;
        top:1px;
     }
       
     .content {
         margin: 0 auto;
         width: 419px;
         border:1px solid black;
         padding-top:25px;
         padding-left:100px;
         margin-top:50px; 
      }
        </style> 
 <div class="content">
 
            <div class="login">
                <apex:form id="theForm" forceSSL="true">
                       <apex:pageMessages id="error" />
                        <div class="form-group">
                           <apex:outputLabel value="{!$Label.site.username}" for="username"/>
                          <apex:inputText required="true" id="username" value="{!username}"/>
                        </div>
                        <div class="form-group">
                          <apex:outputLabel value="{!$Label.site.community_nickname}" for="communityNickname"/>
                          <apex:inputText required="true" id="communityNickname" value="{!communityNickname}"/>
                        </div>
                         <div class="form-group">
                          <apex:outputLabel value="{!$Label.site.email}" for="email"/>
                          <apex:inputText required="true" id="email" value="{!email}"/>
                        </div>
                         <div class="form-group">
                          <apex:outputLabel value="{!$Label.site.password}" for="password"/>
                          <apex:inputSecret id="password" value="{!password}"/>
                        </div>
                         <div class="form-group">
                          <apex:outputLabel value="{!$Label.site.confirm_password}" for="confirmPassword"/>
                          <apex:inputSecret id="confirmPassword" value="{!confirmPassword}"/>
                        </div>
                      <apex:outputText value=""/>
                      <apex:commandButton action="{!registerUser}" styleClass="btnTask" value="{!$Label.site.submit}" id="submit"/>
                                        
                </apex:form>
            </div>
        </div>
</apex:page>
                                      

    

    

    

    

    
Then Create SiteRegisterController apex class.  Here PORTAL_ACCOUNT_ID is record id of account that is previously created.
    

    

    

    

    

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    

    /**
 * An apex class that creates a portal user
 */
public with sharing class SiteRegisterController {
    // PORTAL_ACCOUNT_ID is the account on which the contact will be created on and then enabled as a portal user.
    // you need to add the account owner into the role hierarchy before this will work - please see Customer Portal Setup help for more information.       
    private static Id PORTAL_ACCOUNT_ID = 'record id of account that is previously created';
    
    public SiteRegisterController () {
    }

    public String username {get; set;}
    public String email {get; set;}
    public String password {get; set {password = value == null ? value : value.trim(); } }
    public String confirmPassword {get; set { confirmPassword = value == null ? value : value.trim(); } }
    public String communityNickname {get; set { communityNickname = value == null ? value : value.trim(); } }
      
    private boolean isValidPassword() {
        return password == confirmPassword;
    }
    
    public PageReference registerUser() {
        // it's okay if password is null - we'll send the user a random password in that case
        
        if (!isValidPassword()) {
            ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, Label.site.passwords_dont_match);
            ApexPages.addMessage(msg);
            return null;
        }    
        User u = new User();
        u.Username = username;
        u.Email = email;
        u.CommunityNickname = communityNickname;        
        String accountId = PORTAL_ACCOUNT_ID;

        // lastName is a required field on user, but if it isn't specified, we'll default it to the username
        String userId = Site.createPortalUser(u, accountId, password);
       
        if (userId != null) { 
            if (password != null && password.length() > 1) {
                return Site.login(username, password, null);
            }
            else {
                PageReference page = System.Page.SiteRegisterConfirm;
                page.setRedirect(true);
                return page;
            }
        }
        return null;
    }
}

    

    

    

    

    
Now go to Develop->build->site and click on new site button.
    

    
Enter your domain name and click on check availability and register for new site
    

    

    

    

    
 Here Active site home page is your visual force login page after filling all information click on save button Now go to site detail page using click on site name.
    

    

    

    

    
 And Click on edit button on site visual force page section and CustomLogin and CustomRegister page to enable visual force pages section.
    

    

    

    
Login Page:
    

    

    

    
Register Page:
    

    

    

    

    

    

    
Now We are able to login and register to this custom portal.
    

    
Guess Here is demo for this site.
    

    
https://samplesitedemo-developer-edition.ap1.force.com/
    

    

    
Note:- For Good look and feel i use bootstrap in static resource.
    

    

    
Read more 




    

    

    


    


    

Posted by



at












    


    

    

    

Labels:
,
,



    

    



    

    

    

    


    


    
      
    
    

    

    


    No comments:
    

    

    

    

    

    

    


    Post a Comment