using a post form in a dashlet

[chrisokelly]

Hi,

I am working through creating a dashlet to submit tickets to our helpdesk from a Share dashlet. Essentially, the endpoint of the alfresco/share extension is for an email  to be sent.
I have created the dashlet itself, which registers and displays without error. I have the form on the dashlet but at current it does not submit anywhere.
I know I can create a webscript to send the email relatively easy by creating a mail action executor.
What I cannot figure out is how to get the data from the form to the webscript that will send the mail. I originally tried to add the mail action code onto the form's submit button's onclick event. I should have known that wouldn't work (client side) but haven't been able to find info on passing data between webscripts in Alfresco/share.

I haven't posted the code here, in this case, because I don't see it being useful as of yet (its not that I have tried something that isn't working, I just don't know where to start) but I can if needs be

[erikwinlof]

Using Alfresco.forms.Form (inside forms-runtime.js) will help you to "ajax-submit" data from a form with a json body to your webscript.

inside your dashlet.get.html.ftl:

<form id="${el}-form" method="POST" action="${url.context}/proxy/alfresco/acme/custom/personemailwebscript" enctype="application/json">
   <h3>Create Person</h3>
   
   <label>${msg("label.name")}:<input name="person.name" tabindex="0"/></label>

   <label>${msg("label.phone1")}:<input name="person.phone[]" tabindex="0"/></label>
   <label>${msg("label.phone2")}:<input name="person.phone[]" tabindex="0"/></label>

   <input type="submit" id="${el}-ok-button" value="${msg("button.ok")}" tabindex="0"/>
</form>‍‍‍‍‍‍‍‍‍‍

inside your dashlet.js onReady method:

var form = new Alfresco.forms.Form(this.id + "-form");
this.widgets.okButton = Alfresco.util.createYUIButton(this, "ok-button", null, { type: "submit" });
form.setSubmitElements(this.widgets.okButton);
form.init();
‍‍‍‍‍

When submit is clicked this form would issue do:

POST /share/proxy/alfresco/acme/custom/personemailwebscript
{
   person: 
   {
      name: "A name",
      phones: [ "123", "456"]
   }
}
‍‍‍‍‍‍‍‍‍

Then you will be able to retrieve the data from your repo web script using the "json" object.
I.e. to get the "person" object simply do:

json.get("person")
‍‍

For more example code on client side form code, please take a look at create-site.js for instance.

Cheers, Erik

[tverlaine]

Hi Erik/Crhis, I was wondering if you are using this form to create objects of the type "tickets". If so, why don't you use the formservice? You could retrieve a form calling to a webscript, for instance:

Alfresco.util.Ajax.request(
        {
           url: Alfresco.constants.URL_SERVICECONTEXT + "components/form",
           dataObj:
           {
              htmlid: me.id + "-dashletForm-" + me.domId,
              itemKind: "type",
              itemId: type,
              mode: "create",
              submitType: "json",
              showCaption: false,
              formUI: true,
              formId: formId,
              destination: destination,
              showCancelButton: false

           },
           successCallback:
           {
              fn: me.onFormLoaded,
              scope: this
           },
           failureMessage: "test",
           scope: this,
           execScripts: true
        });


After you could insert the result somewhere doing the following:

…
      onFormLoaded: function Component_FormLoaded(response)
     {

          var formEl = Dom.get(me.id + "-dashletFormContainer");

          formEl.innerHTML = response.serverResponse.responseText;
     },

…

the benefit of using this approach is that you could use the creation forms you defined in share-config-custom.

If you want to add logic when creating the new objects you could develop a behaviour or a rule.

[chrisokelly]

Hi Erik,

This is really helpful!

Just yesterday I redid my code and got it working with a normal html form (ie without the yui or alfresco form classes), but this is a far more elegant solution, I'll be revamping my code with this. Thanks very much!

[bazter]

Hello, if I wanted to save the input in MySQL database instead of sending an email, what should I do?
I guess it's all about this: /share/proxy/alfresco/acme/custom/personemailwebscript right?

Please could you give me one more clue how to perform this feature?