Calling forms from dashlets?

[zbennett]

Hi all,

My end-goal is to create a dashlet that displays certain sites in a hierarchy through the use of custom aspects.  My partner is working on the dashlet's appearance, while I'm creating and managing the custom aspects.  So far we're doing pretty well - the dashlet is well underway and I have a decent grasp on creating custom aspects.  I'm having a really difficult time understanding the Forms Engine, though.

I have a lot more to learn before I start creating custom forms, but in the meantime, we want to make our dashlet display a form that already exists.  For example, I'm trying to create a proof of concept that will display the doclib-simple-metadata form for a hard-coded node when the user clicks a button in the dashlet.

The Firebug console shows the following when I click Edit Metadata on a particular folder in the document library:

GET http://192.168.100.38/share/service/components/form?itemKind=node&itemId=workspace://SpacesStore/525...‍

Any input would be most appreciated!  Right now I'm just stabbing around in the dark and hoping that I hit something!

PS - I'm willing to change my proof of concept if anyone has suggestions.  I just want a working example of a dashlet that displays a form, in a modal pop-up window, using the Forms Engine.

[mikeh]

You need to bring in all the client-side assets that the Form Service needs - look for a "form.get.head.ftl" webscript header that you can #include in your own webscript header, e.g.

<#include "../form/form.get.head.ftl">‍

Then examine the code in simple-dialog.js which knows how to handle Forms loaded via AJAX.

Thanks,
Mike

[zbennett]

Thanks Mike!

I found and included form.get.head.ftl and I'm digging through simple-dialog.js right now… I'm still not sure how to get started though.

Will my dashlet need to work with simple-dialog.js directly, or am I just examining it for clues?

I've written the following into my dashlet so far, but I don't know what parameters to use in the form constructor - I'm not even sure this is close to correct.

<script type="text/javascript">
   function formTest()
   {   
      var myForm = new Alfresco.FormUI(
   }
</script>

<div class="dashlet">
   <div class="title">${msg("dashlet.title")}</div>
   <div class="body scrollableList">
      <a href="javascript:formTest();">formTest()</a>
   </div>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

My gut is telling me that I'm not approaching this the right way, but I can't even test it without knowing what parameters I would use… 

[mikeh]

"It depends" 

Do you want the form to appear inline, or as a pop-up? The simple-dialog pattern is good for a pop-up. Look at "onNewFolder" in documentlibrary/toolbar.js or "onActionDetails" in documentlibrary/actions.js (the latter is slightly more complicated) for examples on how to generate a form-based pop-up relatively simply.

If it's inline you want, take a look at workflow/start-workflow.js for how that works.

Thanks,
Mike

[zbennett]

:mrgreen: onNewFolder in documentlibrary/toolbar.js is an excellent example of what I'm looking for!  Thanks very much for the tip - now I have some code to tear apart!

[zbennett]

Mike, your suggestion rocked!

I almost have my proof of concept, but doBeforeDialogShow is giving me some issues.

Much like onNewFolder in documentlibrary/toolbar.js, I have this in my code:

// Intercept before dialog show
var doBeforeDialogShow = function my_doBeforeDialogShow(p_form, p_dialog)
{
   Dom.get(p_dialog.id + "-dialogTitle").innerHTML = "My Title";
   Dom.get(p_dialog.id + "-dialogHeader").innerHTML = "My Header";
};

… removed for readability …

myDialog.setOptions(
{
   width: "33em",
   templateUrl: templateUrl,
   actionUrl: null,
   destroyOnHide: true,
   doBeforeDialogShow:
   {
      fn: doBeforeDialogShow,
      scope: this
   },
   
   … removed for readability …
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As is, my function fires and my GET request is sent and processed successfully (<3 Firebug), but the pop-up doesn't appear.  When I comment the lines that define doBeforeDialogShow in myDialog.setOptions, the pop-up will appear.  The major drawback to this is that the dialog title and header never get set, so the border around the pop-up is incredibly small (and I don't get to have a title or a header!).  Have you ever run into an issue like this?  If so, do you know of a good way to resolve it?

Thanks in advance!

[zbennett]

To answer my own question…

I replaced the Dom.get(p_dialog.id + "…").innerHTML = "…"; with the following:

Alfresco.util.populateHTML(
       [ p_dialog.id + "-dialogTitle", "My Title" ]
);‍‍‍‍

It's working like a charm now!  Thanks for all of your help!

[mikeh]

You probably need to alias Dom to YAHOO.util.Dom, but the "populateHTML" method is a safer way as it double-checks the DOM element is present.

Glad you're up-and-running!

Thanks,
Mike

[yascorp]

Hi, I'm trying to do similar thing but I'm facing an error, and I can't go further, what should I do ?
The error is reffer to simple-dialog.js file :

Uncaught TypeError: undefined is not a function
Uncaught TypeError: Cannot read property 'attributes' of null (attributes in "simple-dialog.js")

Please HELP ME it's very URGENT
Thanks & Regards

list-news.js
<javascript>
if (typeof custom == "undefined" || !custom){
   var custom = {};
   custom.dashlet = {};
}

(function() {
   
   var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;
   
   var $html = Alfresco.util.encodeHTML,
       $combine = Alfresco.util.combinePaths;
   
   custom.dashlet.list_news = function list_news_constructor(htmlId) {
      custom.dashlet.list_news.superclass.constructor.call(this, "custom.dashlet.list_news", htmlId);
      this.configDialog = null;
      
      //Register the component   
      Alfresco.util.ComponentManager.register(this);
      
      //Load YUI components
      Alfresco.util.YUILoaderHelper.require(["button", "container", "datasource", "datatable", "paginator", "json", "history",
                                             "tabview"], this.onComponentsLoaded, this);      
      return this;
   };
   
   YAHOO.extend(custom.dashlet.list_news, Alfresco.component.Base,
   {
      options:
         {   
            componentId : "",
            title : "",
            description : "",
            category : ""
         },
         
      configDialog: null,
         
      setOptions: function list_news_setOptions(obj)
            {
               this.options = YAHOO.lang.merge(this.options, obj);
               return this;
            },
           
      onComponentsLoaded: function list_news_onComponentsLoaded()
            {
               Event.onContentReady(this.id, this.onReady, this, true);
            },
           
      //widgets: {},
         
      onReady: function list_news_onReady() {
         var me = this;
                        
         // Add click handler to config news link that will be visible if user is site manager.
         var configFeedLink = Dom.get(this.id + "-config-link");           
          Event.addListener(configFeedLink, "click", this.onConfigListNewsClick, this, true);  
      },
      
      onConfigListNewsClick : function list_news_onConfigListNewsClick(e) {  
         
         var actionUrl = Alfresco.constants.URL_SERVICECONTEXT + "modules/list-news/config/" +
                     encodeURIComponent(this.options.componentId);
         Event.stopEvent(e);
         
         /*function computeRedirectUrl(){
            var scope = "window.parent.Alfresco.util.ComponentManager.get('" + this.id + "')";
            var successCallback = "window.parent.Alfresco.util.ComponentManager.get('" + this.id + "-configDialog')" +
                  ".options.onSuccess.fn";
            var failureCallback = "window.parent.Alfresco.util.ComponentManager.get('" + this.id + "-configDialog')" +
                  ".options.onFailure.fn";
            var params = {
                        successCallback: successCallback,
                        successScope: scope,
                        failureCallback: failureCallback,
                        failureScope: scope
            }
            var url = Alfresco.constants.URL_SERVICECONTEXT + "modules/list-news/config?";
            url += "params=" + JSON.stringify(params);
            return url;
         }*/

         
         var doSetupFormsValidation = function list_news_doSetupFormsValidation(form){
            var elem = Dom.get(this.configDialog.id + "-title");
                if (elem) {
                   elem.value = this.options.title;
                }

                var elem = Dom.get(this.configDialog.id + "-description");
                if (elem) {
                   elem.value = this.options.description;
                }

                var elem = Dom.get(this.configDialog.id + "-category");
                if (elem) {
                   elem.value = this.options.category;
                }
         };
            
            //Name: mandatory            
            //form.addValidation(this.id + "_prop_ca_title", Alfresco.forms.validation.mandatory, null, "keyup");
                                                                           
            //form.addValidation(this.configDialog.id + "-title", Alfresco.forms.validation.nodeName, null, "keyup");            
            //form.setShowSubmitStateDynamically(true, false);

            /*Dom.get(this.configDialog.id + "-title").value = this.options.titleStr;
               Dom.get(this.configDialog.id + "-description").value = this.options.descriptionStr;
               Dom.get(this.configDialog.id + "-category").value = this.options.categoryStr;*/         
         
         var doBeforeDialogShow = function list_news_doBeforeDialogShow(p_form, p_dialog) {
            
            Alfresco.util.populateHTML([ p_dialog.id + "-configDialog", "My Title" ]);
               //Dom.get(p_dialog.id + "-configDialog").value = this.options.componentId;   
         };
                        
         var templateUrl = YAHOO.lang.substitute(Alfresco.constants.URL_SERVICECONTEXT +
               "components/form?itemKind={itemKind}&itemId={itemId}&htmlid={htmlid}&destination={destination}" +
               "&mode={mode}&submitType={submitType}&formId={formId}&showCancelButton=true",
               {      
                  itemKind: "type",
                  itemId: "ca:entryFormNews",
                  htmlid: "div",               
                  destination: destination,
                  mode: "create",
                  submitType: "json",//multipart
                  formId: "custom-metadata"
                  //redirect: computeRedirectUrl()
               });
         
         if(!this.configDialog) {
            
            this.configDialog = new Alfresco.module.SimpleDialog("${args.htmlid}-configDialog").setOptions(
                  {
                     width: "33em",
                     templateUrl: templateUrl,
                     actionUrl: null,
                     destroyOnHide: true,
                     
                     doBeforeDialogShow:
                        {
                           fn: doBeforeDialogShow,
                           scope: this                        
                        },
                     
                     doSetupFormsValidation:
                        {
                           fn: doSetupFormsValidation,
                           scope: this                        
                        },

                     onSuccess:
                     {
                        fn: function list_news_onConfig_success(response) {   
                           
                           var div = Dom.get(this.id + "-form");
                                 div.innerHTML = response.serverResponse.responseText;
                                 var form = Dom.getFirstChildBy(div, function(node) {                                                                        
                                     return (node.tagName.toUpperCase() == "FORM");                                    
                                     });
                                 if (form) {
                                    if (form.attributes["prop_ca_title"]) {                                      
                                       var testLogin = form.attributes["title"].value;
                                    }

                                    if (form.attributes["description"]) {
                                        var testPass = form.attributes["description"].value;
                                    }

                                    if (form.attributes["category"]) {
                                       var testPass = form.attributes["category"].value;
                                    }

                                 }
                           /*var obj = response.json;
                           if(obj) {
                                        this.options = YAHOO.lang.merge(this.options, obj);
                           }
                           var result = eval('(' + obj + ')');*/

                           Alfresco.util.PopupManager.displayMessage(
                                 {
                                    text: this.msg("message.success")
                                 });
                           Alfresco.util.Ajax.request({
                              url: Alfresco.constants.URL_SERVICECONTEXT + "modules/list-news/config/",
                              dataObj: templateUrl,
                              method: Alfresco.util.Ajax.GET,
                              successCallback: {
                                  fn :this.onComponentsLoaded,
                                  obj: this,
                                  scope:this            
                                    },
                               
                                    failureCallback: {
                                       fn :this._formLoadFailure,
                                       obj: this,
                                       scope:this
                                    },
                                   
                                    scope: this,
                                    execScripts: true
                           });
                           },
                        scope: this         
                     },
                     onFailure:
                     {
                        fn: function list_news_onConfig_failure(response) {
                           Alfresco.util.PopupManager.displayMessage(
                                 {
                                    text: this.msg("message.failure")
                                 });
                           },
                        scope: this
                     }
                  });            
         } else {
            this.configDialog.setOptions(
                     {
                        actionUrl: actionUrl
                     });
         }
         this.configDialog.setOptions(
               {
                  actionUrl: actionUrl,
                  clearForm: true
               }).show();
         return this.configDialog;
         
      }      
   });
})();
</javascript>


list-news.get.html.ftl
<javascript>
<#assign el=args.htmlid?js_string>

<script type="text/javascript">//<![CDATA[

(function() {
   var list_news = new custom.dashlet.list_news("${args.htmlid}").setOptions(
         {
         "componentId": "${instance.object.id}",
             "title": "${title}",
             "description": "${description}",
             "category": "${category}",
         }).setMessages(${messages});

new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");
new Alfresco.widget.DashletTitleBarActions("${args.htmlid?html}").setOptions(
    {
         actions:
         [   
                        {
               cssClass: "help",
               bubbleOnClick:
               {
                  message: "${msg("dashlet.help")?js_string}"
               },
               tooltip: "${msg("dashlet.help.tooltip")?js_string}"
            }
         ]
     });    
})();
//]]></script>

<div class="dashlet list_news">
    <div id="list_news_title" class="title">${msg("header.list-news")}</div>

    <div class="toolbar flat-button">
      <a id="${el}-config-link" class="configure theme-color-1" href="#">${msg("config")}</a>
    </div>     
    <div class="body scrollablePanel" <#if args.height??>style="height: ${args.height}px;"</#if>>
       <div class="detail-list-item first-item last-item">
          <h2><span id="${el}-title">${title}</span></h2>
      <p><span id="${el}-description">${description}</span></p>
          <p><span id="${el}-category">${category}</span></p>

        </div>  
    </div>
</div>
</javascript>

[aaditvmajmudar]

Just check by debugging you JS file in browser that are you able to get value of "Alfresco.module.SimpleDialog" ?

Have you included dialog JS file in you ftl file?

Thanks,