Any ideas on how to customise a Checkbox switch using the attribute Init Script option.
example : increase width and background ON color
Customising a checkbox Switch using Init Script
Customising a checkbox Switch using Init Script
- Attachments
-
- customswitch.jpg (4.88 KiB) Viewed 16925 times
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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.
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Customising a checkbox Switch using Init Script
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 ?You'll have to add a custom CSS class if this is only needed for a specific switch
Re: Customising a checkbox Switch using Init Script
Try pointing the css class to the switch ID.
Go to BO > forms > open form containing switch > form properties (bottom right) > Cell ID
Then nest the custom css style within the #myswitch ID:
Switch Input ID:
Go to BO > forms > open form containing switch > form properties (bottom right) > Cell ID
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:
Re: Customising a checkbox Switch using Init Script
@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) Here's my CSS:
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.
@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) Here's my CSS:
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
Jaymer
Aware Programming & Consulting - Tampa FL
Re: Customising a checkbox Switch using Init Script
@rennurry pointing the css class to the switch ID.
Go to BO > forms > open form containing switch > form properties (bottom right) > Cell ID
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
@Jaymer@ACDC please publish your "tweaked" CSS when you modify what John provided
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
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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?
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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?
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Customising a checkbox Switch using Init Script
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 againo 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 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"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
- Attachments
-
- switch container setting.jpg (120.31 KiB) Viewed 16757 times
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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.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"
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Customising a checkbox Switch using Init Script
Thanks for your input. I was under the impression the next version i.e V8.6 was going to have the latest Kendo version.I'm hoping that AIM will be updated to use the Kendo switch you found when the new version of AIM is released.
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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.
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.
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Customising a checkbox Switch using Init Script
Brilliant, The Dojo sample is on a different Kendo version, can you share how you are getting it into AIMIt was trickier than expected to integrate into AIM, but here is what it looks like dropped in the CRM sample.
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Customising a checkbox Switch using Init Script
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
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Customising a checkbox Switch using Init Script
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)