Home > ADX > Useful JScript syntax’s – ADX/Dynamics 365 Portals

Useful JScript syntax’s – ADX/Dynamics 365 Portals

CRM form script’s (i.e., Onload, OnSave, OnChange) won’t run on ADX/Dynamics 365 Entity Form’s.

What if we must Get/Set, Hide/Show or Enable/Disable controls based on business logic? We need to write custom script and add in “Custom JavaScript” section of “Entity Form”.

Custom Javascript

Custom Javascript

In this article, I am providing syntax’s to Get/Set attribute values and basic validations.

Get value:

Text Field:

Here ‘name’ is CRM field’s schema name.

  • var contactName=$(“#name”).val();

Look up

  • var lookupGUID = $(“#new_contactid”).val();
  • var lookupValue = $(“#new_ contactid_name”).val();
  • var entityName= $(“#new_contactid_entityname”).val();

Option Set

  • var userType = $(“#new_usertype”).val();

DateTime

  • var dobValue= $(“#new_dob”).val();
  • // Convert to date
  • var dob=new Date(dobValue);

Checkbox

Below is the script to determine whether the checkbox is checked or not

var isChecked = $(“#{field_name}”).is(“:checked”);
if (isChecked == true) {
alert(“Checked!”);
}
else if (isChecked == false) {
alert(“Unchecked!”);
}

Radio Button

Radio button renders as 2 controls. Below is the syntax to read which radio option has been checked.

var isOption1Checked = $(“#{field_name_0}”).is(“:checked”); //Returns true/false

var isOption2Checked = $(“#{field_name_1}”).is(“:checked”); //Returns true/false

Set Value:

Text Field

  • $(“#name”).val(“Rajeev Pentyala”);

Look up

  • $(“#new_contactid”).val(lookupId);
  • $(“#new_contactid_name”).val(lookupName);
  • $(“# new_contactid_entityname”).val(EntitySchemaName);

Option Set

Here ‘new_usertype’ is CRM field’s schema name.

  • $(“#new_usertype”).val(10000);

Checkbox

$(‘#{fieldname}’).prop(‘checked’, true);

Radio Button

// To set Radio 1 to ‘true’

$(‘#{fieldname_0}’).prop(‘checked’, true);

// To set Radio 2 to ‘true’

$(‘#{fieldname_1}’).prop(‘checked’, true);

Date time

Below is the snippet to set Date field to ‘Today’

// Get today()
var dateValue = new Date();
// Get date field
var dateField = $(“#new_mydatefield”);
var $displayField = dateField.nextAll(“.datetimepicker”).children(“input”);
var dateFormat = $displayField.attr(“data-date-format”);
dateField.val(moment.utc(dateValue).format(“YYYY-MM-DDTHH:mm:ss.0000000\\Z”));
$displayField.val(moment(dateValue).format(dateFormat));

Note: Portal uses Moment.js for Date operations.

Note

Get/Set statements need to wrap in Document’s Ready event.

$(document).ready(function() {
// $(“#name”).val(“Rajeev Pentyala”);
});

Enable/Disable Controls:

Lookup

  • It’s very tricky to Enable/Disable Lookup’s
  • Lookup control render as multiple components on ADX form, to disable lookup selection, we need to find the ‘Magnifier’ button and Hide it.

$(“#new_contactid_name”).parent().find(‘.input-group-btn’).hide(); // Find lookup’s Magnifier button and Hide it

Date

  • Below is the script to disable ‘Date’ control

// My Date field’s schema name is ‘new_dateofbirth’
var dateField = $(“#new_dateofbirth”);
// Get ‘Text’ field of Date Control
var displayField = dateField.nextAll(“.datetimepicker”).children(“input”);
// Get ‘Calendar’ Icon of Date Control
var dateIcon = dateField.nextAll(“.datetimepicker”).children(“span”);
// Make ‘Text’ field of Date Control Read-Only
displayField.attr(“readonly”, “readonly”);
// Hide ‘Calendar’ Icon
dateIcon.css(“display”, “none”);

Text

  • $(“#name”).prop(‘disabled’, true);

Hide/Show Controls:

–Option 1
// Hide
$(“#fieldname”).hide();
$(“#fieldname_label”).hide();
// Show
$(“#fieldname”).show();
$(“#fieldname_label”).show();

–Option 2
// Hide
$(“#fieldname”).closest(“tr”).hide();
// Show
$(“#fieldname”).closest(“tr”).show();

Make OOB Required Field Non-Required:

  • If the Field is OOB Required or set as Required using Metadata, below is the function to make field as Non-Required.
    • Note: OOB required field will have the validator naming convention as “RequiredFieldValidator” + fieldSchemaName
  • Make sure you pass field’s Schema Name to below function.

function makeOOBFieldNonMandatory(fieldSchemaName){

$.each(Page_Validators, function (index, validator) {

if (validator.id == “RequiredFieldValidator” + fieldSchemaName) {

Page_Validators.splice(index, 1);

}

});

$(“#” + fieldSchemaName+ “_label”).parent().removeClass(“required”);

}

  • To set custom validator, refer this article

Liquid Script Syntax’s:

  • Get current Portal User (i.e.,Contact) guid

$(document).ready(function () {

var portalUserId = ‘{{ user.Id }}’;

});

  • Get current Portal User (i.e.,Contact) Name

$(document).ready(function () {

var portalUserName = ‘{{ user.fullname}}’;

});

  • Check if current Portal User has a specific ‘Web Role’

$(document).ready(function () {

{% if user.roles contains ‘Administrators’%}
alert(“Current portal user has ‘Administrators’ web role”);
{% endif %}

});

  •  Check if User is logged-in or not

{% if user %}

// Logged-In User

{% else if %}

// Not logged In. Anonymous User

{% endif %}

Validations:

Custom Validation on ‘Submit’

  • On click of the ‘Submit’ button a function named webFormClientValidate is executed.
Validation-on-submit

Validation-on-submit

  • We can extend this method to add our custom validation logic.
  • In below example, I am preventing ‘Submit’, if Name is not ‘Rajeev’

if (window.jQuery) {
(function ($) {
if (typeof (webFormClientValidate) != ‘undefined’) {
var originalValidationFunction = webFormClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == “function”) {
webFormClientValidate = function () {
originalValidationFunction.apply(this, arguments);
// Start custom validation.
// Prevent Submit if Name!=Rajeev
if ($(“#name”).val() != ‘Rajeev’) {
return false; // To prevent the form submit return false
}
// End custom validation.
return true;
};
}
}
}(window.jQuery));
}

Refer Adx portal’s blog on Custom JavaScript.

Session Timeout:

Following 2 keys need to be added to ‘Site Settings’ entity.

PSession_1

Name : Authentication/ApplicationCookie/ExpireTimeSpan
Value : The default amount of time cookie authentication sessions are valid for. Default: 24:00:00 (1 day). To set 30 minutes interval specify value as 00:30:00.

Name : Authentication/ApplicationCookie/LoginPath
Value : /SignIn
Description: Redirection onto the given login path after session timeout. We can configure our own custom Web Template and redirect up on session expiry.

Restrict ‘File Types’ during uploads:

  • To allow specific file types only, during the uploads from portal, provide configurations specified on screenshot on the portal’s ‘Entity Form’.
  • Make sure to check the ‘Restrict File To Accept Types’ checkbox.
  • In the ‘Accept’ field, specify the mimetypes of allowable file types separated by ,
    • image/jpeg,image/pjpeg,application/pdf,image/png

RestrictFileTypes

🙂

  1. Makbkul D
    April 27, 2017 at 3:48 PM

    Hi Rajeev, Can you please provide one same for set value for Date time control

  2. MOHAMMAD NAYEEM
    August 27, 2017 at 5:50 PM

    Please let me know the syntax of jQuery for making a filed mandatory on portal entity form based on certain condition.

  3. naveen
    November 11, 2017 at 12:13 AM

    Hi Rajeev Can you please provide the custom javascript for mandatory field in adx portal

  4. Ingrid
    December 22, 2017 at 2:58 AM

    If I wanted to get the billtoline1 from the related customerID record and populate that on the form, what would the syntax be?

  5. David Withers
    April 4, 2019 at 3:41 PM

    Can you tell me how to set the customer lookup? for some reason all I’m getting is the GUID in the lookop

    • June 24, 2019 at 9:42 AM

      Following syntax should work:
      $(“#new_contactid”).val(lookupId);
      $(“#new_contactid_name”).val(lookupName);
      $(“# new_contactid_entityname”).val(EntitySchemaName);

  6. Shobha YL
    August 20, 2019 at 10:56 AM

    How to restrict customer lookup to select only either a contact or an account(In mscrm portals) ?

    • October 17, 2019 at 11:08 AM

      There is no OOB way. We need to rely on ‘Web Page’ DOM model using script. I will come up with a new article to address this.

  7. vikrant
    October 16, 2019 at 6:31 AM

    How to retrieve record details in portal. I have to retrieve countact details if log-in user =contact.user

  8. Leonard Mpetuse
    January 16, 2020 at 8:41 AM

    Hi.

    I have two lookup fields which are mandetory on Dynamics 365, on adx they appear as mandetory fields but a user can update the data without updating those fields. How can I make those look-up fields mandatory on adx portal.

  9. Malini
    February 4, 2020 at 10:10 AM

    Very Useful Blog.

    I have a behavior on change of field.
    If a field(let’s say field A) has some value and i’m clicking on “Submit ” button i need to show few fields.
    If the field doesn’t have any value i’m hiding few fields.

    Issue is that when the field doesn’t have any value . hiding functionality is not working unless we refresh the Page.If i refresh the page my functionality is working.

    My code is triggering on Submit Button.
    Any suggestion.

    • February 5, 2020 at 2:54 PM

      Submit would either trigger onload or redirection.
      Did you try executing your script on onload event as well? I don’t see a reason why hide/show logic not working.

  10. February 5, 2020 at 5:05 PM

    Hi Rajeev,

    This is an awesome article. Do you know how to force the form to save on the Portal?

    • February 6, 2020 at 8:27 AM

      You can try triggering ‘Submit’ button click event using jQuery when needed, which submits the form.
      To trigger event capture the ID of the ‘Submit’ button and use $(‘#UpdateButton’).click(); statement.
      In the above statement, ‘UpdateButton’ is the ID of form’s submit button

  11. harish
    March 8, 2020 at 4:54 PM

    Can you suggest how to hide the complete navigation bar(includes logo, and primary navigation links) on the portal. It should be hidden only for a specific page, not on all pages.

    • March 9, 2020 at 11:58 AM

      Try by getting page’s DOM components using F12 (Developer tools) and on the web page which you would want to hide, write script to hide them.

  12. Akshata
    March 30, 2020 at 5:25 PM

    hi, rajeev…i want to hide some fields when the user is already logged in can suggest how to hide the fields by using javascript code…

    • March 30, 2020 at 6:11 PM

      You can use following check.

      {% if user %}
      // Logged-In User
      {% else if %}
      // Not logged In. Anonymous User
      {% endif %}

  13. Prajakta
    April 6, 2020 at 5:16 PM

    can you please provide me Custom JS for field mapping

    • April 6, 2020 at 7:48 PM

      Can you be more specific on what you meant by ‘Field Mapping’?

  14. Dipen
    April 14, 2020 at 11:36 PM

    Can you please provide a custom javascript example of matching two fields?

    For example, I want to match Email id and ConfirmEmail id.

  15. Bhavendra Jaiswal
    June 15, 2020 at 11:22 AM

    Hi Rajeev,
    Is it possible to show some warning message next to some field in Portal form(like i want to show warning/notification message to user if he/she click No radio button).

  16. Viswanadh
    July 3, 2020 at 12:55 PM

    Hi Rajeev,

    How to disable the Global OptionSet field on Portal Enitiy form.

    • July 3, 2020 at 2:20 PM

      You can try following option using jScript or JQuery, which would not disturb your UI :
      – Read the ‘option set’ text.
      – Create a new Textbox control object and set the ‘option set’ text.
      – Add the new TextBox control to the parent of ‘option set’ control.
      – Hide the ‘option set’.

  1. February 14, 2017 at 11:19 PM
  2. August 29, 2017 at 1:51 AM
  3. April 6, 2019 at 12:04 PM
  4. April 28, 2019 at 10:58 PM
  5. November 21, 2019 at 3:27 PM

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

%d bloggers like this: