I have been working with Business Applications (and Dynamics CRM/Dynamics 365 for CE/Dataverse specifically) since the year 2008 and Dynamics CRM 4.0. When I just joined the game I was really impressed with the “UI Style Guide” documentation that was shipped as a part of SDK. This document contained detailed recommendations on how the custom UI components should look like including color schemes, font families used, and many more. Unfortunately, since that time I don’t remember seeing any kind of such document for any of the releases after 4.0 (so last 14 years).

With the introduction of the UCI (that is built using React and FluentUI) styling became much easier in the case when React/FluentUI were used to develop extensions (Html/JS WebResources or PCF Controls). Unfortunately, the OOB FluentUI components are not exactly the same as the components used in UCI. If you develop custom UI extensions and you see the difference between FluentUI and UCI – this post was written for you.

Let’s compare the default FluentUI text box with the default “UCI” text box:

Those 2 inputs are look alike but do not look the same. Let’s start by aligning the styling. You can use the following as a start point:

import { TextField } from '@fluentui/react/lib/components/TextField/TextField';
import { ITextFieldStyleProps, ITextFieldStyles } from "@fluentui/react/lib/components/TextField/TextField.types";

export const textFieldStyle = (props: ITextFieldStyleProps): Partial<ITextFieldStyles> => ({
    ...(props.disabled ? {
        fieldGroup: {
            border: "none"
        },
        field: {
            fontWeight: 600,
            color: "rgb(51, 51, 51)",
            backgroundColor: "transparent",
            ":hover": {
                backgroundColor: "rgb(226, 226, 226)"
            }
        }
    } : props.focused ? {
        fieldGroup: {
            border: "none",
            ":after": {
                border: "none"
            }
        },
        field: {
            border: "1px solid rgb(102, 102, 102)"
        }
    } : {
        fieldGroup: {
            borderColor: "transparent",
            ":after": {
                border: "none"
            },
            ":hover": {
                borderColor: "rgb(102, 102, 102)",
            }
        },
        field: {
            fontWeight: 600,
            ":hover": {
                fontWeight: 400
            }
        }
    })
});

//other code here
//...
//usage
<TextField styles={textFieldStyle}/>

Let’s take a look at what changed:

Let’s not forget about the styling of components in the “disabled” state:

And the last piece of the puzzle is displaying “—” value when the field is blank. It could be done through “placeholder” property of the “TextField” component:

<TextField styles={textFieldStyle} placeholder='---'/>

Let’s compare empty fields now:

Using these 2 styling changes you can make your custom extension look more native inside the UCI interface.

Photo by Pakata Goh on Unsplash