Archive
Dynamics Portals Styling – Design Forms with rich text and images
Its pretty common requirement in Portals to design the forms with rich text along with images.
One option to achieve this is by adding ‘Web Resources’ with HTML content to Dynamics forms. The downside of using ‘Web Resource’ is that it adds a white space towards the end.
In this article, lets see how we can achieve the styling by leveraging ‘Metadata’.
The Portal Metadata is flexible enough to hold the HTML content. All you need to do is, create a new Metadata for a Section and set the ‘Label’ field with HTML content.
Lets design a simple ‘Registration’ portal form with Logo and Content.
Steps to create a Portal Form:
For this scenario, I am using ‘Contact’ entity and created a new Form by name ‘Registration Form’.
- Open the CRM customization Form and open the ‘Section’, make sure below property is set.
- If this property is unchecked, HTML metadata content, which we are designing in next steps will not be shown on Portal form.
- Save and Publish the CRM form.
- Create a new ‘Entity Form’ and map the ‘Entity Name’ and ‘Form Name’.
- Create a new ‘Web Page’ and map the ‘Entity Form’
- Now, if you browse the ‘Entity Form’ in Portal, it comes as below.
Design the Form with Logo and Content:
Lets beautify this form by adding Logo and Rich text.
- To configure the Logo, first, create a new ‘WEB FILE’ record.
- Note down the ‘Partial Url’. You need to refer the exact value in your HTML.
- Under the ‘Notes’ section of the ‘WEB FILE’, create a new Note and upload the image as an attachment.
- Now lets design the HTML content.
- Open a HTML file using any of the text editor.
- Prepare HTML content as per your requirement
- Once the HTML design completed, open the Portal ‘Entity Form’ which we created in previous section and add a new ‘Entity Form Metadata’ record.
- Set Type as ‘Section’ and in the ‘Label’, paste the HTML content.
- Refresh you Portal screen and you should see the changes.
Note:
- HTML content added to ‘Metadata’ can be moved easily to other environments using Portal Record Movers
🙂
HTML & JScript – Read and Encode file
We got a requirement in ADX portal, to read and convert the file content to Base64String , which eventually will be submitted to an external API.
Below is the code snippet to read the File content, browsed using the HTML ‘File Upload’ control:
function readFileAsText(){
try {
// Read the browsed file from ‘File Upload’ control.
var fileToLoad = document.getElementById(“fileOE“).files[0];var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
// Set the file content to variable
var textFromFileLoaded = fileLoadedEvent.target.result;
alert(“File Content – ” + textFromFileLoaded);// Using ‘window.btoa’ encode the plain text to Base 64
var convertedString = window.btoa(unescape(encodeURIComponent(textFromFileLoaded)));
alert(“Base 64 content – ” + convertedString);
};fileReader.readAsText(fileToLoad, “UTF-8”);
} catch (e) {
alert(“Error in readFileAsText(); Error – ” + e.description);
}
}<body>
<label for=”fileOE”>Pick the file </label><br>
<input type=”file” id=”fileOE” />
<input type=”button” value=”Upload” onclick=”readFileAsText()” />
</body>
- Execute the code and you will get output as below
File content as text
Encoded File Content (Base 64)
🙂
Network Error while accessing external service from CRM web resource
We had a requirement to fetch and display data from external hosted service, on a HTML web resource hosted in CRM.
So I created a HTML file with below logic to fetch data from external hosted service.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(‘POST’, {External Service URL}, false);xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
// Success
}
}
}
The logic was working fine, when I tested individual HTML fine.
But when hosted in CRM, I was getting “Network Error”.
Reason :
- Cross domain issue while accessing HTML from CRM
Fix :
- Setting “Access data sources across domains” to “true” in IE browser solved the issue
Access data sources across domains
🙂
Rajeev Pentyala - Microsoft Power Platform 