Expand my Community achievements bar.

SOLVED

Inserting class into div based on dialog input

Avatar

Level 5

I'm trying to insert one of three possible class names, which are available in the dialog select called "Theme". The three values are "theme-light, theme-neutral, and theme-dark". Here's what I have for the dialog (content.xml):

                                    <theme
                                        jcr:primaryType="cq:WidgetCollection"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                        defaultValue="theme-light"
                                        fieldDescription="Select the component theme."
                                        fieldLabel="Select theme"
                                        name="./theme"
                                        emptyText="Select a theme">
                                        <items jcr:primaryType="nt:unstructured">
                                            <light
                                                jcr:primaryType="nt:unstructured"
                                                text="Light theme"
                                                value="theme-light"/>
                                            <neutral
                                                jcr:primaryType="nt:unstructured"
                                                text="Neutral theme"
                                                value="theme-neutral"/>
                                            <dark
                                                jcr:primaryType="nt:unstructured"
                                                text="Dark theme"
                                                value="theme-dark"/>
                                        </items>

Here's what I have for the HTML:

<div class="container ${theme.value}"

When I view the page, the class is blank. What am I missing? 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 5

I discovered I had the HTL wrong and have corrected it to this:

<div class="container ${properties.theme}"

View solution in original post

1 Reply

Avatar

Correct answer by
Level 5

I discovered I had the HTL wrong and have corrected it to this:

<div class="container ${properties.theme}"