topic Re: Calling forms from dashlets? in Alfresco Archive

Calling forms from dashlets?

zbennett — Tue, 16 Nov 2010 17:45:22 GMT

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

Re: Calling forms from dashlets?

mikeh — Tue, 16 Nov 2010 19:31:02 GMT

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

Re: Calling forms from dashlets?

zbennett — Tue, 16 Nov 2010 20:41:11 GMT

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…

Re: Calling forms from dashlets?

mikeh — Tue, 16 Nov 2010 21:04:25 GMT

"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

Re: Calling forms from dashlets?

zbennett — Tue, 16 Nov 2010 21:13:48 GMT

: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!

Re: Calling forms from dashlets?

zbennett — Tue, 16 Nov 2010 22:51:56 GMT

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!

Re: Calling forms from dashlets?

zbennett — Tue, 16 Nov 2010 23:08:26 GMT

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!

Re: Calling forms from dashlets?

mikeh — Wed, 17 Nov 2010 08:17:31 GMT

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

Re: Calling forms from dashlets?

zbennett — Fri, 19 Nov 2010 19:49:57 GMT

So I've been playing around with forms that already exist, such as doclib-common and doclib-simple-metadata. I can display these forms in the simple-dialog from my dashlet, but I keep getting a nasty error when I try to display a custom form.

My project has changed a little bit - now I'm just trying to create folders in the Data Dictionary with custom properties. To account for the custom properties, I created a model type called eagleroject, with a parent type of cm:folder. Whenever I try to display a form to create a new eagleroject node, I get the following error:

Internal Form Error: form with id of 'page_x002e_component-2-1_x002e_user_x007e_zbennett_x007e_dashboard-myDialog-form' could not be located, ensure the form is created after the form element is available.

I can't figure out what is causing the error - my code works fine when I set itemId to "cm:folder" instead of "eagleroject".

My code:


   // Test Code
   function runTest()
   {   
      
      var destination = "workspace://SpacesStore/7373e717-212e-4bf7-979f-3680f7c52b53";
      
      // Intercept before dialog show - not functional yet!
      var doBeforeDialogShow = function my_doBeforeDialogShow(p_form, p_dialog)
      {
         Alfresco.util.populateHTML(
            [ p_dialog.id + "-dialogHeader", "My Header" ]
         );
      };
      
      var templateUrl = YAHOO.lang.substitute(Alfresco.constants.URL_SERVICECONTEXT + "components/form?itemKind={itemKind}&itemId={itemId}&destination={destination}&mode={mode}&submitType={submitType}&showCancelButton=true",
      {
         itemKind: "type",
         itemId: "eagle:project",
         //itemId: "cm:folder",
         destination: destination,
         mode: "create",
         submitType: "json"
      });
      
      // Using Forms Service, so always create new instance
      var myDialog = new Alfresco.module.SimpleDialog("${args.htmlid}-myDialog");
      
      myDialog.setOptions(
      {
         width: "40em",
         templateUrl: templateUrl,
         actionUrl: null,
         destroyOnHide: true,
         doBeforeDialogShow:
         {
            fn: doBeforeDialogShow,
            scope: this
         },
         onSuccess:
         {
            fn: function myDialog_success(response)
            {
               Alfresco.util.PopupManager.displayMessage(
               {
                  text: "Success!"
               });
            },
            scope: this
         },
         onFailure:
         {
            fn: function myDialog_failure(response)
            {
               if (response)
               {
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: "Failed to complete task."
                  });
               }
               else
               {
                  Alfresco.util.PopupManager.displayMessage(
                  {
                     text: "Failed to communicate with server…or something"
                  });
               }
            },
            scope: this
         }
      }).show();
   ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Like I said, if I comment 'itemId: "eagleroject",' and uncomment '//itemId: "cm:folder",' then the form displays just fine, but for a new cm:folder instead of a new eagleroject (obviously).

For my custom model-type, I created eagle-model.xml and eagle-model-context.xml, and I added the form configuration to share-config-custom.xml. My definitions are as follows.

eagle-model.xml

<?xml version="1.0" encoding="UTF-8"?>

<model name="eagle:hiearchy" xmlns="http://www.alfresco.org/model/dictionary/1.0">
   
   <description>Eagle Hierarchy</description>
   <author>Zach Bennett</author>
   <version>1.0</version>

   <!– Imports are required to allow references to definitions in other models –>
   <imports>
        <!– Import Alfresco Dictionary Definitions –>
      <import uri="http://www.alfresco.org/model/dictionary/1.0" prefix="d"/>
      <!– Import Alfresco Content Domain Model Definitions –>
      <import uri="http://www.alfresco.org/model/content/1.0" prefix="cm"/>
   </imports>
   
   <namespaces>
      <namespace uri="eagle.hiearchy" prefix="eagle"/>
   </namespaces>

   <!– Type and Aspect definitions go here –>
   <types>
      <type name="eagle:project">
         <title>Eagle Project Folder</title>
         <parent>cm:folder</parent>
         <properties>
            <property name="cm:name">
               <type>d:text</type>
            </property>
            <property name="cm:title">
               <type>d:text</type>
            </property>
            <property name="cm:description">
               <type>d:text</type>
            </property>
            <property name="eagle:status">
               <type>d:text</type>
            </property>
            <property name="eagle:projectorid">
               <type>d:text</type>
            </property>
            <property name="eagle:startDate">
               <type>d:datetime</type>
            </property>
            <property name="eagle:endDate">
               <type>d:datetime</type>
            </property>
         </properties>
      </type>
    </types>

</model>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

eagle-model-context.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE beans PUBLIC '-//SPRING//DTD BEAN//EN' 'http://www.springframework.org/dtd/spring-beans.dtd'>

<beans>

    <!– Registration of new models –>
    <bean id="extension.dictionaryBootstrap" parent="dictionaryModelBootstrap" depends-on="dictionaryBootstrap">
        <property name="models">
            <list>
                <value>alfresco/extension/eagle-model.xml</value>
            </list>
        </property>
    </bean>

</beans>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and finally, my form configuration in share-config-custom.xml

   <!– eagle:project type (creating nodes) –>
   <config evaluator="model-type" condition="eagle:project">
      <forms>
         <!– Document Library Common form –>
         <form>
            <field-visibility>
               <show id="cm:name" />
               <show id="cm:title" force="true" />
               <show id="cm:description" force="true" />
               <show id="eagle:status" />
               <show id="eagle:projectorid" />
               <show id="eagle:startDate" />
               <show id="eagle:endDate" />
            </field-visibility>
            <appearance>
               <field id="cm:title">
                  <control template="/org/alfresco/components/form/controls/textfield.ftl" />
               </field>
               <field id="cm:name">
                  <control template="/org/alfresco/components/form/controls/textfield.ftl" />
               </field>
               <field id="cm:description">
                  <control template="/org/alfresco/components/form/controls/textarea.ftl" />
               </field>
               <field id="eagle:status">
                  <control template="/org/alfresco/components/form/controls/textfield.ftl" />
               </field>
               <field id="eagle:projectorid">
                  <control template="/org/alfresco/components/form/controls/textfield.ftl" />
               </field>
               <field id="eagle:startDate">
                  <control template="/org/alfresco/components/form/controls/date.ftl" />
               </field>
               <field id="eagle:endDate">
                  <control template="/org/alfresco/components/form/controls/date.ftl" />
               </field>
            </appearance>
         </form>
      </forms>
   </config>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any thoughts on what is preventing my dialog element from being created?

Re: Calling forms from dashlets?

zbennett — Fri, 19 Nov 2010 20:50:48 GMT

I just found a lovely error in my logs that could shine some light on this, but I'm still trying to figure out what to do about it.

ERROR [scripts.forms.FormUIGet] org.alfresco.service.namespace.NamespaceException: Namespace prefix eagle is not mapped to a namespace URI

I suspect that mapping the "eagle" prefix to a namespace URI will be a step in the right direction. I'm off to discover how to do that right now!

Re: Calling forms from dashlets?

taiko3615 — Fri, 06 Sep 2013 11:49:23 GMT

Hi zbennett 🙂

Do you have a working example of your first proof of concept? (because I want to do something similar)

Thanks !

Re: Calling forms from dashlets?

yascorp — Mon, 14 Apr 2014 07:07:31 GMT

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>

Re: Calling forms from dashlets?

aaditvmajmudar — Tue, 15 Apr 2014 04:51:15 GMT

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,

Re: Calling forms from dashlets?

yascorp — Tue, 15 Apr 2014 05:29:40 GMT

Yes I include it.
The probleme is this internal error in "simple-dialog.js", and I need to be sure if my js is correct and able to display my popUp.
The most examples I see build the form from "doBeforeFormValidation" method, but I want to build it from my calling templateUrl.
Thanks,