DEV Community: Benedikt Bergmann

PCF – Designing Errors like standard MdA Errors

Benedikt Bergmann — Sun, 12 Jan 2020 16:52:31 +0000

Visit my blog for the original post: PCF – Designing Errors like standard MdA Errors

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.

Standard 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.

HTML structure

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 = "";
errorIconLabelElement.classList.add("icon");

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.

this._errorContainer = document.createElement("div");
this._errorContainer.classList.add("Error");
this._errorContainer.appendChild(errorIconLabelElement);
this._errorContainer.appendChild(errorLabelElement);

TypeScript

To get the CSS working we have to dynamically add some CSS-classes to the input and the errorContainer when a error occures.

I usually do this in the “inputOnChange”-Function. Depending on whether the error occurred or disappeared we have to add or remove the classes.

The following code will add the css-classes and should be used when the error appeared.

this._inputElement.classList.add("incorrect");
this._errorContainer.classList.add("inputError");

If the error disappears the classes can be removed like this

this._inputElement.classList.remove("incorrect");
this._errorContainer.classList.remove("inputError");

CSS

Now we are coming to the actual design.

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.

.BeBeControls input.incorrect {
    color: red;
    font-weight: bold;
}
.BeBeControls input.incorrect:hover {
    border: 2px solid red;
}

To get the light red box, correct spacing and alignment we apply this to the errorContainer

.BeBeControls div.Error{
    background-color: rgba(191, 9, 0, 0.075);
    padding: 0.5rem;
    display: inline-flex;
    word-break: normal;
    white-space: normal;
    font-family: 'SegoeUI-Semibold', 'Segoe UI Semibold', 'Segoe UI Regular', 'Segoe UI';
    display:none;
}

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.

.BeBeControls div.Error.inputError{
    display: inline-flex;
}

As the penultimate we have to design the Label

.BeBeControls div.Error label{
    line-height: 2rem;
    color: rgb(191, 9, 0);
    font-weight: 600;
    font-size: 1rem;
}

The last part is to apply the CSS to get the little icon work

.BeBeControls .icon{
    font-family: "Dyn CRM Symbol", "Segoe MDL2 Assets";
    margin-right: 10px;
}

Summary

Here is how it will look like in action.

Custom Error

Like you see it is quite easy to design the custom errors like the standard MdA once. If you have the correct CSS.

PCF - CSS for Model-driven Apps (MdA)

Benedikt Bergmann — Sun, 05 Jan 2020 09:21:47 +0000

Visit my blog for the original post: PCF - CSS for Model-driven Apps (MdA)

In my first post of 2020 i would like to talk about "Power Apps component framework" (PCF).

I will not write another article about how to create your first PCF Control. There are some good article out there already covering this topic . For example: the Microsoft Docs, from Todd Baginski or the series of Articles regarding PCF from Allan De Castro (Episode 1 & Episode 4).

This article will focus on what i learned regarding CSS while creating my first PCF Controls (learn more about them).

What is a PCF Control?

Microsoft does describe the "Power Apps component framework" (PCF) as follows:

Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps (experimental preview) to provide enhanced user experience for the users to work with data on forms, views, and dashboards.

Like written above it gives the possibility to extend the functionality of an Model-driven or canvas app. With PCF we can bundle those functions in own Controls. Because of this it is possible to deployed and used them in every environment, without knowledge of meta data such as field name. There is no longer the need to recreate functionalities we need in every project via JavaScript.

CSS for Model-driven Apps (MdA)

Because of the structure of the CSS of Model-driven Apps the Control will not automatically inherit the correct style. That means, that you have to style your Component manually. I will explain it on the example of a Control for a "Text.Singeline"-Field.

HTML Structure

First of all we have to define the correct HTML structure. In the case of our example this will be rather easy.

The HTML Structure will be created in the "init"-function of your control.

I usually start by creating an own "container"-Div. There is already a "container"-Div passed to our init function. But i like to add my own, since i then can decide the CSS-classes and my CSS will not be affected if Microsoft changes something in the structure of this standard "container"-Div.

this._container = document.createElement("div");

Then i create the needed input and add the needed elements (like type, css-classes or event listner)

this._inputElement = document.createElement("input");
this._inputElement.setAttribute("type", "text");
this._inputElement.addEventListener("change", this._inputElementOnChange);

The last step is to combine those two and add them to the DOM of your Control.

this._container.appendChild(this._inputElement);
container.appendChild(this._container);

Different approaches to get the same Style

There are two ways of getting the same style as the standard.

You use the same CSS classes as the Model-driven App
You copy/resemble the CSS of the standard classes

Both have there pros and cons. I usually choose the second option. When we look at the CSS-class list of an element you will see that there are a lot of them:

CSS classes of an Input.

On the image i don't even show all classes of a standard Text.SingeLine field.

If we then look at the actual CSS behind those classes, we do see that every class has only one row if CSS.

CSS behind the classes.

For me that is very confusing. That is one reason why i copy the CSS. The other reason is that i like to be independent of changes Microsoft does. The reason for that is, that i might not be able to update my PCF Controls in time. With copying the CSS they still work after a change of Microsoft.

CSS

So if you decide on going for the second option as well i have already resembled the CSS that Microsoft uses for Inputs in Model-driven Apps, as of today.

If you copy the code below and change the first class to the namespace of your control it will look like a standard input.

.BeBeControls div {
    width: 100%;
}

.BeBeControls input{
    width: 100%;
    float:none;
    outline: none !important;
    line-height: 2.5rem;
    height: 2.5rem;
    border: 1px solid transparent;
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.BeBeControls input:hover, .BeBeControls input:focus{
    border-color:rgb(102, 102, 102);
}

What comes next?

In the posts that will follow i will, among other things, talk about the following topics regarding PCF Controls:

How to display custom errors like the standard errors in Model-driven Apps
How to handle "Field Security". Like read-only or masked fields. Including the correct CSS.
How to handle empty values
How to create a control with an icon on the side (see screenshot below) Input with icon.

Thank you for reading!!
Make sure to step by my blog for more interesting posts. benediktbergmann.eu