cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted

PCF Control hasFocus

Is there a way to detect if the PCF Control has the focus (isActive)? The standard OOB Controls are rendered as labels when they are not active. In order to have the same behavior, a pcf control should know about this state.

2020-01-10 16_58_37-PCFTester_ Information_ first - Microsoft Dynamics 365.png

 
 

In the screenshot there is the same attribute: the first using a custom pcf, the second with the standard optionset control. 

How can I make my control look like the standard one, when is not edited?

1 ACCEPTED SOLUTION

Accepted Solutions
ben-thompson
Level 8

Re: PCF Control hasFocus

and finally this was the original formatted message

 

In our case we do it with 3 pieces of css (standard (no box), focused (box with down arrow) and clicked (box with down arrow and left line by the arrow) and the 3 Javascript event handlers you need to flick between the states.

 

 

.hdnComboBox { background: transparent; 
border-style: none; 
border: 1px solid #ffffff; 
box-sizing: border-box; 
color: #000000; 
font-family: 'SegoeUI', 'Segoe UI'; 
font-size: 1.0rem; 
font-weight: 600; 
height: 33px; 
padding-top:0.5em; 
width: 100%; 
padding-left: 0.5em; 
padding-right: 0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; appearance: none; 
} 

.hdnComboBoxFocused { 
background: transparent; 
border: 1px solid #a9a9a9; 
color: #000000; 
box-sizing: border-box; 
font-size: 1.0rem; 
font-weight:400; 
font-family: 'SegoeUI', 'Segoe UI'; 
height: calc(2.5rem - 2px); 
width: 100%; 
padding-left: 0.5em; 
padding-right: calc(1.6em + 1px); 
padding-top:0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none; 
background: url('../img/DownArrowTransparent.png') no-repeat right #fff; 
} 
.hdnComboBoxClicked { 
background: transparent; 
border: 1px solid #a9a9a9; 
color: #000000; 
box-sizing: border-box; 
font-size: 1.0rem; 
font-weight:400; 
font-family: 'SegoeUI', 'Segoe UI'; 
height: calc(2.5rem - 2px); 
width: 100%; 
padding-left: 0.5em; 
padding-right: calc(1.6em + 1px); 
padding-top:0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none; 
background: url('../img/DownArrowTransparent2.png') no-repeat right #fff; 
}

 

 

 

// this toggles as clicked between the two arrow images as the select options are shown

 

 

private onClick(): void { 
if (this.comboBoxControl.className="hdnComboBoxFocused"){ 
this.comboBoxControl.className = "hdnComboBoxClicked"; 
} 
else { 
this.comboBoxControl.className="hdnComboBoxFocused"; 
} 
} 

private onMouseEnter(): void {
 this.comboBoxControl.className = "hdnComboBoxFocused"; 
} 

private onMouseLeave(): void { 
this.comboBoxControl.className = "hdnComboBox"; 
}

 

 

and the event handlers (place in init after you've defined the appropriate Div) are:

 

 

this.comboBoxControl = document.createElement("select"); 
this.comboBoxControl.className = "hdnComboBox"; this.comboBoxControl.addEventListener("click",this.onClick.bind(this));
this.comboBoxControl.addEventListener("mouseenter", this.onMouseEnter.bind(this)); 
this.comboBoxControl.addEventListener("mouseleave", this.onMouseLeave.bind(this));

 

 

The images we use are also attached if you want to keep to the standard look and feel.

 

So I've still lost a bit of formatting but there is a more readable version for anyone else interested.

View solution in original post

6 REPLIES 6
ben-thompson
Level 8

Re: PCF Control hasFocus

In our case we do it with 3 pieces of css (standard (no box), focused (box with down arrow) and clicked (box with down arrow and left line by the arrow) and 3 Javascript event handlers 

 

ben-10-01-2020-17-29-41.gif

 

 

 .hdnComboBox {
            background: transparent;
            border-style: none;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            color: #000000;
            font-family: 'SegoeUI', 'Segoe UI';
            font-size: 1.0rem;
            font-weight: 600;
            height: 33px;
            padding-top:0.5em;
            width: 100%;
            padding-left: 0.5em;
            padding-right: 0.5em;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
        }
        
        .hdnComboBoxFocused {
            background: transparent;
            border: 1px solid #a9a9a9;
            color: #000000;
            box-sizing: border-box;
            font-size: 1.0rem;
            font-weight:400;
            font-family: 'SegoeUI', 'Segoe UI';
            height: calc(2.5rem - 2px);
            
            width: 100%;
            padding-left: 0.5em;
            padding-right: calc(1.6em + 1px);
            padding-top:0.5em;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
            background: url('../img/DownArrowTransparent.png') no-repeat right #fff;
        }
        
        .hdnComboBoxClicked {
            background: transparent;
            border: 1px solid #a9a9a9;
            color: #000000;
            box-sizing: border-box;
            font-size: 1.0rem;
            font-weight:400;
            font-family: 'SegoeUI', 'Segoe UI';
            height: calc(2.5rem - 2px);
            
            width: 100%;
            padding-left: 0.5em;
            padding-right: calc(1.6em + 1px);
            padding-top:0.5em;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
            background: url('../img/DownArrowTransparent2.png') no-repeat right #fff;
        }

 

 

 

and this is the javascript we use. onClick acts as a toggle as the dropdown options are displayed (if you want it to follow the current D365 logic it just needs to be set to hdnComboBoxClicked).

 

 

// this toggles as clicked between the two arrow images as the select options are shown
private onClick(): void {
    if (this.comboBoxControl.className="hdnComboBoxFocused"){
		this.comboBoxControl.className = "hdnComboBoxClicked";
		}
		else {
			this.comboBoxControl.className="hdnComboBoxFocused";
		}
    }

    private onMouseEnter(): void {
        this.comboBoxControl.className = "hdnComboBoxFocused";
    }

    private onMouseLeave(): void {
        this.comboBoxControl.className = "hdnComboBox";
    }

 

 

and the event handlers (place in init after you've defined the appropriate Div) are:

 

 

 

 this.comboBoxControl = document.createElement("select");
 this.comboBoxControl.className = "hdnComboBox";
 this.comboBoxControl.addEventListener("click",this.onClick.bind(this));
 this.comboBoxControl.addEventListener("mouseenter", this.onMouseEnter.bind(this));
 this.comboBoxControl.addEventListener("mouseleave", this.onMouseLeave.bind(this));

 

 

 

The images we use are also attached if you want to keep to the standard look and feel.

ben-thompson
Level 8

Re: PCF Control hasFocus

I replied to this with the appropriate css, javascript and images - any idea where the post has gone?

Re: PCF Control hasFocus

Hi @ben-thompson

 

I have no idea what happened, but I've got an E-Mail notification with the following content:

In our case we do it with 3 pieces of css (standard (no box), focused (box with down arrow) and clicked (box with down arrow and left line by the arrow) and 3 Javascript event handlers 

 

.hdnComboBox { background: transparent; border-style: none; border: 1px solid #ffffff; box-sizing: border-box; color: #000000; font-family: 'SegoeUI', 'Segoe UI'; font-size: 1.0rem; font-weight: 600; height: 33px; padding-top:0.5em; width: 100%; padding-left: 0.5em; padding-right: 0.5em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .hdnComboBoxFocused { background: transparent; border: 1px solid #a9a9a9; color: #000000; box-sizing: border-box; font-size: 1.0rem; font-weight:400; font-family: 'SegoeUI', 'Segoe UI'; height: calc(2.5rem - 2px); width: 100%; padding-left: 0.5em; padding-right: calc(1.6em + 1px); padding-top:0.5em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background: url('../img/DownArrowTransparent.png') no-repeat right #fff; } .hdnComboBoxClicked { background: transparent; border: 1px solid #a9a9a9; color: #000000; box-sizing: border-box; font-size: 1.0rem; font-weight:400; font-family: 'SegoeUI', 'Segoe UI'; height: calc(2.5rem - 2px); width: 100%; padding-left: 0.5em; padding-right: calc(1.6em + 1px); padding-top:0.5em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background: url('../img/DownArrowTransparent2.png') no-repeat right #fff; }
 

// this toggles as clicked between the two arrow images as the select options are shown private onClick(): void { if (this.comboBoxControl.className="hdnComboBoxFocused"){ this.comboBoxControl.className = "hdnComboBoxClicked"; } else { this.comboBoxControl.className="hdnComboBoxFocused"; } } private onMouseEnter(): void { this.comboBoxControl.className = "hdnComboBoxFocused"; } private onMouseLeave(): void { this.comboBoxControl.className = "hdnComboBox"; }
and the event handlers (place in init after you've defined the appropriate Div) are:

 

this.comboBoxControl = document.createElement("select"); this.comboBoxControl.className = "hdnComboBox"; this.comboBoxControl.addEventListener("click",this.onClick.bind(this)); this.comboBoxControl.addEventListener("mouseenter", this.onMouseEnter.bind(this)); this.comboBoxControl.addEventListener("mouseleave", this.onMouseLeave.bind(this));
 

The images we use are also attached if you want to keep to the standard look and feel.

Unfortunately it's not formatted, and the images are missing, but I've got the Idea.

Thanks a lot 😊

 

Best regards,

Diana

ben-thompson
Level 8

Re: PCF Control hasFocus

images are attached

ben-thompson
Level 8

Re: PCF Control hasFocus

And a quick gif showing how it looks.

ben-10-01-2020-17-29-41.gif

ben-thompson
Level 8

Re: PCF Control hasFocus

and finally this was the original formatted message

 

In our case we do it with 3 pieces of css (standard (no box), focused (box with down arrow) and clicked (box with down arrow and left line by the arrow) and the 3 Javascript event handlers you need to flick between the states.

 

 

.hdnComboBox { background: transparent; 
border-style: none; 
border: 1px solid #ffffff; 
box-sizing: border-box; 
color: #000000; 
font-family: 'SegoeUI', 'Segoe UI'; 
font-size: 1.0rem; 
font-weight: 600; 
height: 33px; 
padding-top:0.5em; 
width: 100%; 
padding-left: 0.5em; 
padding-right: 0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; appearance: none; 
} 

.hdnComboBoxFocused { 
background: transparent; 
border: 1px solid #a9a9a9; 
color: #000000; 
box-sizing: border-box; 
font-size: 1.0rem; 
font-weight:400; 
font-family: 'SegoeUI', 'Segoe UI'; 
height: calc(2.5rem - 2px); 
width: 100%; 
padding-left: 0.5em; 
padding-right: calc(1.6em + 1px); 
padding-top:0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none; 
background: url('../img/DownArrowTransparent.png') no-repeat right #fff; 
} 
.hdnComboBoxClicked { 
background: transparent; 
border: 1px solid #a9a9a9; 
color: #000000; 
box-sizing: border-box; 
font-size: 1.0rem; 
font-weight:400; 
font-family: 'SegoeUI', 'Segoe UI'; 
height: calc(2.5rem - 2px); 
width: 100%; 
padding-left: 0.5em; 
padding-right: calc(1.6em + 1px); 
padding-top:0.5em; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none; 
background: url('../img/DownArrowTransparent2.png') no-repeat right #fff; 
}

 

 

 

// this toggles as clicked between the two arrow images as the select options are shown

 

 

private onClick(): void { 
if (this.comboBoxControl.className="hdnComboBoxFocused"){ 
this.comboBoxControl.className = "hdnComboBoxClicked"; 
} 
else { 
this.comboBoxControl.className="hdnComboBoxFocused"; 
} 
} 

private onMouseEnter(): void {
 this.comboBoxControl.className = "hdnComboBoxFocused"; 
} 

private onMouseLeave(): void { 
this.comboBoxControl.className = "hdnComboBox"; 
}

 

 

and the event handlers (place in init after you've defined the appropriate Div) are:

 

 

this.comboBoxControl = document.createElement("select"); 
this.comboBoxControl.className = "hdnComboBox"; this.comboBoxControl.addEventListener("click",this.onClick.bind(this));
this.comboBoxControl.addEventListener("mouseenter", this.onMouseEnter.bind(this)); 
this.comboBoxControl.addEventListener("mouseleave", this.onMouseLeave.bind(this));

 

 

The images we use are also attached if you want to keep to the standard look and feel.

 

So I've still lost a bit of formatting but there is a more readable version for anyone else interested.

View solution in original post

Helpful resources

Announcements
New Ranks and Rank Icons in April

'New Ranks and Rank Icons in April

Read the announcement for more information!

Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Users online (9,346)