Form in share simpleDialog

[ingon]

I'm trying to show a full functional form in a simpleDialog called from a documentlibrary action, but I can'f make it work, since it never reaches the onSuccess event.

Here is where the action is defined:

   <config evaluator="string-compare" condition="DocLibCustom">
      <dependencies>
         <js src="/components/import/import-actions.js" />
      </dependencies>
   </config>

   <config evaluator="string-compare" condition="DocLibActions">
      <actions>
         <action id="alfresco_import_permissions" type="javascript" label="action.import.permissions"
            icon="import-permissions">
            <param name="function">onActionOpenForm</param>
         </action>
      </actions>
      <actionGroups>
         <actionGroup id="folder-browse">
            <action index="230" id="alfresco_import_permissions" />
         </actionGroup>
      </actionGroups>
   </config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here, the onActionOpenForm implementation in the file import-actions.js:

(function() {

   YAHOO.Bubbling.fire("registerAction", {
      actionName : "onActionOpenForm",
      fn : function onActionOpenForm(record) {
         var actionUrl = YAHOO.lang.substitute(Alfresco.constants.PROXY_URI + "alfresco/importer/{uri}",
               {
                  uri : this.doclistMetadata.parent.nodeRef.replace(":/", "")
               });
         var templateUrl = Alfresco.constants.URL_SERVICECONTEXT + "alfresco/import/uploadcontent";
         var uploadZip = new Alfresco.module.SimpleDialog(this.id + "-uploadContent");
         uploadZip.setOptions({
            width : "50em",
            templateUrl : templateUrl,
            actionUrl : actionUrl,
            onSuccess : {
               fn : function DLTB_onUploadContent_success(response) {
                  alert("hi");
               },
               scope : this
            },
            onFailure : {
               fn : function DLTB_onUploadContent_failure(response) {
                  alert("bye");
               },
               scope : this
            }
         });
         uploadZip.show()
      }
   });

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

Here, the form that is rendered in the popup:

<#assign el=args.htmlid?html>
<div id="${el}-dialog" class="upload-content">
   <div id="${el}-dialogTitle" class="hd">${msg("page.importZipFile.title")}</div>
   <div class="bd">
      <form id="${el}-form" action="" method="post" enctype="multipart/form-data" accept-charset="utf-8">
         <div class="yui-gd">
            <div class="yui-u first"><label for="${el}-filedata">${msg("label.filedata")}:</label></div>
            <div class="yui-u"><input type="file" id="${el}-filedata" name="filedata" tabindex="0" style="width:100%"/></div>
         </div>
         <div class="bdft">
            <input type="submit" id="${el}-ok" value="${msg("button.ok")}" tabindex="0" />
            <input type="button" id="${el}-cancel" value="${msg("button.cancel")}" tabindex="0" />
         </div>
      </form>
   </div>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Alfresco websccript that is called in the form action:

XML:

<webscript>
   <shortname>Import permissions</shortname>
   <description>Import permissions</description>
   <url>/alfresco/importer/{nodeRef}</url>
   <authentication>none</authentication>
   <format default="json">argument</format>
   <args>
      <arg>
         <shortname>nodeRef</shortname>
         <description>NodeRef</description>
      </arg>
   </args>   
</webscript>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Java class:

package alfresco.beans.web.scripts;

import java.io.IOException;

import org.alfresco.service.cmr.repository.NodeService;
import org.json.simple.JSONObject;
import org.springframework.extensions.webscripts.AbstractWebScript;
import org.springframework.extensions.webscripts.WebScriptRequest;
import org.springframework.extensions.webscripts.WebScriptResponse;

public class ImportPermissions extends AbstractWebScript {

   NodeService nodeService;

   public final NodeService getNodeService() {
      return nodeService;
   }

   public final void setNodeService(NodeService nodeService) {
      this.nodeService = nodeService;
   }

   public ImportPermissions() {
   }

   @SuppressWarnings("unchecked")
   @Override
   public void execute(WebScriptRequest req, WebScriptResponse res) throws IOException {

      JSONObject jsonObject = new JSONObject();
      jsonObject.put("value1", "data1");
      jsonObject.put("value2", "data2");

      String jsonString = jsonObject.toString();
      res.getWriter().write(jsonString);

   }

}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I click ok in the form, I can debug the alfresco webscript and the execute() method is correct, without errors. The problem I have is that the onSuccess event in onActionOpenForm is never reached, even debugging the simple-dialog.js.

Am I doing anytthing wrong? Do I have to add or remove something in my code??

Thanks in advance!!

[ingon]

Apparently there's something wrong in my templateUrl, because if I change it for:

var templateUrl = YAHOO.lang.substitute(Alfresco.constants.URL_SERVICECONTEXT + "components/form?itemKind={itemKind}&itemId={itemId}&destination={destination}&mode={mode}&submitType={submitType}&formId={formId}&showCancelButton=true",
   {
      itemKind : "node",
      itemId : record.nodeRef,
      mode : "edit",
      submitType : "json",
      formId : "doclib-simple-metadata"
   });
‍‍‍‍‍‍‍‍‍‍

The onSuccess event is reached. Does anybody see something wrong in my template??

Thnks!!!!

[ingon]

Ok, the problem seems to be the enctype="multipart/form-data" in the tamplateUrl. If I remove it from the form, the action works perfectly. But I need to have it in my form in order to get the data. Why is this happenning? Any ideas anyone?

Thanks!!!

[ingon]

Hi, sorry for the monologue, but I'm still working on this.

I've been looking at this page about the CSRFPolicy (http://blogs.alfresco.com/wp/ewinlof/2013/03/11/introducing-the-new-csrf-filter-in-alfresco-share) and found something interesting:

<blockquote>

Now let’s take a look however at the scenarios when you might need to tweak your code or change the default configuration.<br/><br/>

(…)

2. You are making a form upload with enctype multipart/form-data without using Alfresco.forms.Form<br/><br/><br/>

When uploading a file by submitting a form with enctype multipart/form-data it is not possible to set a header on the request, the reason is not because of the enctype specifically but due to the fact that its not possible to set a header on any form submission in the browser. Therefor you need to pass the token as a url parameter instead. If you are using the Alfresco.forms.Form class  this will be handled for you automatically but otherwise you have to add the token as a url parameter using code looking something like this:

if (Alfresco.util.CSRFPolicy && Alfresco.util.CSRFPolicy.isFilterEnabled())
{
   url += "?" + Alfresco.util.CSRFPolicy.getParameter() + "=" + encodeURIComponent(Alfresco.util.CSRFPolicy.getToken());
}
</blockquote>

I tried to change my import-actions.js to:

(function() {

   YAHOO.Bubbling.fire("registerAction", {
      actionName : "onActionOpenForm",
      fn : function onActionOpenForm(record) {
         var actionUrl = YAHOO.lang.substitute(Alfresco.constants.PROXY_URI + "alfresco/importer/{uri}", {
            uri : this.doclistMetadata.parent.nodeRef.replace(":/", "")
         });
         if (Alfresco.util.CSRFPolicy && Alfresco.util.CSRFPolicy.isFilterEnabled()) {
            actionUrl += "?" + Alfresco.util.CSRFPolicy.getParameter() + "="
                  + encodeURIComponent(Alfresco.util.CSRFPolicy.getToken());
         }
         var templateUrl = Alfresco.constants.URL_SERVICECONTEXT + "alfresco/import/uploadcontent";
         var uploadZip = new Alfresco.module.SimpleDialog(this.id + "-uploadContent");
         uploadZip.setOptions({
            width : "50em",
            templateUrl : templateUrl,
            actionUrl : actionUrl,
            onSuccess : {
               fn : function DLTB_onUploadContent_success(response) {
                  alert("hi");
               },
               scope : this
            },
            onFailure : {
               fn : function DLTB_onUploadContent_failure(response) {
                  alert("bye");
               },
               scope : this
            }
         });
         uploadZip.show()
      }
   });

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

With no luck. But could something like this be the problem?

Thanks!!

[ingon]

Edited

[ingon]

It seems to be something wrong in the file forms-runtime.js, in the method _submitInvoked there is a validation that checks if the form is multipart/form-data:

               if (form.enctype && form.enctype == "multipart/form-data")
               {
                  var d = form.ownerDocument;
                  var iframe = d.createElement("iframe");
                  iframe.style.display = "none";
                  Dom.generateId(iframe, "formAjaxSubmit");
                  iframe.name = iframe.id;
                  document.body.appendChild(iframe);

                  // makes it possible to target the frame properly in IE.
                  window.frames[iframe.name].name = iframe.name;

                  // Pass the CSRF token if the CSRF token filter is enabled
                  if (Alfresco.util.CSRFPolicy.isFilterEnabled())
                  {
                     form.attributes.action.nodeValue = this._setCSRFParameter(submitUrl);
                  }

                  form.target = iframe.name;
                  form.submit();
                  return;
               }
               else
               {
                  // Only disable submit elements for XMLHttpRequests since we
               // then have a chance of enabling them on failure
                  this._toggleSubmitElements(false);
               }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If I remove that if just leaving the line this._toggleSubmitElements(false), the onSuccess event is reached, but no file is sent to alfresco webscript. What is that piece of code doing wrong??

[hmanik]

Hello, I have a requirement where in I have to show a simple Dialog on Clicking Reject button of Workflow Edit Task form.

I modified the activiti-transitions.ftl and created a function onRejectClick() in the JS. In this function I am instantiating a Simple Dialog using YAHOO.widget.
Everything going smooth and no error in Firebug but the Dialog is not showing. All the break points are success but there is no Dialog.
Attached is the code Snippet Screenshot.

On Firebug I can see on clicking my rejectClick function is getting called but the popUp is not displayed.

[muralidharand]

Hi,
In your code, it looks the simpledialog has visible property as false. Try to change that to , visible:true then try once.
Otherwise, you need debug(step-in) simpledialog javascript code.

[ingon]

Thank you for the answer, but I think is a different problem, isn't it?

Anyway, if somebody has the same problem as me, I finally avoided the use of simpleDialog, as it doesn't support enctype multipart/form-data, and made my own form.