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

Dynamics CRM - Dynamically change row color in grid view

Sometimes we get requirements for visually appealing representation of data in CRM Grids.
Like, we have to cater to requirements like “High” Priority cases should appear in “Red” color, or like high gross revenue opportunities should appear highlighted in the Grid.

In this article, we will show grid rows of Qualified Leads in Green Color, Lost or Disqualified Leads in Red color and Newly created Leads in Yellow Color

Step 1: Create a web resource of JavaScript Type and paste the below code under Text Editor.

    function showLeadStatus(rowData, userLCID) {

    if (rowData == null || rowData == 'undefined') return;

    // read rowdata
    var str = JSON.parse(rowData);

    // get leads status
    var coldata = str.statuscode_Value;

    //get row/record guid
    var rowId = str.RowId;

    if (coldata == null || coldata == 'undefined' || coldata.length < 1) return;

    switch (coldata) {

        case 4: //if 'Lost

   

            // This is the way to get the whole row

           // This syntax might get changed in your case based upon requirement

           // First you need to find the 'td' tag (by doing F12 in gridview) based on the attribute you want to color the grid view

           // For Example, here I am using lead status field (statusreason) and the 'td' of 
status reason  field is span that is why I have used span to get the 'td' then used the 'closest' method to get the 'tr' of that 'td' in order to make the row colorful

            $('span:contains("Lost")').closest('tr').css('background-color', 'coral')
            $('span:contains("Lost")').closest('tr').css('color', 'white')
 
            break;

        case 3: //if 'qualified':

            $('span:contains("Qualified")').closest('tr').css('background-color', 'greenyellow')
            $('span:contains("Qualified")').closest('tr').css('color', 'white')

            break;

        case 1: //if 'new':

            $('span:contains("New")').closest('tr').css('background-color', 'yellow')
           
            break;

        default:
          
            break;
    }

}

Step 2: Open 'All Leads' view and mention the web resource and function name. I have selected Status Reason field because we have to perform the logic based on Lead Status value.

Step 3: Save and Close the View. Publish the Entity to see the changes.

Cheers ✌

Show Web Links on Mouse Hover in CRM Portal

Hello Folks,

CRM Portals show child links only when you click on weblinks down arrow. Arpit Blog 🔽

Here is the code through which you can show the child links on mouse hover of Parent Web Link.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$('.dropdown-toggle').mouseover(function(){

       $(this).next().css("display", "block");
});
   
$('.dropdown-toggle').mouseleave(function(){

       $('.dropdown-menu').hide();
});

$('.dropdown-menu').mouseleave(function(){

      $(this).css("display", "none");
});
$('.dropdown-menu').mouseover(function(){

      $(this).css("display", "block");
});

$('.username').prev().prev().next().mouseover(function(){

      $(this).css("display", "block");

});

</script>

Note: Use the above code in Header Web Template.


Cheers ✌