Advertisements
Home > ADX > Useful JScript syntax’s – ADX Portal

Useful JScript syntax’s – ADX Portal

CRM form script’s (i.e., Onload, OnSave, OnChange) won’t run on ADX 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();

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 %}

});

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.

🙂

Advertisements
Categories: ADX Tags: ,
  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

  1. February 14, 2017 at 11:19 PM
  2. August 29, 2017 at 1:51 AM
  3. April 6, 2019 at 12:04 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: