Like in my first article regarding PCF (read more) advertised this Article i will show you how to design the custom Errors of your PCF Control to look like the standard MDA errors.
The following example builds on the input we designed in the mentioned first article.
Standard MDA errors
Lets take a look at a stadard MdA Error.
Like you can se we would like to add a light red box with dark red text and a little icon at the beginning.
First of all we have to create the correct HTML structure that will then be used by the CSS.
We begin with adding a label-tag for the icon in the init function.
var errorIconLabelElement = document.createElement("label");
errorIconLabelElement.innerHTML = "";
As the second step the label for the actual error message has to be created.
var errorLabelElement = document.createElement("label");
errorLabelElement.innerHTML = context.resources.getString("ErrorText_Key");
Like you can see in the second row it fetches the error message from our translation file. The error Message with the key “ErrorText_Key” will be loaded in the correct language, depending of the users display language.
The last part of the HTML structure is to wrap those two labels in a div-tag that will later become the light red box.
Like you can see in the picture at the beginning of the article, we would like to add a red border around the input and show the text in red when an error appeared. This is done with the following CSS.
Like you can see in the snippet we have a “display:none” which will by default not display the error message. To get it displayed when the error appears we us the following CSS. It is important to have this after the previous one in your CSS-File. Otherwise it might not work.
Dynamics 365 and Power Platform Developer & Solution Architect
Cookies & Privacy
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Share this ArticleLike this article? Email it to a friend!