Aikau Simple Form Example

[muralidharand]

Hi All,
I created a very simple aikau form example.

http://www.codingfreaks.net/2015/03/aikau-form-example-for-simple-student.html

/* 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"/>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[satheeshkumar]

Thanks for sharing the form example.
It works charm when I want to create a folder under documentLibrary,
But what if I want to create a folder under sub directory of documentLibrary,

I have a subdirectory called "Product Library", so I change the remote call in the below two way, both of them failed with ClassCastException,

var result = remote.call("/slingshot/doclib/container/"+site+"/documentLibrary/Product Library");
var result = remote.call("/slingshot/doclib/container/"+site+"/documentLibrary/cm:Product Library");‍‍‍

Changing the remote call, gives me

java.lang.ClassCastException: org.json.JSONObject$Null cannot be cast to java.lang.String‍

Also if possible could you also please share an example on how to have an upload button(to upload external file) in the custom form. Also define a destination path to send the uploaded file along with the data submitted in the form.

Regards,
Satheesh D

[muralidharand]

Hi Satheesh,
This is interesting to me.
I will come back to you with possible samples.

[muralidharand]

Hi Satheesh,
Here is the updated webscript url, to get the child folder NodeRef.

var result = remote.call("/slingshot/doclib2/doclist/file/site/"+site+"/documentLibrary/Product");

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

[satheeshkumar]

Here is my updated code,

var result = remote.call("/slingshot/doclib2/doclist/file/site/"+site+"/documentLibrary/Product%20Library"); //%20 for space
if (result.status.code == status.STATUS_OK)
{   
   alfDestination = JSON.parse(result).metadata.parent.nodeRef;
}
‍‍‍‍‍‍

Sorry to trouble you again, but now I am facing one more challenge, my form fields accept the below data,

//Create the form control for the productType
var productTypeWidget = [
    {
        name: "alfresco/forms/controls/DojoValidationTextBox",
        config: {
       label: "Product Name",
       name: "prop_cm_name"
        }
     },
     {
         name: "alfresco/forms/controls/DojoValidationTextBox",
         config: {
        label: "Product Title",
        name: "prop_cm_title"
         }
      },
     {
         name: "alfresco/forms/controls/DojoValidationTextBox",
         config: {
        label: "Product Description",
        name: "prop_cm_description"
         }
     },
     {
         name: "alfresco/forms/controls/DojoValidationTextBox",
         config: {
        label: "Product Prefix",
        name: "prop_hccm_prefix" //This is the custom property
         }
     }
  ]; 
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So whenever I submit the form it creates a new Folder with the name given in "Product Name" field, when I try to submit the form with the same name already exists in the 'Product Library" folder, I get the below two lines in the logs,

2015-03-12 23:39:43,605 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50) org.alfresco.service.cmr.repository.DuplicateChildNodeNameException: Duplicate child name not allowed: Banner Small
2015-03-12 23:39:43,606 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50) Returning 500 status code
‍‍‍‍

Is there any way I can show the user an error message in case of creation failure.

In my case, the "Product Name" and "Product Prefix" should have one to one mapping, it means I should restrict the user to not to enter a "Prefix" which is already present in any of the folders under "Product Library",
is there any kind of validations that I can perform in the form,(i.e. before submitting, by looping through the list of folders under "Product Library" and validate with the "Prefix" field against the one entered in the form and show the error if the "Prefix" already used).

Also, how will I know that, I need to use this format to post the content under documentLibrary,

var result = remote.call("/slingshot/doclib/container/"+site+"/documentLibrary");
if (result.status.code == status.STATUS_OK)
{   
   alfDestination = JSON.parse(result).container.nodeRef;
}‍‍‍‍‍

I need to use this formate to post the content under subfolder of documentLibrary,

var result = remote.call("/slingshot/doclib2/doclist/file/site/"+site+"/documentLibrary/Product%20Library");
if (result.status.code == status.STATUS_OK)
{ 
   alfDestination = JSON.parse(result).metadata.parent.nodeRef;
}‍‍‍‍‍

Is there any way to find these formats and paths or any documents available to explore more about this?
Sorry I am pretty new to development using AKIAU widgets, that's why this ask, any help would be greatly appreciated.

Thanks in Advance,
Satheesh D

[muralidharand]

Hi Satheesh,

You need to look at the Alfresco webscripts at, http://IPort/alfrsco/service/index
Wiki documentation link : https://wiki.alfresco.com/wiki/Web_Scripts

To find the duplicate stuff, I will try few samples and will come back to you.

Thanks,
Murali

[muralidharand]

Hi Satheesh,
You need to use the call back to handle the response either for success or failure.
For example, look at the "Manage Sites" in the admin console.
When you update the site, after the success update , it gives the green tick symbol. You can follow the similar approach.

In your case, you need to use the "alfResponseTopic" to handle the response.
<strong>
student-form.get.js
</strong>

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,
      alfResponseTopic :"PRODUCT_CREATE"
     }
‍‍‍‍‍‍‍‍‍

Now, you need to have a client side javascript, to handle the subscribe / publish the event.
Below is code snippet for the same,

 this.alfSubscribe("PRODUCT_CREATE_SUCCESS", lang.hitch(this, this.showSuccessResponse));
 this.alfSubscribe("PRODUCT_CREATE_FAILURE", lang.hitch(this, this.showFailureResponse));


showSuccessResponse: function __showSuccessResponse(payload) {      
  alert('Happy now');
},

showFailureResponse: function __showFailureResponse(payload) {
   alert('Sad now');
}



‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Hope you will get an idea now.

Please let me know, if you're not clear.

[satheeshkumar]

Hi Murali, I have added

alfResponseTopic :"PRODUCT_CREATE"‍

in my custom form and I created a Widget to subscribe the topic, but it is not getting called for both success and failure, can you please guide me.
I also modified the

alfResponseTopic‍

's value to

"PRODUCT_CREATE_SUCCESS" AND "PRODUCT_CREATE_FAILURE"‍

, and tried,  but still no luck.
Here is the code of my custom widget for topic subscription.

define([ "dojo/_base/declare", "dijit/_WidgetBase", "alfresco/core/Core",
      "dojo/_base/lang" ], function(declare, _Widget, Core, lang) {
   return declare([ _Widget, Core ], {

      postCreate : function example_widget_productCreateListen__postCreate() {
         this.alfSubscribe("PRODUCT_CREATE_SUCCESS", lang.hitch(this,
               this.showSuccessResponse));
         this.alfSubscribe("PRODUCT_CREATE_FAILURE", lang.hitch(this,
               this.showFailureResponse));
      },

      showSuccessResponse : function __showSuccessResponse(payload) {
         alert('Happy now');
      },

      showFailureResponse : function __showFailureResponse(payload) {
         alert('Sad now');
      }

   });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[muralidharand]

Hi Satheesh,
The code looks correct.
Please let me know, where you've placed this code in the client side and how you've referred this javascript from your .get.js (webscrtipt) file?

[satheeshkumar]

Hi Murali,
Thanks for confirming that, I have attached the folder structure.
Here is the code snippets,

/* test-method.get.js */
var site = "retail-channels-product-management";
//Read the node reference of Product Library under Document Library
var alfDestination = null;
//Derived based on the URI "/slingshot/doclib2/doclist/{type}/site/{site}/{container}/{path}"
var result = remote.call("/slingshot/doclib2/doclist/file/site/" + site
      + "/documentLibrary/Test");

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

var title = {
   id : "SET_PAGE_TITLE",
   name : "alfresco/header/SetTitle",
   config : {
      title : "Custom Test Page"
   }
};

var productName = {
      name:"alfresco/forms/controls/DojoValidationTextBox",
      config: {
         label:"Product Name",
         name:"prop_cm_name"
      }
};

var productTitle = {
      name:"alfresco/forms/controls/DojoValidationTextBox",
      config: {
         label:"Product Title",
         name:"prop_cm_title"
      }
};

var productDescription = {
      name:"alfresco/forms/controls/DojoValidationTextBox",
      config: {
         label:"Product Description",
         name:"prop_cm_description"
      }
};

var anpForm = {
      name : "alfresco/forms/Form",
      config:{
         okButtonLabel : "Create",
         okButtonPublishTopic : "ALF_CRUD_CREATE",
         okButtonPublishGlobal : true,
         okButtonPublishPayload : {
            //Specify the URL here to POST the data
            //Dereived based on the URI "/api/{item_kind}/{item_id}/formprocessor"
            url : "api/type/cm%3Afolder/formprocessor",
            //To create the folder under product Library of document library, we need the productLibrary nodeRer,So POST that too.
            alf_destination : alfDestination,
            alfResponseTopic :"PRODUCT_CREATE_SUCCESS" //tried with "PRODUCT_CREATE" initially and tried with "PRODUCT_CREATE_SUCCESS"
         },
         widgets:[]
      }
};

anpForm.config.widgets.push(productName,productTitle,productDescription);

model.jsonModel = {
      services:["alfresco/services/CrudService"],
      widgets:[title,anpForm]
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

//ProductCreateListen.js

define([ "dojo/_base/declare", "dijit/_WidgetBase", "alfresco/core/Core",
      "dojo/_base/lang" ], function(declare, _Widget, Core, lang) {
   return declare([ _Widget, Core ], {

      postCreate : function example_widget_productCreateListen__postCreate() {
         this.alfSubscribe("PRODUCT_CREATE_SUCCESS", lang.hitch(this,
               this.showSuccessResponse));
         this.alfSubscribe("PRODUCT_CREATE_FAILURE", lang.hitch(this,
               this.showFailureResponse));
      },

      showSuccessResponse : function __showSuccessResponse(payload) {
         alert('Happy now');
      },

      showFailureResponse : function __showFailureResponse(payload) {
         alert('Sad now');
      }

   });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Please let me know if you need any more details.