Showing posts with label Salesforce Partner Portal. Show all posts
Showing posts with label Salesforce Partner Portal. Show all posts

Sunday, August 12, 2012

Partner Portal Login Page Customization & URL Masking for Partner Portal


Hope you are totally aware about the partner portal & site before going through this post. In the partner portal salesforce internally provide the default login page that is not user friendly. Here are some issues with the default portal login page-

#1-If you want to do some customization on the page like position, styles etc than it will a little bit difficult. Although you can use header & footer to add the custom style but there is some limitation if you want to fully customize this login box.

#2-Salesforce provide some default url for portal that is not user friendly. It will be something like as below
The url looks not good & not easy to remember if you want to spread to the portal users.

#3-Probably customer required branding at home page & in that case customize login page is a good option.

To avoid these issues you can create a custom login page & can also use site for URL masking (for any partner portal which in the same org). here is the steps 
by which you can do this-
#1-Hope you already having a partner portal in your org.

#2-Create a new site by registering a domain for that org.

let's say you rgister a site with below domain -
SitePortal so you site url will be http://SitePortal-developer-edition.ap1.force.com

#3-Create a dummy login VF page (Name - VFPortalLogin) for now, leave it blank, we will use this page in next step.

#4-Now go to Setup--> Site
create a site with some label. let's say you create MySite. So your site address will be
http://SitePortal-developer-edition.ap1.force.com/MySite
set the step #3 PortalLogin page as the default page
give the access to site as well as portal for this new page.

#5-Go to Setup--> Site --> Click on recently registered site --> click on Login Setting
Enable the Login (check the checkbox) for the partner which we created at first.

now open that page by site url, your url will be something like
http://SitePortal-developer-edition.ap1.force.com/MySite OR
http://SitePortal-developer-edition.ap1.force.com/MySite/PartnerLogin

you will see that blank login page which we created in previous steps. Upto this step notice that we are using the url masking for the portal. now we are going to start in the code part. here is the login VF page code, copy this code & paste in your VF page



<apex:page sidebar="false" showHeader="false" controller="PortalLoginController">
<apex:form forceSSL="true">
   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/elements.css')}" />
   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/common.css')}" />
   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/extended.css')}" />
   <apex:styleSheet value="{!URLFOR($Resource.PortalResource,'/PortalCSS/portal.css')}" />
   
    <style type="text/css">
        .username, .pw {
            width: 175px;
        }
    </style>
    <apex:pageMessages id="msg" />
       <div style="margin-top:60px;">
              <div class="portalheaderPRM">
                     <div style="width: 400px; margin: 0px auto; text-align: center; padding-right: 66px; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px;">
                            Put your LOGO here
                           
                     </div>
              </div>
       </div>
<div style="margin: 0px auto; width: 400px;">
       <table id="loginBox" class="bPageBlock" border="0" cellpadding="0" cellspacing="0" width="85%">
           <tr valign="top">
               <td>
                     <input type="hidden" name="startURL" value="" />
                       <div class="pbHeader">
                           <table border="0" cellpadding="0" cellspacing="0">
                               <tr>
                                   <td>
                                      
                                   </td>
                               </tr>
                               <tr>
                                   <td class="pbTitle">
                                       <h2>Secure Customer Login
                                       </h2>
                                   </td>
                               </tr>
                           </table>
                       </div>
                       <div class="pbBody">
                           <table border="0" cellpadding="0" cellspacing="0">
                               <tr>
                                   <td class="portalLoginLabel"><label for="username">User Name:</label></td>
                                   <td>
                                         <apex:inputText value="{!UserId}"  Styleclass="username" />

                                   </td>
                               </tr>
                               <tr>
                                   <td class="portalLoginLabel"><label for="password">Password:
                                   </label></td>
                                   <td>
                                         <apex:inputSecret value="{!UserPassword}"  Styleclass="pw" />
                                   </td>
                               </tr>
                           </table>
                           <div><a id="forgotPassword" href="/XXX_PortalPrefix/apex/PortalForgotPasswordVF">Forgot your password?
                                                </a>
                           </div>
                       </div>
                       <div class="pbBottomButtons">
                           <table border="0" cellpadding="0" cellspacing="0">
                               <tr>
                                   <td class="pbTitle"><img width="1" height="1" title="" class="minWidth" alt="" src="/s.gif" /></td>
                                   <td class="pbButtonb">
                                         <apex:commandButton value="Login" action="{!login}" />
                                   </td>
                               </tr>
                           </table>
                       </div>
             
               </td>
                     <td>
               <div class="pbFooter secondaryPalette"><div class="bg"></div></div>
               </td>
           </tr>
       </table>
</div>

</apex:form>
</apex:page>



you see that there are some resource used in the page. you can download these resource from the partner portal default login page>> view source. save all four CSS in a folder & upload it in static resource. set the path in the VF page as per your folder hierarchy.

now here is the controller code for that login page -


public class PortalLoginController {
      
       public String UserId {get;set;}
       public String UserPassword {get;set;}

       public PortalLoginController(){

       }
       public PageReference login(){
              PageReference pr =  Site.login(UserId, UserPassword,  '/apex/PortalHomepage');
              return pr;
       }
      
     
}



Create a new VF page & set it's name in controller so user will be redirect on that home page after logged in.

It's done, now you see that you can use a custom url for you portal, means we have done url masking.
whenever you need to add a new page you just need to add it at portal & you can use that with the same masked url..!!