Show success and error symbol for each field on-change of field value in Dynamics 365/ PowerApps portals.

Recently I got a requirement where every time an user keys in a wrong email address, the user should get a error notification icon on the control and if the user key in the correct email address, the user should get a success notification on the control.

Very common requirement I shall say but again this is something which does not happen OOB. So let’s see how can we accomplish this.

Advertisements

For this demo I am using an Entity form for contact entity and we shall be playing with the email address of the contact.

In the Custom Javascript section of the Entity Form under “Additional Settings” tab, I write the below code.

// JavaScript source code

$(window).on(“load”, function () {

$e = $(“#emailaddress1”);

$e.addClass(“form-control”);

 

// add the has-feedback class. Without this it won’t work.

$e.closest(“div”).addClass(“has-feedback”);

// show the tick symbol.Hidden to start with.

$e.closest(“div”).append(“<span id=’emailaddress1-success-icon’ class=’glyphicon glyphicon-ok form-control-feedback’ style=’color:green;display:none’></span>”);

// remove symbol. Hidden to start with.

$e.closest(“div”).append(“<span id=’emailaddress1-error-icon’ class=’glyphicon glyphicon-remove form-control-feedback’ style=’color:red;display:none’></span>”);

$e.bind(“change”, emailAddressChanged);

});

function emailAddressChanged() {

var pattern = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

var inputValue = $(“#emailaddress1”).val();

$(“#emailaddress1-success-icon”).hide();

$(“#emailaddress1-error-icon”).hide();

debugger;

if ($.trim(inputValue) !== ”) {

var isInvalid = !pattern.test(inputValue);

if (isInvalid) {

$(“#emailaddress1-success-icon”).hide();

$(“#emailaddress1-error-icon”).show();

}

else {

$(“#emailaddress1-success-icon”).show();

$(“#emailaddress1-error-icon”).hide();

}

}

}

The important stuffs I have put a comment above those lines and highlighted in yellow. As you can see, I have just played around with some bootstrap elements. I save the entity form changes and I clear the portal cache.

On the contact create form below is my experience.

Advertisements

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

Our product offerings:

CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)

Notes Manager (https://debajmecrm.com/2019/02/28/add-metadata-to-your-notes-and-attachments-in-dynamics-notes-metadata-manager-from-xrmforyou-com/)

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)

Published by

Debajit

I am a Dynamics CRM Most Valuable Professional (MVP) with 12 years of experience in Microsoft .NET Technologies and 9 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s