Aikau Form with multiple date controls

Aikau Form with multiple date controls 

You may be wondering, why I writing a separate blog post, Aikau form with multiple date controls. When I was using eariler version of Aikau (1.0.8.2), I faced an issue with date control.

If I use only one date controls, the aikau form was working fine and when I placed the second date control, the other controls in the form, loosing their label and it was throwing client script error in the browser.

You can refer the details in the below link also.
https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/aikau-form-two-date-control-09182015-1838

The below files are required, to render the below Simple Student Form with two date controls.
* studentForm.get.js
* studentForm.get.desc.xml
* studentForm.get.html.ftl

/* studentForm.get.js */

//Get the current site name
var site = page.url.templateArgs.site;
//Get the current date and assign it to the admission date field
var currentDate = new Date().toISOString();

//Get the document library noderef value 
var alfDestination = null;
var result = remote.call("/slingshot/doclib/container/" + site + "/documentLibrary");


if (result.status.code == status.STATUS_OK) {
   alfDestination = JSON.parse(result).container.nodeRef;
}


//Create the form control for the Student Entry
var studentFormControls = [
{
      name : "alfresco/forms/controls/TextBox",
      config : {
         name : "alf_destination",
         value : alfDestination,
         visibilityConfig : {
            initialValue : false
         }
      }
   },
    {
      name : "alfresco/forms/controls/TextBox",
      config : {
         label : "Student Name",
         name : "prop_cm_student",
         requirementConfig : {
            initialValue : true
         }
      }
   }, {
      name : "alfresco/forms/controls/DateTextBox",
      config : {
         label : "Date Of Birth",
         name : "prop_cm_dob",
         requirementConfig : {
            initialValue : true
         }
      }
   }, 
   {
      name : "alfresco/forms/controls/DateTextBox",
      config : {  
         label : "Admission Date",        
         name : "prop_cm_admissionDate",
         requirementConfig : {
            initialValue : true
         },
         value : currentDate
      }
    }
 ];


//Create the form here
var studentForm = {
   name : "alfresco/forms/Form",
   config : {
    additionalCssClasses: "call-to-action",
        showOkButton : true,
      okButtonLabel : "Save",
      showCancelButton : true,
      cancelButtonLabel : "Cancel",
      okButtonPublishTopic : "ALF_CRUD_CREATE",
      okButtonPublishGlobal : true,
      okButtonPublishPayload : {
         //Specify the URL here to POST the data
         url : "api/type/cm%3Astudent/formprocessor",
         //To create the folder under document library, we need the documberLibrary nodeRef,So POST that too.
         alf_destination : alfDestination
      },
      widgets : studentFormControls
   }
};


var pageTitle= {
        id: "SET_PAGE_TITLE",
        name: "alfresco/header/SetTitle",
        config: {
            title: "Student Create"
        }
    };
//Add the form and services to the JSON MODEL
model.jsonModel = {
   widgets : [pageTitle,studentForm],
   services : ["alfresco/services/CrudService"]

}; 


/* studentForm.get.desc.xml */

<webscript>

  <shortname>Student Form</shortname>

  <family>Aikau Examples</family>

  <url>/student</url>

</webscript>

/* studentForm.get.html.ftl */

<@processJsonModel group="share"/>

Access the student form using the below URL.

http://localhost:8080/share/page/site/my-site/hdp/ws/student

controls