Skip to content

Commit 357ffb7

Browse files
Armaan Guptaci-build
authored andcommitted
added the fieldset and legend for the radiobutton
1 parent aa10a23 commit 357ffb7

File tree

7 files changed

+158
-1
lines changed

7 files changed

+158
-1
lines changed

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/radiobutton/.content.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
jcr:primaryType="cq:Component"
44
jcr:title="Adaptive Form Radio Button"
55
jcr:description="Add two or more radio buttons for users to select one of the available options."
6-
sling:resourceSuperType="core/fd/components/form/radiobutton/v1/radiobutton"
6+
sling:resourceSuperType="core/fd/components/form/radiobutton/v2/radiobutton"
77
componentGroup="Core Components Examples - Adaptive Form"/>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template data-sly-template.legend="${@ componentId, labelValue, labelVisible, labelRichText, bemBlock}">
2+
<span class="${bemBlock}__label"
3+
data-sly-test="${labelValue && (labelVisible == null || labelVisible == true)}"
4+
data-richtext="${labelRichText}">
5+
${labelValue @ context = labelRichText ? 'html' : 'text'}
6+
</span>
7+
</template>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3+
~ Copyright 2022 Adobe
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
17+
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
18+
jcr:primaryType="nt:unstructured">
19+
</jcr:root>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
3+
cq:icon="target"
4+
jcr:description="Add two or more radio buttons for users to select one of the available options."
5+
jcr:primaryType="cq:Component"
6+
jcr:title="Adaptive Form Radio Button (v2)"
7+
sling:resourceSuperType="core/fd/components/form/radiobutton/v1/radiobutton"
8+
componentGroup=".core-adaptiveform"/>
9+
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2+
~ Copyright 2025 Adobe
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
16+
<sly data-sly-use.renderer="${'radiobutton.js'}"
17+
data-sly-use.widget="widget.html"
18+
data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
19+
data-sly-use.label="${renderer.labelPath}"
20+
data-sly-use.legend="${renderer.legendPath}"
21+
data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
22+
data-sly-use.longDescription="${renderer.longDescriptionPath}"
23+
data-sly-use.errorMessage="${renderer.errorMessagePath}"
24+
data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
25+
26+
<fieldset class="cmp-adaptiveform-radiobutton cmp-adaptiveform-radiobutton--v2"
27+
data-cmp-is="adaptiveFormRadioButton"
28+
id="${radiobutton.id}"
29+
data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
30+
data-sly-use.radiobutton="com.adobe.cq.forms.core.components.models.form.RadioButton"
31+
data-cmp-visible="${radioButton.visible ? 'true' : 'false'}"
32+
data-cmp-enabled="${radioButton.enabled ? 'true' : 'false'}"
33+
data-cmp-required="${radioButton.required ? 'true': 'false'}"
34+
data-cmp-readonly="${radioButton.readOnly ? 'true' : 'false'}"
35+
data-cmp-data-layer="${radioButton.data.json}"
36+
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
37+
data-sly-test.widgetId="${'{0}-{1}' @ format=[radioButton.id, 'widget']}">
38+
39+
<legend class="cmp-adaptiveform-radiobutton__label-container">
40+
<span data-sly-call="${legend.legend @ componentId=widgetId, labelValue=radioButton.label.value, labelVisible=radioButton.label.visible, labelRichText=radioButton.label.richText, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></span>
41+
<span data-sly-call="${questionMark.questionMark @ componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></span>
42+
</legend>
43+
44+
<sly data-sly-call="${widget.widget @ radiobutton = radioButton}"></sly>
45+
46+
<div data-sly-call="${shortDescription.shortDescription @componentId=radiobutton.id, shortDescriptionVisible=radioButton.tooltipVisible, shortDescription=radioButton.tooltip, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
47+
48+
<div data-sly-call="${longDescription.longDescription @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
49+
50+
<div data-sly-call="${errorMessage.errorMessage @componentId=radiobutton.id, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
51+
</fieldset>
52+
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2+
~ Copyright 2025 Adobe
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
16+
17+
use(function() {
18+
19+
var clientlibsArr = [ 'core.forms.components.base.v1.editor' ];
20+
var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html';
21+
var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html";
22+
var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html";
23+
var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html"
24+
var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html";
25+
var legendPath = "core/fd/components/af-commons/v1/fieldTemplates/legend.html"
26+
return {
27+
labelPath : labelPath,
28+
shortDescriptionPath : shortDescriptionPath,
29+
longDescriptionPath : longDescriptionPath,
30+
questionMarkPath : questionMarkPath,
31+
errorMessagePath : errorMessagePath,
32+
legendPath : legendPath,
33+
clientlibs : clientlibsArr
34+
}
35+
});
36+
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2+
~ Copyright 2025 Adobe
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
16+
<template data-sly-template.widget="${ @ radiobutton }">
17+
<div class="cmp-adaptiveform-radiobutton__widget ${radiobutton.orientation}" id="${widgetId}" role="radiogroup">
18+
<div data-sly-list="${radiobutton.enums}" data-sly-unwrap>
19+
<div class="cmp-adaptiveform-radiobutton__option">
20+
<label class="cmp-adaptiveform-radiobutton__option-label"
21+
title="${radiobutton.tooltipVisible ? '' : radiobutton.tooltipText}">
22+
<input class="cmp-adaptiveform-radiobutton__option__widget" type="radio"
23+
name="${radiobutton.name}"
24+
value="${item.toString}"
25+
checked="${radiobutton.enums[itemList.index] == radiobutton.default[0]}"
26+
disabled="${!radiobutton.enabled || radiobutton.readOnly}"
27+
aria-readonly="${radiobutton.readOnly ? 'true' : ''}"/>
28+
<span>${radiobutton.enumNames[itemList.index] @ context = 'html'}</span>
29+
</label>
30+
</div>
31+
</div>
32+
</div>
33+
</template>
34+

0 commit comments

Comments
 (0)