Archive
ADX Portals – Clear Cache On Web Page Submission
Adxstudio Portal application caches the results from Dynamics CRM to improve the performance.
But, there are times, where we need to override (invalidate) cache behavior to show latest data on Portals. Lets take a scenario
- My Portal has a ‘Contact’ web page and up on ‘Submit’, a plug-in updates all the associated ‘Cases’ in the background.
- Now, on Portal, navigate to ‘Cases’ entity list Web Page, which should show the latest ‘Cases’ data, which has been updated by plug-in in above step.
In above scenario, we will not get the latest ‘Cases’ due to Portal Cache behavior.
So what are the ‘Cache Invalidation’ options?
- Manual Cache Invalidation:
- This option is to manually hit the JavaScript bookmark-let as specified here.
- Drawback:
- Its not viable, to ask portal users to hit the URL every time they ‘Submit’ the ‘Contact’ web page
- Web Notifications:
- A Web Notification Plugin registered with the Adxstudio Portals solution in CRM is triggered on all entity create, update, delete, disassociate, associate, publish, and publish all messages and notifies the Web Notification URLs defined in the CRM to invalidate the cache so the users visiting the portal get the recent data changes
- Drawback:
- A ‘System Job’ gets created up on update of the entity, and the execution may get delayed based on the occupancy of CRM Async Service Job.
- This is not fool proof solution.
We took an approach to automate the ‘Manual Cache Invalidation’ process to fetch the latest CRM data.
Our Cache Invalidation Approach :
- Create a new ‘Web Page’ and paste below ‘Manual Cache Invalidation JavaScript’ code in ‘Custom JavaScript’ field.
- Note: You don’t need to associate any ‘Web Form’, ‘Entity List’ or ‘Entity Form’ to this Web Page.
$(document).ready(function () {
var url = document.location.protocol + ‘//’ + document.location.host + (document.location.host.indexOf(“demo.adxstudio.com”) != -1 ? document.location.pathname.split(“/”).slice(0, 3).join(“/”) : “”) + ‘/Cache.axd?Message=InvalidateAll&d=’ + (new Date()).valueOf();
var req = new XMLHttpRequest();
req.open(‘GET’, url, false);
req.send(null);
// Redirect to Portal Home Page
window.location.href = ‘../’;
});
- In below screen, I created a new Web Page ‘Portal Cache Clear’ and copied the above script.
- So, to invalidate ‘Cache’ on the ‘Submit’ of any of your Portal form, In Entity Form’s ‘On Success Settings’, Redirect to Cache ‘Web Page’ as configured in below screen.
- That’s it. Your portal should invalidate cache, up on Entity Form submission. One caveat of this approach is, ‘Portal Cache’ web page will flash for few seconds before redirecting to portal’s ‘Home’ page.
Note:
- This Information is Relevant to Legacy Adxstudio Portals Only.
- Dynamics 365 Portal Add-on’s Do Not Require this Configuration.
🙂
[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.
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
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’
- 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.
- Create a new ‘Page Template’ and map the newly created ‘Web Template’
- Create a “Web Page’ and map the ‘Entity List’ and ‘Page Template’
- That’s it. Go to Portal, clear cache and hit the ‘Web Page’ URL. You should see grid with ‘Check Box’ as first column.
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″>
</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\Dynamics Portals – Using sub grids in Entity Form
In this article, lets see how to work with ‘Sub grids’ on ‘Entity Forms’ in Portals.
Lets take a scenario to understand this better, In Dynamics:
- Create a new custom Entity named ‘Employee’
- Create a related entity ‘Child’ to capture children details of ‘Employee’
- Configure a single portal screen, to capture ‘Employee’ and ‘Children’
Below is how the ‘Employee’ entity form with ‘Children’ sub grid, in Dynamics, looks like:
High level design steps:
- Create a new ‘Entity Form’ for ‘Employee’ Dynamics form
- Create a new ‘Entity Form’ (i.e.,Child Create) for ‘Child’ entity to ‘Insert’ (i.e., Mode=Insert) record
- Create a new ‘Entity Form’ (i.e., Child Details) for ‘Child’ entity to ‘Edit’ (i.e., Mode=Edit) record
- On ‘Employee’ entity form, configure ‘Child’ ‘Sub grid’ using ‘Entity Form Metadata’
- Add ‘Create’ and ‘Details’ actions on Sub grid.
Now lets see step by step.
Create new ‘Entity Form’ Employee:
- Create a new ‘Employee Details’ Entity Form pointing to ‘Employee’ entity and ‘Information’ form.
- Now lets see how the ‘Employee’ form looks in the portal.
- If you notice, there is a grid section ‘Children’ available on Portal form, however its unusable, as there are no ‘Create’ or ‘Edit/Details’ options.
Configure ”Entity Form Metadata’:
With ‘Entity Form Metadata’, we can make sub grid usable. We can add actions (i.e.,Create/Edit/Details buttons) and to the sub grid.
- Go to ‘Employee’ form site map and click on ‘Entity Form Metadata’
- Under the ‘Type’ select ‘Subgrid’ and choose your ‘Subgrid Name’
- Next, we need to configure ‘Create’ and ‘Edit’ buttons to the sub grid.
- Under the ‘Grid Configuration’ tab, click on ‘Create’ and fill the ‘Entity Form’ (i.e.,Child Create) details
- To add, Edit/Details action click on ‘Details’ and fill the ‘Entity Form’ details
- Note: Even though, I choose ‘Details’ action, my associated ‘Entity Form’ (i.e.,Child Details) is set form mode ‘Edit’ which can be used to view and edit.
- Save the ‘Entity Form Metadata’.
Test the functionality:
- Login to your portal
- Clear the Portal Cache by navigating to “Portal URL+‘/_services/about’”
- Note: This step is optional and needed only if you don’t find your changes in portal
- Open the ‘Employee’ record and now you should see ‘Child’ grid with ‘Add new child’ button.
- Click ‘Add new child’ button and it will open up ‘Child Create’ entity form.
- Click ‘Submit’ which saves the record.
- Now either click on 1st column or ‘Details’ button to ‘Edit’ the record which opens up ‘Child Details’ Entity form.
- Modify the data, if needed and click ‘Submit’
🙂
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.
Note:
- This behavior is fixed in further versions of ADX and Dynamics Portals.
🙂
ADX/Dynamics Portals Issue – Missing Entity ‘Tab’ in ‘Web Form Step’
We have ADX portal 7.0 solution installed on our Dynamics 365 8.2 application. We got a requirement to create a Web Form steps on a Custom Entity ‘Employee’.
‘Employee’ entity has an OOB ‘Information’ of ‘Form Type’ Main, with a tab named ‘Personal Details’.
Issue:
- While adding a Web Form step, there was no ‘Personal Details’ tab and could get only ‘general’ tab.
- In the new ‘WEB FORM STEP’, select the ‘Form Name’
- In the ‘Tab Name’ drop down, there is no ‘Personal Details’ tab and all it had was ‘general’ tab.
Reason:
- As there were 2 OOB forms (i.e., Form Type ‘Main’, ‘Mobile – Express’) with the same name ‘Information’, ADX solution always picking ‘Mobile – Express‘ form which had a tab ‘general’
Fix:
- Renamed ‘Information’ Main form to ‘Employee’.
- Publish the solution
- Refresh the ‘Web Form Step’ and you should see ‘Personal Details’ tab once you select the ‘Employee’ form.
🙂
ADX/Dynamics Portals – Date field custom validation using JScript
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.
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:
- Click on the message and it will take you to the DOB control.
Refer my other article to get familiar with Portal syntax’s.
🙂
Liquid script to fetch Contact names – Dynamics Portals SaaS
In Dynamics portals (SaaS) to make CRM server calls to retrieve the data we must rely on Liquid Script.
In this article, I am going to retrieve Contacts and loop through to capture Contact ‘Full Name‘ using Liquid Script and display on a Web Template.
Liquid script to fetch Contacts:
{% fetchxml settings %}
<fetch version=”1.0″ output-format=”xml-platform” mapping=”logical” distinct=”false”>
<entity name=”contact”>
<attribute name=”fullname” />
<attribute name=”telephone1″ />
<order attribute=”fullname” descending=”false” />
</entity>
</fetch>
{% endfetchxml %}
{% assign result = settings.results.entities %}
{% for item in result %}
{% assign Names = {{item.fullname}} | append: ‘ , ‘ | append: {{Names}} %}
{% endfor %}// Set the Concatenated text to Span so that it can be read in JScript
<span id=”spanContactNames” style=”display:block”>{{Names}}</span>
Complete Web Template Source:
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />function onload() {
// Read Contact names from Span
var spanContactNames = document.getElementById(“spanContactNames”);
if (spanContactNames) {
alert(spanContactNames.innerText);
}
}</head>
<body onload=”onload()”>
<h1>**Contact Names**</h1>
{% fetchxml settings %}
<fetch version=”1.0″ output-format=”xml-platform” mapping=”logical” distinct=”false”>
<entity name=”contact”>
<attribute name=”fullname” />
<attribute name=”telephone1″ />
<order attribute=”fullname” descending=”false” />
</entity>
</fetch>
{% endfetchxml %}
{% assign result = settings.results.entities %}
{% for item in result %}
{% assign Names = {{item.fullname}} | append: ‘ , ‘ | append: {{Names}} %}
{% endfor %}
<span id=”spanContactNames” style=”display:block”>{{Names}}</span>
</body>
</html>
Note :
- ‘Liquid Script’ gets executed during the Web Page render and hence the fetched values will be available on Page ‘onload’ script event.
- ‘Liquid Script’ will respect the Portal security model (i.e., It fetches the records only if you have access granted by your Web Role)
How to test:
- Create a new Web Template and paste the content to “Source” field.
- Add a Web Link and map your Web Template.
🙂
Dynamics 365 Portals – How to configure the logo of your Portal
Once you enable “Portal Add On” in your Dynamics instance, your OOB portal would look as below with “Contoso, Ltd.” text at top left corner.
Note: I enabled ‘Customer Service’ portal solution. If you install different solution, UI will be different.
Steps to configure your desired logo on the Portal:
Add PNG/JPG file as ‘Web File’
- Log in to your Dynamics 365 instance
- Navigate to Portals -> Web Files and click ‘New’
- Provide below details on your new ‘Web File’
- Name: Can be anything. This will be referred in ‘Content Snippet’ in following steps
- Parent Page: Home
- Partial Url: Can be anything.
- Save the record
- Go to ‘Notes’ tab and add your png/jpg file as attachment.
Update content snippet with web file reference
- Navigate to Portals -> Content Snippets
- Open “Navbar Left” snippet
- In Value(HTML) field value’s ‘Source’ tag, replace content with below
<p style=”margin-left: -1px;”><img style=”top:-25px; width: 100px; height: 53px; margin-right: 1px; margin-left: 1px; float: left; position: relative;” src=”/{Webfile Name}” /></p>
- Save the file
Open/refresh the Portal and you should see your logo. You might want to logout and login if you don’t see the logo.
🙂
Dynamics Portals – How to get the configured Portal’s URL
There was a question posted in my blog on how to get the configured Portal’s URL as someone else configured the portal.
Below are the steps to get your Portal URL.
From your Dynamics 365 Instance:
- Connect to your Dynamics 365 instance
- Navigate to Portals -> Website Bindings
- Open the record and read the URL from “Site Name” field
From your Dynamics 365 Admin Center:
- Connect to your “Dynamics 365 Admin Center” (i.e., Login to Portal.office.com)
- Select your “Dynamics 365” instance
- Click on “Applications” tab
- Select “Portal Add-on” and click “MANAGE” button
- You would be redirected to “Portal” configuration page
- Copy the URL
Note: You can access your Portal configurations page, only if your Admin granted access to your login Account. If you don’t have permission, you would end up getting below error message:
You don’t have permission to perform this action. Contact your global administrator to get owner permission for Application ID
🙂
Rajeev Pentyala - Microsoft Power Platform 