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.
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";
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.
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%;
}