cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
DianaBirkelbach
Super User
Super User

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

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

View solution in original post

6 REPLIES 6
ben-thompson
Solution Sage
Solution Sage

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
ben-thompson
Solution Sage
Solution Sage

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

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

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

images are attached

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

And a quick gif showing how it looks.

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

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

View solution in original post

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (34,017)