UCI-like styling of controls

(5) Share

Report

Posted on by a33ik

3,306 Most Valuable Professional

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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (5)

Answers (0)

Sort by

EricRegnier 8,720 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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!

Was this reply helpful? Yes No
Ben Thompson 1,400 on at

Like (1)

Report
Copy link

Link copied!
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="{"entityName":"account","id":"ae62f54e-085a-ea11-a811-000d3ab95873"}"><div class="hdnIcon"><span class="crmSymbolFont entity-symbol Account"></span></div><div class="hdnLinkText">Sales to go</div></div>

Was this reply helpful? Yes No
a33ik 3,306 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Ben Thompson 1,400 on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
DynamicsNinja 15 on at

Like (1)

Report
Copy link

Link copied!
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 } } } }) });

Was this reply helpful? Yes No