Blog, Development

Applying UCI Styling to a FluentUI TextField component

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

4 Comments

  1. Hi Andrew, I am feeling so happy because I was struggling to find this over google and finally reach here. Could you please help me with GITHUB link for this and also wondering if you have done same styling for other components of FluentUI like dropwdown box etc?

    1. Hello Lalit,
      I didn’t put the sourcecode on GitHub so this post is the source of truth for your development.
      I have in plan posts that describe the styling of other controls but, unfortunately, I have no time now to work on it.
      Thanks,
      Andrew

      1. Hello Andrew,

        Thanks for your response. Do you have good community for Fluent UI React so that in case I need some help?
        Wondering if you are on Discord or you have your own Discord Channel?

        Regards,
        Lalit

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.