Sunday, 31 December 2017

Customize Registration Page in CRM Portals

Customise Portal Registration Page

Create a Content Snippet record (Portal > Content Snippet >New) with below details:
Name : Account/Register/PageCopy
Website : <website name>
Type : Html
Value: write your own HTML/DOM/JQuery code to add your custom controls and perform validations.

Customise Portal Login Page

Create a Content Snippet record (Portal > Content Snippet >New) with below details:
Name : Account/SignIn/PageCopy
Website : <website name>
Type : Html
Value: write your own HTML/DOM/JQuery code to add your custom controls and perform validations.

Visit : http://arpitmscrmhunt.blogspot.in/2017/05/edit-stylelayout-of-login-page-in-crm.html

Here is the sample code snippet for Registration Page:

In this example, I am adding two additional fields (Date of Birth and SSN) on Portal Registration Page.

// Code to add custom Date Of Birth Field
$('#ContentContainer_MainContent_MainContent_ShowUserName').next().next().after('<div class="form-group"><label class="col-sm-4 control-label required"><span id="ContentContainer_MainContent_MainContent_dob"><span class="xrm-editable-text xrm-attribute"><span class="xrm-attribute-value">Date Of Birth</span></span></span></label><div class="col-sm-8"><input id="ContentContainer_MainContent_MainContent_dob" class="form-control" aria-required="true"></div></div>');

// Code to add custom SSN Field
$('#ContentContainer_MainContent_MainContent_ShowUserName').next().next().after('<div class="form-group"><label class="col-sm-4 control-label required"><span id="ContentContainer_MainContent_MainContent_ssn"><span class="xrm-editable-text xrm-attribute"><span class="xrm-attribute-value">SSN</span></span></span></label><div class="col-sm-8"><input id="ContentContainer_MainContent_MainContent_ssn" class="form-control" aria-required="true"></div></div>');

//Code to Add Custom 'Register' Button and Hide the original one
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');

$('#SubmitButton').hide();



//Now you can handle the click of custom 'Register' button.
$("#mySubmitButton").click(function()
{
if(all validation pass)
{
var ssnInput = $('#ContentContainer_MainContent_MainContent_ssn').val();
var dobInput= $('#ContentContainer_MainContent_MainContent_dob').val();
localStorage.setItem("ssn", ssnInput );
localStorage.setItem("dob", dobInput);
$('#SubmitButton').click();
}
else
{
alert('throw error');
}
});
//Above Code Means :
// If all the validation pass then: store SSN and DOB in local storage and trigger click on the actual register button else throw your custom error message.
// We will have to store SSN and DOB in cache/localstorage, because we don't have a direct way to store it in CRM. Other data portal will automatically store in CRM like : Email, Username, Password, Confrm Password.

// As soon as user will be redirected to profile page after successful registration, we can write below two line of code in profile webpage (under custom javascript) section to get the SSN and DOB from cache or local storage and put it in profile custom SSN and DOB fields in order to store it in CRM.

$(document).ready(function(){
$('#profilepage_SSN_field').val(localStorage.getItem("ssn"));
$('#profilepage_DOB_field').val(localStorage.getItem("dob"));
localStorage.clear();
});

Complete Code :


<script>
   changeRegistraionPageUI();
  function changeRegistraionPageUI()
  {
     $(window).load(function() {

 // Code to add custom Date Of Birth Field
$('#ContentContainer_MainContent_MainContent_ShowUserName').next().next().
after('<div class="form-group"><label class="col-sm-4 control-label required"><span 
id="ContentContainer_MainContent_MainContent_dob"><span class="xrm-editable-text xrm-attribute">
<span class="xrm-attribute-value">Date Of Birth</span></span></span></label><div class="col-sm-8">
<input id="ContentContainer_MainContent_MainContent_dob" class="form-control" aria-required="true">
</div></div>');

// Code to add custom SSN Field
$('#ContentContainer_MainContent_MainContent_ShowUserName').next().next().
after('<div class="form-group"><label class="col-sm-4 control-label required">
<span id="ContentContainer_MainContent_MainContent_ssn">
<span class="xrm-editable-text xrm-attribute">
<span class="xrm-attribute-value">SSN</span></span></span></label>
<div class="col-sm-8"><input id="ContentContainer_MainContent_MainContent_ssn" 
class="form-control" aria-required="true"></div></div>');

//Code to Add Custom 'Register' Button and Hide the original one
$('#SubmitButton').after('<input type="submit" 
name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" 
value="Register" id="mySubmitButton" class="btn btn-primary">');

$('#SubmitButton').hide();
});
  }
</script>










Change Look and Feel of Registration Page :


$("#ContentContainer_MainContent_MainContent_SecureRegister").css({"background-color": "antiquewhite", "border-style": "groove", "border-radius": "18px", "width": "90%", "margin-left": "auto", "margin-right": "auto", "padding": "18px", "box-shadow":"5px 11px 47px black","margin-top":"-15px"});





Cheers

10 comments:

  1. Hello Arpit,

    I am using AdxStudio 7.0.0026 portal, and tried this code but this shows $('#ContentContainer_MainContent_MainContent_ShowUserName').next().next().after( and then the field, somehow it's not taking the effect of line with $, I am new to portal, so let me know if I am missing any basic thing. Thanks.

    Cheers,

    Mudit

    ReplyDelete
  2. Hey Arpit,
    Regarding Content snippets, I had a hard time figuring out what the name should be. For example here in the above case, how did you get to decide the name as 'Account/Register/PageCopy' for modifying the register page? is there any documentation on what the names should be for specific snippets? Only resource found online is snippets details form adx. Here is the link https://community.adxstudio.com/products/adxstudio-portals/documentation/end-users-guide/content-management/content-snippets/content-snippets/

    If you can point me to the right resource for Dynamics portals, that would be helpful.

    Thanks,
    Chandrahas.

    ReplyDelete
  3. How to update the custom field values to CRM Contact Entity after getting it from localstorage? Can provide any code snippet/general idea to update?

    ReplyDelete
  4. How did you find Account/SignIn/PageCopy snippet?
    How do we decide on this name ?

    ReplyDelete
  5. Hi Arpit i want to add an checkbox below the I have an existing account checkbox how can i do that?

    ReplyDelete
  6. Mudit\Unknown and Chandrahas did you guys follow the link ? that will answer your question : here it is again : http://arpitmscrmhunt.blogspot.in/2017/05/edit-stylelayout-of-login-page-in-crm.html

    ReplyDelete


  7. My name is Leah Brown, I'm a happy woman today? I told myself that any loan lender that could change my life and that of my family after having been scammed separately by these online loan lenders, I will refer to anyone who is looking for loan for them. It gave me and my family happiness, although at first I had a hard time trusting him because of my experiences with past loan lenders, I needed a loan of $300,000.00 to start my life everywhere as single mother with 2 children, I met this honest and God fearing online loan lender Gain Credit Loan who helped me with a $300,000.00 loan, working with a loan company Good reputation. If you are in need of a loan and you are 100% sure of paying the loan please contact (gaincreditloan1@gmail.com)

    ReplyDelete
  8. Hello Arpit,
    Thanks for wonderful post.
    I am working on Dynamics 365 portal, where Registration page has customized with addition fields (First Name, Last name, City etc.). I want to modify the respective JS validation code for new fields.
    In CRM I am not able to find the respective code, I checked all the content snippet but I didn’t find the code.
    When I ran Portal and debug in browser using developer tool I can see the custom JavaScript code. But didn’t find it in CRM even I didn't find the Account/Registration/PageCopy Content snippet.
    Please suggest.
    Let me know if further details are required.
    Best regards,
    Girish Soni
    Girish.soni@yahoo.com

    ReplyDelete
  9. Hi Arpit need you help.

    $("#mySubmitButton").click(function()
    {
    if(all validation pass)
    {
    var ssnInput = $('#ContentContainer_MainContent_MainContent_ssn').val();
    var dobInput= $('#ContentContainer_MainContent_MainContent_dob').val();
    localStorage.setItem("ssn", ssnInput );
    localStorage.setItem("dob", dobInput);
    $('#SubmitButton').click();
    }
    else
    {
    alert('throw error');
    }
    });

    where to write this js.
    Actually i have written this js inside the Account/Register/PageCopy and i am getting error for if(all validation pass).

    Please suggest

    ReplyDelete

Blogger Widgets