UCI-like styling of controls

[a33ik]

Hello,

I work on my controls and I really want them to be look-and-feel as a native controls in the UCI interface.

Here is what I get so far:

const textFieldStyle = (props: ITextFieldStyleProps): Partial < ITextFieldStyles > => ({
    ...(
        props.focused ? {
            fieldGroup: {
                border: "none",
                selectors: {
                    ":after": {
                        border: "none"
                    }
                }
            },
            field: {
                border: "1px solid rgb(102, 102, 102)",
                fontFamily: "SegoeUI,'Segoe UI'",
            }
        } : {
            fieldGroup: {
                border: "none",
                selectors: {
                    ":after": {
                        border: "none"
                    },
                    ":hover": {
                        border: "1px solid rgb(102, 102, 102)"
                    }
                }
            },
            field: {
                fontWeight: 600,
                fontFamily: "SegoeUI,'Segoe UI'",
                selectors: {
                    ":hover": {
                        fontWeight: 400
                    }
                }
            }
        })
});

//And then usage

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

But I don't want to reinvent the wheel so it would be great if product team can share the styling and develop some kind of styling guide. @HemantG @AnqiChen 

[EricRegnier]

Hi @a33ik, 

It is a popular customer demand and unfortunately up to now, seems like there is none. Microsoft used to have it back in the CRM 2011 and 2013 days. I would suggest to keep checking the official Microsoft sample repo on github should they add it one day. You can also raise an "issue"/inquiry/request on that github page:

https://github.com/microsoft/PowerApps-Samples

Hope this helps!

[ben-thompson]

Having spent a lot of time trying to get things right, I can fully understand why MS aren't doing it a lot of the css is being applied on the fly via Javascript and explaining that is going to be very different.

Over the past week I've managed to get Lookups to start to appear like a UCI lookup but only as far as read only mode and that took a lot of investigation and needs Javascript as you need the entity type (with a capital as its first letter).

Javascript

				storedDiv.innerHTML="";
				storedDiv.className="hdnLinkBlock";
				let er=new ERef();
				er.entityName=lookup.LogicalName;
				er.id=lookup.Id;
				var linkDiv:HTMLDivElement=document.createElement("div");
				linkDiv.classList.add("hdnLink");
				linkDiv.addEventListener("click", this.onDivClick.bind(this));
				linkDiv.setAttribute("id",  er.toString());	
				storedDiv.appendChild(linkDiv);
				var iconDiv:HTMLDivElement=document.createElement("div");

				iconDiv.className="hdnIcon";
				var iconSpan:HTMLSpanElement=document.createElement("span");
				iconSpan.classList.add("crmSymbolFont");
				iconSpan.classList.add("entity-symbol");
				iconSpan.classList.add(lookup.LogicalName.charAt(0).toUpperCase() + lookup.LogicalName.slice(1));
				iconDiv.appendChild(iconSpan);
				linkDiv.appendChild(iconDiv);
				var  itemDiv:HTMLDivElement=document.createElement("div");
				itemDiv.classList.add("hdnLinkText");
				itemDiv.innerHTML=entityTitle;
				linkDiv.appendChild(itemDiv);

And this is the css

.hdnLinkBlock{
  width: 45%;
  margin-left: auto;
}

.hdnLinkBlock:hover{
  background-color: #e2e2e2;
}

.hdnLink{
  display: inline-flex;;  
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  box-sizing: border-box;
  color: #111111;
  font-family: SegoeUI,"Segoe UI";
  font-size: 1rem;
  font-weight: 600;  
  line-height: 2rem;
  margin-right: 0;
  outline: none;

  text-overflow: ellipsis; 
}

.hdnLink:hover{
  background-color: #d9d9d9;
  cursor: pointer;
}

.hdnIcon{
  padding-left:0.5em;
  padding-right:0.5em;
  color:#1160b7;
  font-size: 16px;
}

.hdnIcon:hover{
  color:#333333;
  background-color: #e2e2e2;
}

.hdnLinkText {
  display: block;
  color:#1160b7;
}

.hdnLinkText:hover {
  color:#333333;
  background-color: #e2e2e2;
}

and this is what the final html looks like (and remember it's not perfect, just good enough for my purposes)

<div class="hdnLink" id="{&quot;entityName&quot;:&quot;account&quot;,&quot;id&quot;:&quot;ae62f54e-085a-ea11-a811-000d3ab95873&quot;}"><div class="hdnIcon"><span class="crmSymbolFont entity-symbol Account"></span></div><div class="hdnLinkText">Sales to go</div></div>

[a33ik]

@ben-thompson  as for me it's much easier to work with "TagPicker" control from "Office UI Fabric" to get "lookuperish" control - https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers 

Plain Html/CSS/JS it's a bit complicated for me.

[ben-thompson]

My concern with using Office UI Fabric is that the look and feel there is no the same as within PowerApps itself - which is a problem as when I watch usability testing changes in look and feel with a page often completely throws people.

[DynamicsNinja]

I was trying to make TextField work as it works on UCI and tired to use @a33ik's snippet for styles. The problem when I used it was that on hover text was moving left-right for a pixel.

I did a small modification on the snippet. Moved the border to the fieldGroup from field element and changed border color to white when there is no border needed. After those modifications, TextField started to act like a UCI one.

Here is the modified snippet:

const textFieldStyles = (props: ITextFieldStyleProps): Partial < ITextFieldStyles > => ({
    ...( 
        props.focused ? {
            fieldGroup: {
                border: "1px solid black !important",
                selectors: {
                    ":after": {
                        border: "none"
                    }
                }
            },
            field: {
                fontFamily: "SegoeUI,'Segoe UI'",
            }
        } : {
            fieldGroup: {
                border: "1px solid white",
                selectors: {
                    ":after": {
                        border: "none"
                    },
                    ":hover": {
                        border: "1px solid black"
                    }
                }
            },
            field: {
                fontWeight: 600,
                fontFamily: "SegoeUI,'Segoe UI'",
                selectors: {
                    ":hover": {
                        fontWeight: 400
                    }
                }
            }
        })
});