PCF Control hasFocus

Like (0) Share

Report

Posted on 10 Jan 2020 16:09:48 by Diana Birkelbach

3,072 Most Valuable Professional

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?

All responses (6)

Answers (1)

Verified answer

Ben Thompson 1,400 on 10 Jan 2020 at 21:13:51

Like (1)

Report
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.
Ben Thompson 1,400 on 10 Jan 2020 at 21:06:29

Like (0)

Report

Re: PCF Control hasFocus

And a quick gif showing how it looks.
Ben Thompson 1,400 on 10 Jan 2020 at 21:03:32

Like (0)

Report

Re: PCF Control hasFocus

images are attached

DownArrowTranspar...

DownArrowTranspar...
Diana Birkelbach 3,072 Most Valuable Professional on 10 Jan 2020 at 20:39:28

Like (0)

Report
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 1,400 on 10 Jan 2020 at 17:50:58

Like (0)

Report

Re: PCF Control hasFocus

I replied to this with the appropriate css, javascript and images - any idea where the post has gone?
Ben Thompson 1,400 on 10 Jan 2020 at 16:55:29

Like (0)

Report
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

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

DownArrowTranspar...

DownArrowTranspar...