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 ✌

CRM Portal - Send Confirmation Email to User after Successful Registration

Hello CRM Folks,

Currently, there is no out of box way to sent confirmation email after successful registration on Portal.

But by creating a simple System Workflow we can make this possible and send the user an email notification after successful registration.

Write a workflow on Contact Entity and Trigger it on below field change.

Add a condition 'If Login Enabled = Yes then only add a step to send email to user"

Note: 'Login Enabled' field value changes to true only one time as soon as the user clicks on Register button on Portal. So this workflow will trigger only one time when user registered on the portal.

CRM Portal - Validate that Email already exists when using "Forgot Password"

Hello Everyone,

I have been seen a lot of people were asking about 'Forget Password' strange behavior in CRM Portal.

CRM Portal provides Forget Password option like other portal or websites, that allows users to reset their password if they have either forgotten their password or triggered an intruder lockout to authenticate with an alternate factor and repair their own problem, without calling the help desk.

CRM Portal ask the user to enter an email address in order to send password reset link. But it does not check whether email exists in CRM or for duplicate contact of same email address.

You either get an error message or not receive the email due to following reasons :

1. If multiple contacts found of same email address in CRM.
2. If the entered email address does not exist in CRM.
3. Is the email address written correctly in the contact and on the password reset control?

Although people have posted this in Microsoft Dynamics 365 Ideas Portal (here), but not sure whether this would be included in the future release or not. 

Solution 1 -

Enable duplicate detection rule in CRM and create a new rule to warn users to not create duplicate contact of same email address. But by doing this, you can only warn or give a message to the user but cannot restrict from contact creation of same email address.

Also, by doing this you can only check for duplicate contacts of same email address, not whether the user exists or not.

Solution 2 -

Create a new Content Snippet record

Name - Account/ForgotPassword/PageCopy

Website - <website name>

Value - text

Hide, out of box Send button and create your own custom button

$(window).load(function() {

$('#submit-forgot-password').hide();

$('#submit-forgot-password').after('<input type="button" value="Send" id="checkemailId">');

// You can apply the CSS as well on the button by adding a Style tag to it.

});

Write OData query to check for duplicate contacts of same email address and to check whether email id exists in CRM or not.

Refer below article if you are not aware how to use the OData in Portal.

http://arpitmscrmhunt.blogspot.in/2016/12/adxstudio-portal-how-to-use-odata.html

Put it inside the window.load function.

$('#checkemailId').click(function () {

var inputEmailAddres = $("#Email").val();

var odataurl= "~/_odata/contacts?$filter=emailaddress1%20eq%20%27" + inputEmailAddres + "%27%20or%20emailaddress2%20eq%20%27" + inputEmailAddres + "%27";

            $.ajax({

                type: "GET",

                url: odataurl,

                dataType: 'json'

            }).done(function (json) {

                 var contactsColl = json.value;

                 // If multiple email id found

                if (contactsColl.length > 1)

                {

                     alert("Multiple Contact Foundof entered email address");

                }

                 // If Single email id found

if (contactsColl.length == 1)

                {

                   $('#checkemailId').val('Sending...');

                    $('#submit-forgot-password').click();

                }

                // If email id not found

if (contactsColl.length == 0)

                {

                     alert("Entered Email Id does not exist in system");

                }

            })

});

window.parent.Xrm.Page.data.entity.getId() is not working in CRM 2016 and Dynamics 365

I have been seen a lot of CRM folks is struggling to find the syntax of getting Parent record details from Child record in CRM 2016 and above.

Syntax to get Parent record details from Child form in CRM above 2016 version :

window.top.opener.frames[0].Xrm.Page.data.entity.getEntityName();

window.top.opener.frames[0].Xrm.Page.data.entity.getId();

window.top.opener.frames[0].Xrm.Page.data.entity.getId();

window.top.opener.frames[0].Xrm.Page.getAttribute("attributename").getValue();

Cheers

Remove Forums link from CRM Portal Main Menu for unauthenticated users

Usually, we can manage hide/show of web links using web page access control rules in CRM Portals. But there are few links available on the portal that you cannot hide/show using access rules due to its own limitation. Forum link is one of them.

Below is the code that you need to add in Header Web Template in order to hide/show Forums web link for anonymous users in CRM Portal.

Paste the code in below-mentioned location in Header Web Template:

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

<script type="text/javascript">

var loggedInUserRole = '{{ user.roles }}';

if (loggedInUserRole.indexOf("Administrator") >= 0)

{

 $('a:contains("Forums")').parent().next().show();

 $('a:contains("Forums")').show();

}

else

{

 $('a:contains("Forums")').parent().next().hide();

 $('a:contains("Forums")').hide();

}

</script>

Anonymous User :

Administrator User :

Dynamics CRM and Facebook Integration using Azure Logic Apps

According to survey, Facebook has nearly as many users as the entire population of China, the most populous country on Earth. That means it is likely that the vast majority of your potential customers and current clients have a Facebook account. Since Facebook collects an enormous amount of personal data, it is the ideal platform to learn more about your target group and reach its members, either for free or with effective campaigns.

As we all known about this fact, “The whole world is moving online and into social settings and Social media lets you engage your customers directly. If you have concerns about something, you can ask questions and receive responses quickly. If customers have questions or complaints, they can interact directly with a member of your team who should respond sympathetically to their concerns and try to resolve the issue.

Note - If you have not gone through my Logic Apps Overview Post. Recommend you to go through that first to more clarity about the terminology being used in this post. 

Today in this article, we will learn step by step -


How Facebook can be integrated with Dynamics CRM using Azure Logic Apps.

Requirement - Get Facebook notification in Dynamics CRM.

In this Example - We will use two Connectors - Facebook and Dynamics CRM

And one Trigger - When any new post on my Facebook timeline


Prerequisites :

You must be having below stuff ready before going to integrate Facebook to Dynamics CRM

1. Azure Subscription (if not, get a free 1 month subscription from here)
2. Dynamic CRM Organisation instance (if not, get a free 1 month trial from here)
3. Facebook Account (if not, create your Facebook account from here 😀)

Step 1 : Sign in to the Azure portal and Search for Logic Apps.

Step 2 : Create a new Logic App.

Click On Add + to start creating new Logic app.

Name your logic app and select your Azure subscription. Now create or select an Azure resource group, which helps you organize and manage related Azure resources. Finally, select the data center location for hosting your logic app. When you're ready, choose Pin to dashboard and then Create.

Step 3 : Open Logic App Designer to design your first Logic App.

When you open your logic app for the first time, the Logic App Designer shows templates that you can use to get started. For now, choose Blank Logic App so you can build your logic app from scratch.

The Logic App Designer opens and shows available services and triggers that you can use in your logic app.

Step 4 : Once you click on Blank Logic App, you will be having list of Logic Apps Connectors.
Search for Facebook Connectors by typing - Facebook in search box.

Step 5 : Select Facebook - When there is a new post on my timeline.

Here, Facebook Post is Trigger to run logic app

Step 6 : Set Interval - How often you want to check for Facebook notifications.

Step 7 : Once done, Click on Next Step

Step 8 : Add an Action - When there is a new Facebook post on my timeline.

Step 9 : Now search for another connector - Dynamics 365 and select Dynamics 365 - Create a new record

Step 10 : Select Organization Name, and select Task Entity in second dropdown.

Step 11 : Add below description in Subject field of Task Entity

Step 12 : Click Done. You will be able to see below design in designer.

OK Cool we are done with Logic Apps creation.  Its time to test what we have designed.

For testing, I have just posted one Post on my timeline.

As soon as I get a new Facebook post on my timeline, CRM should create a new Task record as per Logic App flow as below:

Hurrayyy!!! It worked...

Please feel free to share our feedback. Happy Integrating 👍