Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

Coral 3 ui Switch on/off text not working

Avatar

Level 2

Hi,

In AEM 6.4 Switch field doesn't show the on/off text even if provided, whereas in AEM6.1 it's working fine.  In adobe documentation also on/off text properties are available. Still not working, any suggestion would be helpful.

Coral doc: Documentation | CoralUI

Adobe doc: Switch — Granite UI 1.0 documentation

Screen Shot 2019-07-24 at 1.06.41 PM.png

AEM 6.4

Screen Shot 2019-07-24 at 12.57.09 PM.png

AEM 6.1

Screen Shot 2019-07-24 at 1.06.00 PM.png

Thanks,

Velu

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

It is not working because of a code issue.

There is no code written to show on/off text.

you can simply overlay switch resource type and add below code in switch.jsp in line 234

/apps/granite/ui/components/coral/foundation/form/switch/switch.jsp

<span class="coral3-Switch"><%= offText %></span>

<coral-switch <%= attrs.build() %>></coral-switch>

<span class="coral3-Switch"><%= onText %></span>

Could you please raise a daycare ticket as well to fix it from adobe side?



Arun Patidar

View solution in original post

5 Replies

Avatar

Employee Advisor

Have you tried "labelledBy"

Reference to a space delimited set of ids for the HTML elements that provide a label for the formField. Implementers should override this method to ensure that the appropriate descendant elements are labelled using the aria-labelledby attribute. This will ensure that the component is properly identified for accessibility purposes. It reflects the aria-labelledby attribute to the DOM.

Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

Avatar

Level 3

Hi Velu,

Please try using textOff & textOn instead of offText & onText.

This should work, we are using switch and its working fine.

Thanks,

Vipin

Avatar

Correct answer by
Community Advisor

Hi,

It is not working because of a code issue.

There is no code written to show on/off text.

you can simply overlay switch resource type and add below code in switch.jsp in line 234

/apps/granite/ui/components/coral/foundation/form/switch/switch.jsp

<span class="coral3-Switch"><%= offText %></span>

<coral-switch <%= attrs.build() %>></coral-switch>

<span class="coral3-Switch"><%= onText %></span>

Could you please raise a daycare ticket as well to fix it from adobe side?



Arun Patidar

Avatar

Level 3

Yes as arun mentioned you will need to add those attributes.

Avatar

Level 2

Thank You Guys!

Yes Arun you are right.  Even i don't see the properties listed in the jsp file.  So we can consider that they have removed these properties in coral3.

Regards,

Velmurugan