How-to Use ACS Commons Multifield With Datepicker

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.

1. JSON Store
2. NODE Store

Using JSON_STORE

Details:

1. cq_dialog.xml

   1. <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>

   2. Note acs-commons-nested=“JSON_STORE”
2. Backend code snippet

   1. @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:

1. cq_dialog.xml

   1. <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”

       

2. Backend code snippet

   1. 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);