topic Re: Aikau Simple Form Example in Alfresco Archive

Aikau Simple Form Example

muralidharand — Sat, 07 Mar 2015 17:21:56 GMT

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

Re: Aikau Simple Form Example

satheeshkumar — Thu, 12 Mar 2015 08:03:58 GMT

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

Re: Aikau Simple Form Example

muralidharand — Thu, 12 Mar 2015 09:02:53 GMT

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

Re: Aikau Simple Form Example

muralidharand — Thu, 12 Mar 2015 09:33:54 GMT

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;
}
‍‍‍‍‍‍‍‍‍

Re: Aikau Simple Form Example

muralidharand — Thu, 12 Mar 2015 10:00:27 GMT

I found one example for File Upload option using Dojox.
http://mwilcox.dojotoolkit.org/dtk/dojox/form/tests/test_FileUploaderForm.html

I will try do an example in an Aikau way !

Re: Aikau Simple Form Example

satheeshkumar — Fri, 13 Mar 2015 05:00:07 GMT

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

Re: Aikau Simple Form Example

muralidharand — Fri, 13 Mar 2015 11:21:54 GMT

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

Re: Aikau Simple Form Example

muralidharand — Mon, 16 Mar 2015 07:13:00 GMT

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.

student-form.get.js


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.

Re: Aikau Simple Form Example

satheeshkumar — Thu, 26 Mar 2015 10:21:28 GMT

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');
      }

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

Re: Aikau Simple Form Example

muralidharand — Fri, 27 Mar 2015 10:42:24 GMT

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?

Re: Aikau Simple Form Example

satheeshkumar — Fri, 27 Mar 2015 12:35:35 GMT

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.

Re: Aikau Simple Form Example

muralidharand — Sat, 28 Mar 2015 02:41:08 GMT

Hi Satheesh,
Nowhere you've referred "ProductCreateListen.js" in your "test-method.get.js" file.

I would recommend, place your "ProductCreateListen.js" under "C:\Alfresco5\tomcat\webapps\share\js\alfresco\services" and refer the service javascript like the below,



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

‍‍‍‍‍‍‍‍

Hope this helps you.

Please let me know, if you need any help on this.

Re: Aikau Simple Form Example

satheeshkumar — Sun, 29 Mar 2015 13:06:00 GMT

I thought the alfSubcsribe will work without any reference mentioned in the calling file. It was my wrong assumption.

Now it works perfectly thanks again for your help Murali.

Is there any way I can show the actual error message occurred in the alert box, like in my case , I got the below error,

org.alfresco.service.cmr.repository.DuplicateChildNodeNameException: Duplicate child name not allowed‍

Can I show this in the alert window instead of just showing something wrong happened like "Sad now".

Thanks in Advance.

Re: Aikau Simple Form Example

gravitonian — Tue, 07 Apr 2015 14:40:52 GMT

Hi Guys,

If you are doing a lot of Aikau development then this article might be useful:

https://docs.google.com/document/d/1q25jA5EQ5PRYekr8tpM3ELlwOQ8Ht3Ng6D4VWsKoZtY/pub

Re: Aikau Simple Form Example

ddraper — Wed, 15 Apr 2015 09:11:11 GMT

There is also lots of information on Aikau form develop in the Aikau tutorial on GitHub: https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Contents.md