Advertisements

Archive

Archive for the ‘Dynamics Portals’ Category

Dynamics Portals – Using ‘Emojis’ in Entity Form and Entity List

In this article, lets see how to use Emoji’s to capture the data in Portal’s Forms.

Emoji1

It’s very simple to achieve. All you need to do is to set the Dynamics ‘Option Set’ field’s ‘Label’ with ‘Emoji’.

Below is the ‘HOW’ part.

Create an ‘Option Set’ field with ‘Emojis’:

  • In Dynamics, create a new ‘Option Set’ Field with 2 options
  • In the Option’s ‘Label’ paste the Emoji.

Emoji2

  • Place this ‘Option Set’ field on the Dynamics Form and View which are being referred in your portal’s ‘Entity Form’ and ‘Entity List’.

Make ‘Options’ to render side by side in Portal:

  • By default, ‘Option Set’ renders as ‘Drop down’ control in Portal.
  • To show the ‘Options’ as Side by Side, add a new ‘Metadata’ to ‘Entity Form’.

Emoji7

Test the Emojis in Portal:

  • Navigate to Portal and open the ‘Employees’ view. Option Set value would renders as ‘Emoji’

Emoji5

  • Open the record and you should get ‘Emojis’ rendered side by side.

Emoji1

Note:

  • You can ‘Copy’ the Emoji from here . Search the Emoji as per your requirement and click ‘Copy’.

Emoji3

  • The rendering of Emojis will be same in ‘Dynamics Web Application’.

Emoji8

🙂 

 

 

 

Advertisements

[Code Snippet] Dynamics Portals/ADX – Set ‘Field Requirement’ using script

Below is the code snippet to set the requirement level (i.e., Required/Non-Required) of a field using script in portals. This logic handles all kind of field types including Check boxes.

Set Field As Required:

function SetFieldAsRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined && $(“#” + fieldName + “_label”) != undefined) {
$(“#” + fieldName).prop(‘required’, true);
$(“#” + fieldName).closest(“.control”).prev().addClass(“required”);

// Create new validator object
var Requiredvalidator = document.createElement(‘span’);
Requiredvalidator.style.display = “none”;
Requiredvalidator.id = fieldName + “Validator”;
Requiredvalidator.controltovalidate = fieldName;
Requiredvalidator.errormessage = “<a href=’#” + fieldName + “_label’>” + $(“#” + fieldName + “_label”).html() + ” is a required field.</a>”;
Requiredvalidator.initialvalue = “”;
Requiredvalidator.evaluationfunction = function () {
var fieldControl = $(“#” + fieldName);
if (fieldControl.is(“span”)) {
var value0 = $(“#” + fieldName + “_0”).prop(“checked”);
var value1 = $(“#” + fieldName + “_1”).prop(“checked”);
if (value0 == false && value1 == false) {
return false;
} else {
return true;
}
}
else {
var value = $(“#” + fieldName).val();
if (value == null || value == “”) {
return false;
} else {
return true;
}
}
};

// Add the new validator to the page validators array
Page_Validators.push(Requiredvalidator);
}
}

Set Field As Non Required:

function SetFieldAsNonRequired(fieldName) {
if (typeof (Page_Validators) == ‘undefined’) return;
if ($(“#” + fieldName) != undefined) {
$(“#” + fieldName).closest(“.control”).prev().removeClass(“required”);
$(“#” + fieldName).prop(‘required’, false);

for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].id == fieldName + “Validator”) {
// Remove the current field’s ‘Required’ validator from ‘Page_Validators’ array
Page_Validators.splice(i);
}
}
}
}

How to use the functions:

  • Above functions can be called from ‘Custom JavaScript’ tab of Portal’s ‘Entity Form’.
  • Pass the Dynamics field’s schema name as the parameter to both functions.
    • In below example, ’emailaddress1′ is the field name which I want to set the Requirement level.

ADXJ_1

Refer the article for Portal script syntax’s and usage.

🙂

 

Dynamics Portals – Customize OOB ‘Entity List’ grid

I was working on a Portal requirement where I had to customize the ‘Entity List’ grid by adding ‘Check Box’ control in the first column and a ‘Submit’ button, which has the custom logic.

Below is how the OOB ‘Entity List’ grid looks like

ADX-G_7

OOB ‘Entity List’ grid

Now, lets see how to customize the OOB ‘Entity List’ grid by adding additional controls (i.e., Check box and Button).

Below are the list of portal components in the order, to achieve this requirement.

  • Create a new ‘Entity List’

ADX-G_2

  • Create a new ‘Web Template’
    • In the ‘Source’, we will have logic to loop through the ‘Entity List’ records (i.e.,Rows) and add ‘Check Box’ control in the 1st column.
    • In the below image, {% entitylist id:page.adx_entitylist.id %} refers the ‘Entity List’ loaded on the current page.

ADX-G_4

  • Create a new ‘Page Template’ and map the newly created ‘Web Template’

ADX-G_6

  • Create a “Web Page’ and map the ‘Entity List’ and ‘Page Template’

ADX-G_5

  • That’s it. Go to Portal, clear cache and hit the ‘Web Page’ URL. You should see grid with ‘Check Box’ as first column.
ADX-G_1

Customized Grid

Web Template’s ‘Source’ :

<body>

 

{% entitylist id:page.adx_entitylist.id %}
{% entityview id:params.view, search:params.search, order:params.order, page:params.page, pagesize:params.pagesize, metafilter:params.mf %}
<table id=”tblContacts” class=”table table-striped”>
<thead>
<tr class=”row”>
<th class=”col-sm-1″>
&nbsp;
</th>
{% for c in entityview.columns -%}
<th width=”{{ c.width }}” data-logicalname=”{{ c.logical_name }}”>
{{ c.name }}
</th>
{% endfor -%}
<th width=”1″></th>
</tr>
</thead>
<tbody>
{% assign i = 0 %}
{% for e in entityview.records %}
<tr class=”row”>
<td class=”col-sm-1″>
<input type=”checkbox” id=”chk{{i}}” onclick=”” />
</td>
{% for c in entityview.columns %}
{% assign attr = e[c.logical_name] %}
{% assign attr_type = c.attribute_type | downcase %}
<td data-logicalname=”{{ c.logical_name }}”>
{% if attr.is_entity_reference %}
{{ attr.name }}
{% elsif attr_type == ‘datetime’ %}
{% if attr %}
<time datetime=”{{ attr | date_to_iso8601 }}”>
{{ attr }}
</time>
{% endif %}
{% elsif attr_type == ‘picklist’ %}
{{ attr.label }}
{% else %}
{{ attr }}
{% endif %}
</td>
{% endfor %}
<tr>
{% assign i = i | plus:1 %}
{% endfor %}
</tbody>
</table>
{% endentityview %}
{% endentitylist %}
</div>
</div>

</div>
</body>

🙂

ADX Portals 7.x – ‘Page_Validators’ is undefined

Other day, while adding a custom validator using JScript on an Entity Form, I was getting ‘Page_Validators’ is undefined error, at below line of code.

// Add the custom validator to Web Page’s validators array
Page_Validators.push(spouseValidator);

Reason:

  • The dynamics CRM form, associated to the ADX Entity Form, does’t have any required field, hence ‘Page_Validators’ array is NULL as ADX did’t need to load any validators.

Fix:

  • ‘Page_Validators’ is a validator collection and we dont have control over this.
  • Below workaround worked for us:
    • Make one of the field as ‘Required’ by adding ‘Entity Form Metadata’. ADX instantiates ‘Page_Validators’ array, as there is Required field now.
    • You can make the field as Non-required in the JScript.

Metadata_1

Note:

  • This behavior is fixed in further versions of ADX and Dynamics Portals.

🙂

 

 

ADX/Dynamics Portals – Date field custom validation using JScript

April 6, 2019 1 comment

Other day, In one of our Portal Web Form step, we got a requirement to validate ‘Date Of Birth’ where the value should not be  the future date.

We can achieve this by adding a custom validator using JScript and register in your ‘Web Form Step’.

Below is the JScript code snippet which you need to paste in your Web Form Step’s ‘Custom JavaScript’ control.

DOB_Validator_1

Note:

  • In below script replace the ‘new_dateofbirth’ with your field’s schema name.
  • ‘new_dateofbirth_label‘ is the label of the DOB field on your Web Form Step.

$(document).ready(function () {
try{
if (typeof (Page_Validators) == ‘undefined’) return;
// Create new DOB validator
var dobValidator = document.createElement(‘span’);
dobValidator.style.display = “none”;
dobValidator.id = “dobValidator”;
dobValidator.controltovalidate = “new_dateofbirth”;
dobValidator.errormessage = “<a href=’#new_dateofbirth_label’>Date of birth should be in past.</a>”;
dobValidator.validationGroup = “”;
dobValidator.initialvalue = “”;
dobValidator.evaluationfunction = function () {
var dobValue = $(“#new_dateofbirth”).val();
var dob=new Date(dobValue);
var today = new Date();
if (dob > today) {
return false;
}
return true;
};
// Add the dobValidator to Web Page’s validators array
Page_Validators.push(dobValidator);
// Attach event handler of the validation summary link
$(“a[href=’#new_dateofbirth_label’]”).on(“click”, function () {  scrollToAndFocus(‘new_dateofbirth_label’,’new_dateofbirth’);

});
}
catch(e)
{
alert(“Error during DOB validation  – “+e.description);
}
});

  • Save the Web Form Step and test in portal.
  • If you try to save DOB with future date. It shows warning in the banner as below:

DOB_Validator_2

  • Click on the message and it will take you to the DOB control.

Refer my other article to get familiar with Portal syntax’s.

🙂

 

 

Dynamics Portals – Display Plug-in error messages

You would have got “An unknown failure has occurred…” many times in your portal when there was exception thrown by your Dynamics CE plug-in code.

Now in Dynamics Portals, we can show the plug-in error in following portal screens by adding “Site/EnableCustomPluginError” entry in Dynamics CE Portals -> Site Settings

  • Entity list
    • Retrieval of records
  • Entity form
    • Retrieve
    • Create/Update and so on
  • Web forms
    • Retrieve
    • Create/Update and so on

Lets see the approach and steps.

  • I have created and registered a plug-in with logic to intentionally throw an exception on ‘Case’ Create.

Portal_Plugin_Error_4

  • Go to your Portal and try to create a Case and you would get below generic exception “An unknown failure…”

Portal_Plugin_Error_1

  • Now open your Dynamics CE application, navigate to Portals -> Site Settings and create a new Site Setting with Name “Site/EnableCustomPluginError” and Value true.

Portal_Plugin_Error_2

  • Go back to your Portal and try to create a Case and you would get actual Plug-in error.

Portal_Plugin_Error_3

🙂