Saturday, March 7, 2015

Aikau Form Example - For simple student form creation



Step 1: Import the student.xml data as described here (http://www.codingfreaks.net/2015/02/how-to-deploy-custom-model-into.html)

Step 2: Place the webscript as mentioned here




Step 3: Refresh your webscript.



Step 5: Click the Save button.
Step 6: Go to document library


Step 7: Click on the Edit Properties option and you can see student properties values.




/* Here is the code of student-form.get.js */

/*
This page is used to render a simple form and POST the data to repository, 
 to create a new student folder under Document Library.
 The Student model in described here ........
 Import the student model as described here.... 
*/

/* get the current site */
var site = page.url.templateArgs.site;
//Read the node reference of Document Library
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
var studentFormWidget = [      
    {
      name: "alfresco/forms/controls/DojoValidationTextBox",
      config: {
     label: "Student ID",
     name: "prop_student_StudentID"
      }
    },
    {
      name: "alfresco/forms/controls/DojoValidationTextBox",
      config: {
     label: "First Name",
     name: "prop_student_firstName"
      }
    },
    {
      name: "alfresco/forms/controls/DojoValidationTextBox",
      config: {
     label: "Last Name",
     name: "prop_student_lastName"     
      }
    },
    {
      name: "alfresco/forms/controls/DojoValidationTextBox",
      config: {
     label: "Email",
     name: "prop_student_email"
      }
    }
  ];   

  

//Create the form here
var form = {
   name: "alfresco/forms/Form",
   config: {
      showOkButton: true,
      okButtonLabel: "Save",   
      showCancelButton: false,
      cancelButtonLabel: "",
   //Specify the TOPIC here
      okButtonPublishTopic: "ALF_CRUD_CREATE",
      okButtonPublishGlobal: true,   
   okButtonPublishPayload: {
  //Specify the URL here to POST the data
        url: "api/type/student%3AstudentFolder/formprocessor", 
  //To create the folder under document library, we need the documberLibrary nodeRer,So POST that too.
  alf_destination:alfDestination         
   },
     widgets: studentFormWidget
   }
};

//Add the form and services to the JSON MODEL
model.jsonModel = { widgets: [ form ],   services: ["alfresco/services/CrudService"] };





/* Details of student-form.get.desc.xml */
<webscript>
  <shortname>Student Form Example</shortname>
  <family>Aikau</family>
  <url>/studentForm</url>
</webscript>


/* student-form.get.html.ftl */
<@processJsonModel group="share"/>

Download the Student Form sample here
Download the Student Model file here



4 comments:

  1. Really very helpful and well described blog. Please let me know others links also of custom things in share.

    ReplyDelete
  2. Please let me know, if you're looking for any specific customisation on Share?

    ReplyDelete
  3. please give example with mix of all text box,radio button,check box,dropdown cascading with other values and save to specified locaion

    ReplyDelete