Customising a checkbox Switch using Init Script

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

Here's an end to end solution walkthrough. NOTE: It assumes there isn't a need to have two different switch styles within a single separator.

customswitch-small3.gif
customswitch-small3.gif (68.51 KiB) Viewed 7044 times


Changing labels
To change the labels, I had to use the Form Init script. The form cell or attribute Init Scripts would not work.

I set the Cell Id to "AuthorisedSwitch" so I could find it in the array of widgets available in the Init Script. See Form Init Script code below.

authorisedswitchcellid.png
authorisedswitchcellid.png (237.33 KiB) Viewed 7044 times
Form Init Script

Code: Select all

        let AuthorisedSwitchConfig = widgets.filter(widget => widget.type === "mobileSwitch" && widget.id === "AuthorisedSwitch")[0].config;
        AuthorisedSwitchConfig.onLabel = "Authorised";
        AuthorisedSwitchConfig.offLabel = "Unauthorised";
Isolating the custom CSS to the specific switch

I did have trouble using the Cell Id containing the switch for one specific CSS configurations, so I had to find another way to narrow the specificity of the CSS.

So I added a CSS class "system-access" to the System Access separator used in the form. Because the switch we care about is inside the separator, this class can be used as a selector in the CSS. See CSS code below.

NOTE: If the switch is the only switch on the form, assigning a CSS class to the form and then referencing that class name in the CSS would do the trick. No separator needed.

separatorcss.png
separatorcss.png (225.41 KiB) Viewed 7044 times

Code: Select all

.system-access .k-switch,
.system-access .k-switch-wrapper,
.system-access .k-switch-container {
	border: none !important;
}

.system-access .k-switch-wrapper,
.system-access .k-switch-container {
	border-radius: 15px;
}

.system-access .k-switch-handle {
	border-radius: 50%;
	height       : 90%;
	margin-top   : 1.5px;
}

.system-access .k-switch-off .k-switch-handle {
	margin-left: 2px;
}
    
.system-access .k-switch-on .k-switch-handle {
	color: #B7DA4A !important;
	/* left: 20px;
	margin-right: 0px !important; */
}
    
.system-access .km-switch {
	width    : 130px;
}

.system-access .k-switch-off .km-switch-background {
	left: -150%;
}

.system-access .km-switch-background {
	background-image: none;
	background-color: #B7DA4A !important;
}

.system-access .k-switch-handle>span {
	width         : 10.6em;
	text-transform: none;
}

.system-access .km-switch-label-on {
	left: -600%;
}

.system-access .km-switch-label-off {
	left: -35%;
}
Last edited by johntalbott on Wed Apr 28, 2021 11:25 pm, edited 1 time in total.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Rennur
Posts: 1191
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Re: Customising a checkbox Switch using Init Script

Post by Rennur »

Here is my custom switch for specific Cell ID myswitch1. Note that Aware IM creates another ID myswitch1_w by appending _w to the ID (see code):
Authorised / Unauthorised labels are set from the Config tool switch form properties.
custom_switch_kendo.gif
custom_switch_kendo.gif (106.32 KiB) Viewed 7039 times
swtich_form_props.png
swtich_form_props.png (49.44 KiB) Viewed 7035 times
Custom CSS file placed in C:\AwareIM\Tomcat\webapps\AwareIM\Custom\CSS\:

Code: Select all

/* Adds a pointer cursor globally */
.km-switch {
    cursor: pointer;
}

/* Size of the switch widget (global setting) */
.km-widget {
    font-size: 1.2em !important; /* default is 1em */
}

/* Switch ID specific styling - note that Aware IM appends _w to the end of your ID */
/* Width of the switch widget */

/* === HAS ISSUES = still sets width of all switches ==== */ 
#myswitch1_w .km-switch, .k-switch {
	width: 17.1rem !important; /* 11.1em for Yes/No - 17.1em for Authorised/Unauthorised */
	background-color: #bababa !important; 
	cursor: pointer;
}

#myswitch1_w .km-switch-label-off > .km-switch-background, .km-switch-handle {
    color: #bababa !important; 
}

#myswitch1_w .km-switch-label-on > .km-switch-background, .km-switch-handle {
    color: #bababa !important; 
}

#myswitch1_w .km-switch-label-off .km-switch-background {
    background-image: none !important;
}

#myswitch1_w .km-switch-label-on .km-switch-background {
    background-image: none !important;
}

#myswitch1_w .km-switch-label-off .km-switch-background {
    background-image: none,-webkit-gradient(linear,left top,left bottom,from(#c74444),to(#c74444)) !important;
    background-image: none,-webkit-linear-gradient(top,#c74444,#c74444) !important;
}
 
#myswitch1_w .km-switch-label-on .km-switch-background {
    background-image: none,-webkit-gradient(linear,left top,left bottom,from(#118f4e),to(#118f4e)) !important;
    background-image: none,-webkit-linear-gradient(top,#118f4e,#118f4e) !important;
}

/* Switch on/off wording from the config tool */
#myswitch1_w .km-switch-label-off {
	width: 137px !important; /* 78px for Yes/No - 137px for Authorised/Unauthorised*/
    background-color: #c74444 !important; 
    left: -140px !important; /* -80px for wording: Yes/No, ON/OFF OR -140px for Authorised/Unauthorised */
}

#myswitch1_w .km-switch-label-on {
    width: 137px !important; /* 78px for wording: Yes/No, ON/OFF OR 137px for Authorised/Unauthorised*/
    background-color: #118f4e !important; 
    left: 28px !important;
}
Last edited by Rennur on Thu Apr 29, 2021 4:46 am, edited 4 times in total.
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

Ha. I wondered if there was a way to change the yes/no string in newer config tool version. :-) I'm using 8.4 which doesn't appear to have that option.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
ACDC
Posts: 1138
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

Isolating the custom CSS to the specific switch
Using the separator CSS setting and having the switch reside inside an invisible separator is a neat trick

BUT the Cell ID that Rennur explained in depth and the use of the _w part of the css to make it exclusive, seems to be the way to go. I totally missed that in Jaymers example. Anyway I definitely learnt something here, a big thanks to all for your input (BTW where in the hell did the _w use/concept originate, this opens up all sorts of custom opportunities ? )
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

The CellID is the id of the HTML input element that will contain the value of the attribute.

CellID_w is assigned to the root element of the Kendo widget that is created. I'm guessing the "_w" stands for "widget".

CellID2.png
CellID2.png (103.24 KiB) Viewed 6829 times

I originally used AuthorizedSwitch_w to wrap each selector in the CSS file. It worked except that the CSS code below was breaking a "translatex" value that Kendo applies to the widget style attribute when the switch is turned on. The switch would only move "half way" to the right. There are a couple of posts on stackoverflow where others have ran into similar issues. That's what led to my work around.

If I removed #AuthorizedSwitch_w (or swapped out for a higher level selector) it worked as expected.

Code: Select all

#AuthorizedSwitch_w.km-switch {
	width    : 130px;
}
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

@Rennur - after re-reading your CSS code, I believe you are not seeing the issue I'm referring to because .km-switch is not wrapped by #myswitch1_w.

#myswitch1_w.km-checkbox - doesn't reference anything that I can tell. .km-checkbox is not used with a Kendo switch.

The only selector being used is .km-switch. #myswitch1_w isn't coming into play due to the ",".

Can you drop another switch on your form and see if also picks up the width of 17.1rem?
Rennur wrote: Wed Apr 28, 2021 2:01 am

Code: Select all

/* Switch ID specific styling - note that Aware IM appends _w to the end of your ID */
/* Width of the switch widget */
#myswitch1_w .km-checkbox, .km-switch {
	width: 17.1rem !important; /* 11.1em for Yes/No - 17.1em for Authorised/Unauthorised */
	background-color: #bababa !important; 
	cursor: pointer;
}
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Rennur
Posts: 1191
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Re: Customising a checkbox Switch using Init Script

Post by Rennur »

johntalbott wrote: Wed Apr 28, 2021 11:56 pm @Rennur - after re-reading your CSS code, I believe you are not seeing the issue I'm referring to because .km-switch is not wrapped by #myswitch1_w.

#myswitch1_w.km-checkbox - doesn't reference anything that I can tell. .km-checkbox is not used with a Kendo switch.

The only selector being used is .km-switch. #myswitch1_w isn't coming into play due to the ",".

Can you drop another switch on your form and see if also picks up the width of 17.1rem?
Yes thanks John, you are correct. All switches are resized.
The 'handle' css needs to be styled as well - beyond my css capability.
myswitch_error.png
myswitch_error.png (23.12 KiB) Viewed 6808 times
Last edited by Rennur on Thu Apr 29, 2021 5:30 am, edited 5 times in total.
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

This has turned into a personal Rubiks cube. This dojo demonstrates the problem I described.

https://dojo.telerik.com/@johntalbott/iJicefiT

This is the CSS in question ...

Code: Select all

/*THIS WORKS*/    
/*.switch2-container > .k-switch {
	width    : 130px;
}*/
 
/*THIS DOES NOT WORK*/    
#switch2_w.k-switch {
	width    : 130px;
}

@Rennur or anyone else ... do you see why the version using the #switch2_w isn't working?
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Post Reply