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
ACDC
Posts: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Customising a checkbox Switch using Init Script

Post by ACDC »

Any ideas on how to customise a Checkbox switch using the attribute Init Script option.

example : increase width and background ON color
Attachments
customswitch.jpg
customswitch.jpg (4.88 KiB) Viewed 3228 times
johntalbott
Posts: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

I don't believe there is a way to do it with an Init script. Aware IM uses the Kendo mobile switch and it doesn't have a width setting.

You can do it with CSS though. Here is sample CSS you can drop into a custom CSS file as a starting point to tweak as needed.

This is going change all your switches. You'll have to add a custom CSS class if this is only needed for a specific switch.

Code: Select all

        .km-switch {
          width: 10em !important;
        }
        .km-switch-background {
          background-position: 0em 4em !important;
          width: 10em;
        }
      .km-switch-label-on {
        left: -400%;
      }
      	.km-switch-label-on,
        .km-switch-label-off {
      		white-space: nowrap;
        }
        .km-switch-label-off {
          left:25px;
        }
      
        .km-switch-label-on {
          right:20px;
        }
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: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

You'll have to add a custom CSS class if this is only needed for a specific switch
Thanks for this, I would have to create a custom CSS class, not sure how to point the Switch to the custom class as there no class setting on the Switch Can this be done in the script section. I remember doing something similar on the separator, with the help of Vladimir of course. Any ideas ?
Rennur
Posts: 1179
Joined: Thu Mar 01, 2012 5:13 am
Location: Sydney, Australia

Re: Customising a checkbox Switch using Init Script

Post by Rennur »

Try pointing the css class to the switch ID.
Go to BO > forms > open form containing switch > form properties (bottom right) > Cell ID
myswitch.png
myswitch.png (57.9 KiB) Viewed 3186 times
Then nest the custom css style within the #myswitch ID:

Code: Select all

 #myswitch  .km-switch {
          width: 10em !important;
        }
        .km-switch-background {
          background-position: 0em 4em !important;
          width: 10em;
        }
      .km-switch-label-on {
        left: -400%;
      }
      	.km-switch-label-on,
        .km-switch-label-off {
      		white-space: nowrap;
        }
        .km-switch-label-off {
          left:25px;
        }
      
        .km-switch-label-on {
          right:20px;
        }

Switch Input ID:
myswitch2.png
myswitch2.png (131.26 KiB) Viewed 3184 times
Jaymer
Posts: 2049
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Customising a checkbox Switch using Init Script

Post by Jaymer »

@Rennur. Thx, this works
@ACDC please publish your "tweaked" CSS when you modify what John provided

I have it working ALMOST 100%, but I've been stumped for at least 30 minutes on something (more later)
Screen Shot 2021-04-24 at 6.40.21 PM.png
Screen Shot 2021-04-24 at 6.40.21 PM.png (6.78 KiB) Viewed 3144 times
Here's my CSS:
Screen Shot 2021-04-24 at 6.45.16 PM.png
Screen Shot 2021-04-24 at 6.45.16 PM.png (58.43 KiB) Viewed 3144 times

Code: Select all

#myswitch #myswitch2
.km-switch_w {
    width: 6em !important;
}
.km-switch {
    width: 6em !important;
}
		
.km-switch-background {
    background-position: 0em 4em !important;
    width: 20em;
}
		
.km-switch-label-off {
   	white-space: nowrap;
	left:25px;
}
      
.km-switch-label-on {
   	white-space: nowrap;
	left: -220%;
	left: -47px;
}
		
.km-switch-on .km-switch-handle {
	background: #2ddd0c;
	margin: 0 0px 0 -15px;
	border-radius: 15px;
	box-shadow: 0 1px 0 1px currentcolor,0 -1px 0 1px currentColor;
}
		
.km-switch-off .km-switch-handle {
    background: #d71818;
	margin: 0 0px 0 0px;
	border-radius: 15px;
	box-shadow: 0 1px 0 1px currentcolor,0 -1px 0 1px currentColor;
}

Issues:
1) In Aware, using the Cell ID to "tag" your switch, you can't have duplicate Cell_IDs in the same browser window/session. So you'll see my CSS has "myswitch" and "myswitch2". If you have up 10 switches on an open form, you'll need each one to have a unique cell id.

2) Its not in the original CSS, but you also need "km-switch_w" in the css. This sets the WIDTH of the switch. Just do what I do in the CSS.

3) The Width of the switch determines the amount of x-Translate that happens when the button slides.
You see the right side of my Green button is cut off. Thats because I cannot adjust the XTranslate - its calculated either by Aware or Kendo - based on the km-switch "em" size in CSS. Make it bigger and it only has to slide further, but it keeps sliding 6px too far. I can't fix it. Will have to do for now. Someone with a fresh set of eyes can fix this and report back and I'll fix my code and edit this post.

4) Yes, I know I can get "fancier" with the CSS, by combining code and not having duplication, but its easier for me to read this way. The original had an error in it. But this is the way I like to do it for now.
Last edited by Jaymer on Wed Apr 28, 2021 2:39 pm, edited 1 time in total.
Click Here to see a collection of my tips & hacks on this forum? Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
ACDC
Posts: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

ry pointing the css class to the switch ID.
Go to BO > forms > open form containing switch > form properties (bottom right) > Cell ID
@rennur
I was interested in your concept of using the Cell ID to point the Switch attribute to its own exclusive to css, but I cannot get it to work like that. I am not sure it's possible, if it was it would be an excellent feature. Being able to uniquely style each switch would really be good. I think the only way this could work is to have its own unique css setting similar to the Separator, otherwise it becomes universal . Using the switch as an Annunciator as opposed to a basic on/off provides some good styling opportunities
@ACDC please publish your "tweaked" CSS when you modify what John provided
@Jaymer
I can't seem to achieve what I am looking for as per my example with the current css setting options. However I managed to achieve it on the Kendo (DoJo) website using the km-switch-container {width: 232px;} but there is no such css option in the latest AIM 8.6 build - I am not sure which version Kendo version is being used in 8.6.

So unless there is a way to uniquely style each switch and also have the required styling parameters for the css, this could be a waste of time
johntalbott
Posts: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

To do this for individual switches, using the cell id for a css selector as described by Rennur will work. It's what Jaymer used based on his post. There are other ways too, but to keep it simple I'd go that route.

ACDC - Can you post the link to the dojo that has the switch the way you want it?
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: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

As an aside ...

I'm hoping that with AIM9 and the updated Kendo library, AIM will be refactored to use the standard Kendo switch versus the mobile switch. It looks to be closer to what you are looking for and potentially easier to customize.

https://demos.telerik.com/kendo-ui/switch/index

Support?
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: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

o do this for individual switches, using the cell id for a css selector as described by Rennur will work. It's what Jaymer used based on his post
I am not sure about this, I would like to see Jaymers example with both switches in the ON position but colored differently. I suspect that result is coming from the CSS only. When I tried this I removed the Cell ID and the styling prevailed - I may have done something wrong, I will try again
ACDC - Can you post the link to the dojo that has the switch the way you want it?, https://demos.telerik.com/kendo-ui/switch/index
I went to the link above and made change to the container setting using the browser inspector: I hope to use the configurator custom Yes / No setting and insert the Yes = "Authorised" No= "Unauthorised"
Attachments
switch container setting.jpg
switch container setting.jpg (120.31 KiB) Viewed 3060 times
johntalbott
Posts: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

https://demos.telerik.com/kendo-ui/switch/index

I went to the link above and made change to the container setting using the browser inspector: I hope to use the configurator custom Yes / No setting and insert the Yes = "Authorised" No= "Unauthorised"
AIM doesn't used that Kendo switch widget. AIM uses the Kendo mobile switch widget. I believe that the kendo library version that is integrated with AIM didn't include a switch at the time, so the Kendo mobile switch was to be used.

I'm hoping that AIM will be updated to use the Kendo switch you found when the new version of AIM is released. See my post right above your last post ... https://www.awareim.com/forum/viewtopic ... 881#p55881
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: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

I'm hoping that AIM will be updated to use the Kendo switch you found when the new version of AIM is released.
Thanks for your input. I was under the impression the next version i.e V8.6 was going to have the latest Kendo version.
johntalbott
Posts: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

For some good news ... here is a customized Kendo mobile switch that is close to what you are looking for.

See CSS and widget configuration here ... https://dojo.telerik.com/@johntalbott/ajoMUzaD

It was trickier than expected to integrate into AIM, but here is what it looks like dropped in the CRM sample.

customswitch-small2.gif
customswitch-small2.gif (51.73 KiB) Viewed 3045 times
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: 1028
Joined: Sat Jun 30, 2007 5:03 pm

Re: Customising a checkbox Switch using Init Script

Post by ACDC »

It was trickier than expected to integrate into AIM, but here is what it looks like dropped in the CRM sample.
Brilliant, The Dojo sample is on a different Kendo version, can you share how you are getting it into AIM :D
johntalbott
Posts: 618
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Customising a checkbox Switch using Init Script

Post by johntalbott »

ACDC wrote: Tue Apr 27, 2021 3:52 pm
It was trickier than expected to integrate into AIM, but here is what it looks like dropped in the CRM sample.
Brilliant, The Dojo sample is on a different Kendo version, can you share how you are getting it into AIM :D
That's the natural next question. :-) If it were a quick answer, I would drop it here.

Give me a shout on Skype or email. [email protected]
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
hpl123
Posts: 2384
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Customising a checkbox Switch using Init Script

Post by hpl123 »

It's possible and very easy to implement custom HTML/CSS switches etc. on forms (all over really) as well if anyone wants to go that route.
Henrik (V8 Developer Ed. - Windows)
Post Reply