topic Re: Alfresco form in Alfresco Archive

Alfresco form

rutaveejshah — Wed, 17 Jul 2013 12:15:51 GMT

hiAny one know how to show form using Ajax Response?I got the Ajax Response as data .I can see in Browser.How to show that data in user Interface?If any one have any idea please provide some code or guidance on this.Thank you in Adavance.

Re: Alfresco form

rjohnson — Wed, 17 Jul 2013 15:14:00 GMT

Do you mean:-

Show some data that an Ajax request has returned in the browser window

or

Call a webscript that will return an input form into which the user can key data and then post that data somewhere

Bob Johnson

Re: Alfresco form

rutaveejshah — Thu, 18 Jul 2013 08:47:19 GMT

Thanks for your Reply.

I have call the edit properties webscript using Ajax.
I want to show that form UI using that response.
I have attached response file that i have Captured.
Please Reply if you have any idea how can i saw that form.
Thank you.

Re: Alfresco form

rjohnson — Thu, 18 Jul 2013 09:13:59 GMT

You need a popup.

Below is my code that I have used to show a simple form that just collects a note and adds it to a document. It should not be to difficult to modify it to suit your needs, you just need to change the form it calls and what it does on a submit.


      onActionAddNoteReal: function EMPSP_onActionAddNoteReal()
      {
         var scope = this;
         // Intercept before dialog show
         var doBeforeDialogShow = function EMPSP_onAddNoteReal_doBeforeDialogShow(p_form, p_dialog)
         {
            // Dialog title
            var fileSpan = '<span>' + $html(Alfresco.constants.SITE) + '</span>';
            var empNameSpan = '<span>' + $html(this.options.empName) + '</span>';
            var siteInput = '<input type="hidden" id="' + p_dialog.id + "-site" + '" name="site" value="' + $html(Alfresco.constants.SITE) + '" />';
            Alfresco.util.populateHTML(
               [ p_dialog.id + "-dialogTitle", scope.msg("add-a-note.title", fileSpan, empNameSpan)],
               [ p_dialog.id + "-siteCode", siteInput]
            );          
            // Now set up the HTML text editor
            tinyMCE.init({
                mode : "exact",
                elements: p_dialog.id + "-content",
                convert_fonts_to_spans: false,
                theme: 'advanced',
                width: "100%",
                height: "200px",
                theme_advanced_buttons1: "bold,italic,underline,|,bullist,numlist,|,forecolor,|,undo,redo,removeformat",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "bottom",
                theme_advanced_resizing: false,
                theme_advanced_buttons2: null,
                theme_advanced_buttons3: null,
                theme_advanced_path: false,
                language: Alfresco.constants.JS_LOCALE.substring(0,2)
            });            
         };

         // Using Forms Service, so always create new instance
         var uniqueFormId = this.id + "-addNote-" + Alfresco.util.generateDomId();
         var addNote = new Alfresco.module.SimpleDialog(uniqueFormId);

         var actionUrl = YAHOO.lang.substitute(Alfresco.constants.PROXY_URI + "api/node/{nodeRef}/comments",
         {
           nodeRef: this.options.nodeRef.replace(":/", "")
         });

         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: this.options.nodeRef,
             mode: "edit",
             submitType: "json",
             formId: "fg-add-comment"
         });

         addNote.setOptions(
         {
            width: "50em",
            templateUrl: templateUrl,
            actionUrl: actionUrl,
            destroyOnHide: true,
            doBeforeDialogShow:
            {
               fn: doBeforeDialogShow,
               scope: this
            },
            doBeforeFormSubmit:
            {
               fn: function EMPSP_onAddNoteBFS(p_form)
                  {
                     if(tinyMCE.activeEditor.isDirty()) {
                           // Make sure the editors content is saved down to the form
                        this._setBusy(this.msg("message.details.wait",Alfresco.constants.SITE, this.options.empName));
                              tinyMCE.activeEditor.save();
                              tinyMCE.activeEditor.undoManager.clear();
                              tinyMCE.activeEditor.nodeChanged();
                     }
                  },
               scope: this
            },
            doBeforeAjaxRequest:
            {
               fn: function EMPSP_onAddNoteBFAR()
                  {
                     /*
                      * If the notes box was blank then
                      * don't invoke the ajax save,
                      * we set busy in _setBusy / _releaseBusy
                      */
                     if(!this.busy) {
                        return false;
                     } else {
                        return true;
                     }
                  },
               scope: this
            },
            onSuccess:
            {
               fn: function EMPSP_onAddNote_success(response)
               {
                   this._releaseBusy();
                   // Display success message
                   Alfresco.util.PopupManager.displayMessage(
                   {
                      text: this.msg("message.details.success",this.options.empNo,this.options.empName)
                   });
                   YAHOO.Bubbling.fire("interDashletMessage",
                         {
                             message: "commentadded"
                         });
               },
               scope: this
            },
            onFailure:
            {
               fn: function EMPSP_onAddNote_failure(response)
               {
                  this._releaseBusy();
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: this.msg("message.details.failure",this.options.empNo,this.options.empName)
                  });
               },
               scope: this
            }
         }).show();
      },

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

Good luck

Bob

Re: Alfresco form

rutaveejshah — Fri, 19 Jul 2013 09:10:44 GMT

hi
Thanks for Reply.
I have make a changes that is specified by you.But is not work for me.
Please provide me another code.
i send you my ajax code that will be useful to understand for you.
Please give me some idea.
I have been great full to you if you provide me some guidance.
Thanks .
My ajax code is below:-
<code>
_callScript:function(json)
      {
      Alfresco.util.PopupManager.displayMessage(
               {
                  text: "IN AJAX METHOD"
               });
      Alfresco.util.Ajax.request(
               {
                  url: Alfresco.constants.URL_SERVICECONTEXT + "components/form?itemKind=node&itemId="+json.nodeRef
                 +"&destination={destination}&mode=edit&submitType=json&formId=doclib-simple-metadata&showCancelButton=true&htmlid=template_x002e_documentlist_x002e_repository_x0023_default-editDetails-alf-id18",
                  method: Alfresco.util.Ajax.GET,
                  successCallback:
                  {
                fn :this.onTemplateLoaded,
                obj: this,
                scope:this

                  },
              scope: this,
                  execScripts: true
               });
      },
</code

Re: Alfresco form

rjohnson — Fri, 19 Jul 2013 12:12:58 GMT

OK

Lets take this one step at a time. First off, I don't quite know what you are expecting from your code, but it will not show a form. Your code will return the HTML of a form, which you will then have to display in your function onTemplateLoaded.

More specifically:-

When you are testing this, do you get to see your message "IN AJAX METHOD" in the browser?
Assuming you do, you should add a failure call back to your ajax call. So after your successCallback add something like


failureCallback: {
                   fn :this._formLoadFailure,
              obj: this,
              scope:this
                  },
             scope: this,
‍‍‍‍‍‍‍‍

Write the function _formLoadFailure which doesn't have to do anything much its just there to help debugging, so

_formLoadFailure: function myAjaxTest__formLoadFailure(response) {
var onlyToAllowABreak = "";
}

is fine.

Make sure that your function onTemplateLoaded is defined to expect the response parameter. e.g.

onTemplateLoaded: function myAjaxTest_onTemplateLoaded(response) {
….. some stuff
}

Now, load this up in your browser and make sure debugging is on (I use Firefox but they all have a debugger). Set a break point on the first line of _formLoadFailure and onTemplateLoaded, then execute your _callScript function (by clicking whatever) and see which function you end up in (_formLoadFailure or ontemplateLoaded). If you then examine the response variable you will see the error which you can fix or the HTML for the form which you should be able to display.

The way you are doing it can work, but its much harder that using s simpleDialog as I did in the code I posted for you, also, the form definition you are calling is the popup edit metadata form which you can make pop up by calling the relevant action rather than writing your own version.

Good luck

Bob

Re: Alfresco form

rutaveejshah — Thu, 25 Jul 2013 07:09:26 GMT

Thanks for your reply.
I want to open a edit metadata form after the upload is complete.
In your post you have written that edit metadata form can make pop up by calling the relevant action .
I don't know which action should i call for that.
Do you have any idea than please reply.
In which java script it is avilbale.
How can i call relevant action in cleent side java script?

Re: Alfresco form

rjohnson — Thu, 25 Jul 2013 10:26:21 GMT

OK. What you will need to do is extend / override the upload script. Essentially you will create your own version of it that will throw you into the edit metadata form once the upload is complete. Getting to the edit metadata page is just redirecting to a url with a noderef as a parameter.

Now, clearly you will either have to limit your people to uploading one document at a time or implement logic that says if they upload more than one document don't try and edit metadata.

You will do this mostly by customising the client side javascript on the "upload" action. Editing the metadata is actually as simple as redirecting to the edit-metadata url with the node ref of the document as a parameter (to see this go to document details and hover over or inspect element on the Edit metadata link). You may need to modify the server side webscript to pass back the noderef of the uploaded document(s) (it may do that already - I don't know). So need your client side upload javascript to say…..

If only one document uploaded redirect to the edit-metadata page and edit the metatdata for this node ref.

This is not especially complicated, but it is involved, and I cannot give you the code to do it because I have never made this modification personally.

You might look at the article below:-

http://www.ixxus.com/blog/2011/09/customising-upload-files-dialog-alfresco-share

It doesn't do what you want, but it is all about modifying the upload process so it will give you a good steer as to where everything you need to look at is located.

Best of luck.

Bob Johnson

Re: Alfresco form

rutaveejshah — Thu, 25 Jul 2013 13:32:03 GMT

Thanks Bob.
I am really thankful to you.
Now if in after upload the document can I call the web script at client side so that i would get response and i will make a form form that response.I have done do that.But problem is that when i add new content model the form is transparent with field.For original content type the form will work fine.So what should be the problem? My code for creating Ajax can be found from our previous conversation.
And for creating a new form i will use this code.


onTemplateLoaded: function(response)
      {
         var containerDiv = document.createElement("div");
         
         containerDiv.innerHTML = response.serverResponse.responseText;
         
         var panelDiv = Dom.getFirstChild(containerDiv);
         
         this.widgets.panel = Alfresco.util.createYUIPanel(panelDiv,
         {
            modal: true,
            draggable: false,
         constraintoviewport: true,
            fixedcenter: true,
            close: true,
            visible: false
         });
         
         this.widgets.cancelButton = Alfresco.util.createYUIButton(this, "cancel-button", this.onCancelButtonClick);
         
         this.widgets.okButton = Alfresco.util.createYUIButton(this, "ok-button",null,
         {
            type: "submit"
         });
         
         
         var createForm = new Alfresco.forms.Form(this.id + "-form");
         
         var elTitle = Dom.get(this.id + "-title"),
         
            elShortName = Dom.get(this.id + "-shortName");
         
         createForm.addValidation(elTitle, Alfresco.forms.validation.mandatory, null, "keyup", this.msg("validation-hint.mandatory"));
         createForm.addValidation(elTitle, Alfresco.forms.validation.length,
         {
            max: 256,
            crop: true
         }, "keyup");
         createForm.setAJAXSubmit(true,
         {
            successCallback:
            {
               fn: this.onSuccess,
               scope: this               
            },
            failureCallback:
            {
               fn: this.onFailure,
               scope: this
            }
         });
         createForm.setSubmitAsJSON(true);
         // We're in a popup, so need the tabbing fix
         createForm.applyTabFix();
         createForm.init();
         this.widgets.panel.show();
         
      }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

on sucess of the data i will do pop up that your document details updted sucessfully etc.
After upload the Edit properties form that i will see will see for custom content type will be attached in the attachment.
Kindly just check that file.
So if you find any mistek or any idea.
Please reply me..
Thank you..

Re: Alfresco form

rjohnson — Thu, 25 Jul 2013 15:01:45 GMT

This is a slightly worse version of the problem that I had when displaying the return HTML from a webscript in a simple dialog (which is in escence what you are doing here). The problem is a div wrapper / class name / css issue.

All I can suggest is that you look at the div structure / class names / css when displaying the standard content that works and look for the differences when you display your pop up.

Good luck

Bob Johnson

Re: Alfresco form

darkstar1 — Mon, 26 Aug 2013 17:44:00 GMT

I want to "Call a webscript that will return an input form (pop-up in screen) into which the user can key data and then post that data somewhere". The form is just a ftl file defined elsewhere and I can't find a simple example of this is share so far. I thought of following the manage aspects pop-up but it was too complicated and It's not what I need. I need something far simpler which will just pop-up the ftl of a webscript. Is there an example of this I can follow?
Thanks