Skip to content

Commit 454c70b

Browse files
CezarSTFci-build
CezarSTF
authored and
ci-build
committed
added FORMS-18631, FORMS-18630, FORMS-18625 and FORMS-18686 changes to datepicker v2
1 parent c046979 commit 454c70b

File tree

27 files changed

+2501
-0
lines changed

27 files changed

+2501
-0
lines changed

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/en.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
"FileNameInvalid" : "Do not attach files where filename starts with (.), contains \\ / : * ? \" < > | ; % $, or is a reserved keyword like nul, prn, con, lpt, or com.",
55
"FileMimeTypeInvalid" : "File(s) ${0} are unsupported file types",
66
"InternalFormSubmissionError" : "Encountered an internal error while submitting the form.",
7+
"previousMonth" : "Previous month",
8+
"nextMonth" : "Next month",
9+
"previousYear" : "Previous year",
10+
"nextYear" : "Next year",
11+
"previousSetOfYears" : "Previous set of years",
12+
"nextSetOfYears" : "Next set of years",
713
"FileSizeZero" : "The uploaded file(s) ${0} are empty. Make sure you're uploading file(s) with content.",
814
"type" : "Please enter a valid value.",
915
"required" : "Please fill in this field.",
@@ -22,6 +28,7 @@
2228
"accept" : "The specified file type not supported.",
2329
"defaultError" : "There is an error in the field",
2430
"clearText" : "Clear",
31+
"openCalendarText" : "Open calendar",
2532
"calendarSymbols" : {
2633
"monthNames" : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
2734
"abbrmonthNames" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/.content.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
3+
jcr:primaryType="nt:unstructured">
4+
<datepicker/>
5+
</jcr:root>

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/.content.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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="date"
4+
jcr:description="Add a field with a calendar widget to select a date."
5+
jcr:primaryType="cq:Component"
6+
jcr:title="Adaptive Form Date Picker (v1)"
7+
sling:resourceSuperType="core/fd/components/form/base/v1/base"
8+
componentGroup=".core-adaptiveform"/>

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/README.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!--
2+
Copyright 2022 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+
Adaptive Form Date Picker (v1)
17+
====
18+
Adaptive Form Date Picker field component written in HTL.
19+
20+
## Features
21+
22+
* Provides the following type of input:
23+
* date
24+
* Allows replacing this component with other component (as mentioned below).
25+
26+
### Use Object
27+
The Form Date Picker component uses the `com.adobe.cq.forms.core.components.models.form.DatePicker` Sling Model for its Use-object.
28+
29+
### Edit Dialog Properties
30+
The following properties are written to JCR for this Form Date component and are expected to be available as `Resource` properties:
31+
32+
1. `./jcr:title` - defines the label to use for this field
33+
2. `./hideTitle` - if set to `true`, the label of this field will be hidden
34+
3. `./name` - defines the name of the field, which will be submitted with the form data
35+
4. `./default` - defines the default value of the field
36+
5. `./description` - defines a help message that can be rendered in the field as a hint for the user
37+
6. `./required` - if set to `true`, this field will be marked as required, not allowing the form to be submitted until the field has a value
38+
7. `./requiredMessage` - defines the message displayed as tooltip when submitting the form if the value is left empty
39+
8. `./readOnly` - if set to `true`, the filed will be read only
40+
9. `./dataFormat` - defines the format in which the value exported/submitted
41+
10. `./editFormat` - defines the format in which the value will be edited by the user
42+
11. `./minimumDate` - define the minimum date input allowed for the field
43+
12. `./maximumDate` - define the maximum date input allowed for the field
44+
13. `./displayFormat` - define the template for display pattern (Reference can be found [here](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)).
45+
46+
## Client Libraries
47+
The component provides a `core.forms.components.datePicker.v1.runtime` client library category that contains the Javascript runtime for the component.
48+
It should be added to a relevant site client library using the `embed` property.
49+
50+
## BEM Description
51+
```
52+
BLOCK cmp-adaptiveform-datepicker
53+
ELEMENT cmp-adaptiveform-datepicker__label
54+
ELEMENT cmp-adaptiveform-datepicker__label-container
55+
ELEMENT cmp-adaptiveform-datepicker__widget
56+
ELEMENT cmp-adaptiveform-datepicker__questionmark
57+
ELEMENT cmp-adaptiveform-datepicker__shortdescription
58+
ELEMENT cmp-adaptiveform-datepicker__longdescription
59+
ELEMENT cmp-adaptiveform-datepicker__errormessage
60+
```
61+
62+
### Note
63+
By placing the class names `cmp-adaptiveform-datepicker__label` and `cmp-adaptiveform-datepicker__questionmark` within the `cmp-adaptiveform-datepicker__label-container` class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.
64+
65+
## JavaScript Data Attribute Bindings
66+
67+
The following attributes must be added for the initialization of the date-picker component in the form view:
68+
1. `data-cmp-is="adaptiveFormDatePicker"`
69+
2. `data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"`
70+
71+
72+
The following are optional attributes that can be added to the component in the form view:
73+
1. `data-cmp-valid` having a boolean value to indicate whether the field is currently valid or not
74+
2. `data-cmp-required` having a boolean value to indicate whether the field is currently required or not
75+
3. `data-cmp-readonly` having a boolean value to indicate whether the field is currently readonly or not
76+
4. `data-cmp-active` having a boolean value to indicate whether the field is currently active or not
77+
5. `data-cmp-visible` having a boolean value to indicate whether the field is currently visible or not
78+
6. `data-cmp-enabled` having a boolean value to indicate whether the field is currently enabled or not
79+
80+
## Replace feature:
81+
We support replace feature that allows replacing Reset Button component to any of the below components:
82+
83+
* Button
84+
* Email Input
85+
* Number Input
86+
* Reset Button
87+
* Submit Button
88+
* Telephone Input
89+
* Text Box
90+
* Text Input
91+
92+
93+
## Information
94+
* **Vendor**: Adobe
95+
* **Version**: v1
96+
* **Compatibility**: Cloud
97+
* **Status**: production-ready
98+
99+
100+

‎ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v2/datepicker/_cq_design_dialog/.content.xml‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
18+
xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
19+
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
20+
jcr:primaryType="nt:unstructured"
21+
jcr:title="Adaptive Form Field"
22+
sling:resourceType="cq/gui/components/authoring/dialog"
23+
trackingFeature="core-components:design-dialog:adaptiveform-datepicker:v1">
24+
<content
25+
jcr:primaryType="nt:unstructured"
26+
sling:resourceType="granite/ui/components/coral/foundation/container">
27+
<items jcr:primaryType="nt:unstructured">
28+
<tabs
29+
jcr:primaryType="nt:unstructured"
30+
sling:resourceType="granite/ui/components/coral/foundation/tabs"
31+
maximized="{Boolean}true">
32+
<items jcr:primaryType="nt:unstructured">
33+
<formats
34+
jcr:primaryType="nt:unstructured"
35+
jcr:title="Formats"
36+
sling:resourceType="granite/ui/components/coral/foundation/container"
37+
margin="{Boolean}true">
38+
<items jcr:primaryType="nt:unstructured">
39+
<column
40+
jcr:primaryType="nt:unstructured"
41+
sling:resourceType="granite/ui/components/coral/foundation/container">
42+
<items jcr:primaryType="nt:unstructured">
43+
<allowedFormats
44+
jcr:primaryType="nt:unstructured"
45+
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
46+
fieldDescription="The date picker formats that are allowed to be selected by an author."
47+
fieldLabel="Allowed Formats"
48+
name="./allowedFormats">
49+
<items jcr:primaryType="nt:unstructured">
50+
<pattern1
51+
jcr:primaryType="nt:unstructured"
52+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
53+
checked="true"
54+
name="./allowedFormat1"
55+
text="01 April, 2007"
56+
value="01 April, 2007=d MMMM, y"/>
57+
<pattern2
58+
jcr:primaryType="nt:unstructured"
59+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
60+
checked="true"
61+
name="./allowedFormat2"
62+
text="April 01, 2007"
63+
value="April 01, 2007=MMMM d, y"/>
64+
<pattern3
65+
jcr:primaryType="nt:unstructured"
66+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
67+
checked="true"
68+
name="./allowedFormat3"
69+
text="Sunday, 01 April, 2007"
70+
value="Sunday, 01 April, 2007=EEEE, d MMMM, y"/>
71+
<pattern4
72+
jcr:primaryType="nt:unstructured"
73+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
74+
checked="true"
75+
name="./allowedFormat4"
76+
text="Sunday, April 01, 2007"
77+
value="Sunday, April 01, 2007=EEEE, MMMM d, y"/>
78+
<pattern5
79+
jcr:primaryType="nt:unstructured"
80+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
81+
checked="true"
82+
name="./allowedFormat5"
83+
text="1/4/2007"
84+
value="1/4/2007=d/M/y"/>
85+
<pattern6
86+
jcr:primaryType="nt:unstructured"
87+
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
88+
checked="true"
89+
name="./allowedFormat6"
90+
text="4/1/2007"
91+
value="4/1/2007=M/d/y"/>
92+
</items>
93+
</allowedFormats>
94+
<customFormats
95+
jcr:primaryType="nt:unstructured"
96+
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
97+
fieldDescription="The date picker formats that are allowed to be selected by an author."
98+
fieldLabel="Custom Formats"
99+
composite="true"
100+
name="./allowedCustomFormats">
101+
<field
102+
jcr:primaryType="nt:unstructured"
103+
sling:resourceType = "granite/ui/components/coral/foundation/container"
104+
name = "./allowedCustomFormats">
105+
<items jcr:primaryType="nt:unstructured">
106+
<customFormatKey
107+
jcr:primaryType="nt:unstructured"
108+
fieldDescription="The date picker format that will be displayed in formatter dropdown in dialog."
109+
fieldLabel="Custom Format Key"
110+
sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
111+
name = "customFormatKey"/>
112+
<customFormatExpression
113+
jcr:primaryType="nt:unstructured"
114+
fieldDescription="The date picker format in unicode which will be used in runtime."
115+
fieldLabel="Custom Format Expression"
116+
sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
117+
name = "customFormatValue"/>
118+
</items>
119+
</field>
120+
</customFormats>
121+
</items>
122+
</column>
123+
</items>
124+
</formats>
125+
</items>
126+
</tabs>
127+
</items>
128+
</content>
129+
</jcr:root>

0 commit comments

Comments
 (0)