This article details on how to create a component that contains multiple fields, Date being one of them
ACS Commons allows 2 ways to store the data into the repository.
- JSON Store
- NODE Store
Using JSON_STORE
Details:
- cq_dialog.xml
-
<scheduleEvents jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/multifield” class="full-width"> <field jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset” acs-commons-nested=“JSON_STORE" name="./scheduleEvents”> <layout jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns” method="absolute”/> <items jcr:primaryType="nt:unstructured”> <column jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/container”> <items jcr:primaryType="nt:unstructured”> <eventDate jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/datepicker” type=“date" displayedFormat="YYYY-MM-DD” fieldLabel="Event Date” fieldDescription="Scheduled date of the event.” name="./eventDate”/> </items>
- Note acs-commons-nested=“JSON_STORE”
-
- Backend code snippet
-
@ValueMapValue(name="scheduleEvents") protected String[] scheduleEventsArray = null; ... if (scheduleEventsArray != null && scheduleEventsArray.length > 0) { for( String section : scheduleEventsArray ) { Map<String, String> props = (Map<String, String>) new Gson().fromJson(section, Map.class); eventDate = props.get("eventDate”);
-
Using NODE_STORE
Details:
- cq_dialog.xml
-
<scheduleEvents jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/multifield” class="full-width"> <field jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset” acs-commons-nested=“NODE_STORE" name="./scheduleEvents”> <layout jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns” method="absolute”/> <items jcr:primaryType="nt:unstructured”> <column jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/container”> <items jcr:primaryType="nt:unstructured”> <eventDate jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/datepicker” type=“date" displayedFormat="YYYY-MM-DD” fieldLabel="Event Date” fieldDescription="Scheduled date of the event.” name="./eventDate”/> </items>
b. Note acs-commons-nested=“NODE_STORE”
-
- Backend code snippet
-
Resource eventsResource = resource.getChild( "scheduleEvents" ); Iterator<Resource> allEventsResources = eventsResource.listChildren(); while ( allEventsResources.hasNext() ){ Resource eventResource = allEventsResources.next(); valuemap = eventResource.getValueMap(); eventDate = valuemap.get("eventDate", Calendar.class);
-