How to use a toggle button to display true/false status

[KarMa]

Hello community,

I am working on a dashbboard where I want to use a toggle button to display a OK/NOK value with this toggle.

Already got it working that depending on the status true/false the switch toogles.

But now I want to add some colors to that. I used the CSS widget configurator to create a design for both status:

Spoiler

.slider-checkbox {
width: 70px!important;
height: 32px!important;
}

.slider-checkbox > .widget-checkbox>input {
display: none
}

.slider-checkbox > .widget-checkbox {
width: 70px!important;
height: 32px!important;
overflow: visible;
}

.slider-checkbox > .widget-checkbox>label {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FF0000;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.15);
border-radius: 16px;
box-sizing: border-box;
transition: background .2s ease-in-out;
}

.slider-checkbox > .widget-checkbox>input:checked+label {
background: #4CAF51;
}

.slider-checkbox > .widget-checkbox>label>span {
display: block;
margin: 2px;
width: calc(32px - (2 * 2px));
height: calc(32px - (2 * 2px));
position: absolute;
top: 0;
left: calc(70px - 32px);
transition: all .2s ease-in-out;
background: #ffffff;
border-radius: calc(16px - 2px);
z-index: 1;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.4);
}

.slider-checkbox > .widget-checkbox>input:not(:checked)+label > span {
background: #ffffff;
}

.slider-checkbox > .widget-checkbox>label::after,
.slider-checkbox > .widget-checkbox>label::before {
line-height: 32px;
background: none;
position: absolute;
left: 0px;
width: calc(70px / 2 - 2px)!important;
height: 32px!important;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 400 !important;
}

.slider-checkbox > .widget-checkbox>label::before {
color: #ffffff;
border: none!important;
margin: auto!important;
left: 2px;
content: "On";
}

.slider-checkbox > .widget-checkbox>label::after {
color: #aaaaaa;
left: calc(70px / 2 - 2px);
content: "Off";
}

.slider-checkbox > .widget-checkbox>input:not(:checked)+label>span {
left: 0;
}

Unfortunatly the custom class seems not apply the CSS design to the button.

I also found out that in the configurator a small hint is placed to use a checkbox field and modify it with tht CSS code. But both ways did not apply the design to the toggle or the checkbox.

May you got a hint for me how to get a solution?

XOXO,

Karma

[bchaudhary]

Hello @KarMa ,

pls check and respond whether the below given article link is useful for you:

https://www.ptc.com/en/support/article/cs324593

Kindly revert back.

Regards

Bhawna

[GabrielB · Accepted solution]

Hi @KarMa,

I am the creator of the CSS Widget Configurator. The Slider/Toggle is made from a Checkbox(The legacy one). If you go in the mashup builder and on the widgets panel go to the dropdown to show you ALL the widgets, when you search for a "checkbox" you'll see that it will show you a widget with a small yellow warning sign. That is the Legacy Checkbox widget. The CSS you have will only work on that one.

BR,

Gabriel

[bchaudhary]

Hello @KarMa ,

Kindly revert back if the given solution works for you.

Regards

Bhawna

[KarMa]

Hello @GabrielB ,

thanks for the feedback and the hints. I works like you described. Thanks for that!

What makes my curious is that we are adviced from PTC to NOT use legacy widget as they are possilby deleted in future versions.

Is there a way to use the configurator also for the actual widgets? Or is it planned to have a configurator for the actual widgets?

XOXO,

KarMa

[GabrielB]

@KarMa 

The CSS Configurator was created back when the new widgets didn't exist. I was working at PTC at the time and got fed up of styling widgets each and every project, which were lots. Yes, the legacy widgets are there, but they won't be removed any time soon, they just aren't supported at the moment for bug fixes and enhancements.

I don't work for PTC anymore, so there's no point for me to do the same thing for the new widgets. And the problem is that the shadow-dom components are hard to target with CSS. There is a guide here, but it's not nearly enough and some of the components you can't even target. Been there... done that.

The guys with which I'm working with now are also some ex PTC and we've worked long enough with TWX that we made our own widgets, with a live in-mashup configurator, better performance, more features etc. Because you can't make a production well performing app with the OOTB widgets in my opinion, at least not to our standards.

BR,

Gabriel

[VladimirRosu]

Hi @KarMa ,

I think Gabriel explained everything in his post, but I want to let you know there is a specific article explaining when the Legacy Widgets will be deprecated.

(That was one topic that we improved recently, since we know our customers invested a lot in them).

Generally speaking, regarding the topic of using the CSS Configurator, I would try first to use the standard (aka newer) widgets, and try to style them using the standard platform features.

Only if what you want can not be done with the standard widgets and styles features AND you absolutely need that feature you should go and use the CSS Configurator. Why I'm saying this? Since the CSS Configurator relies exclusively on CSS specific to the legacy widgets, when the time to upgrade comes for the platform and the legacy widgets are out (check the article for the specific date), the upgrade cost (time/$) will be significantly higher than if you would have used the standard widgets.

I have observed many situations when due to the large amount of CSS the platform upgrade takes much more time than usual.

(Note that I'm saying this while knowing that the output of the CSS Configurator is graphically awesome, so I know the choice is not always easy )