nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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/5252128f-85be-4c4d-a9c4-7a02fa7fc5c0&destination={destination}&mode=edit&submitType=json&formId=doclib-simple-metadata&showCancelButton=true&htmlid=template_x002e_documentlist_x002e_documentlibrary-editDetails‍

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.

Find more posts tagged with

Comments

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">
&nbsp;&nbsp;&nbsp;function formTest()
&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var myForm = new Alfresco.FormUI(
&nbsp;&nbsp;&nbsp;}
</script>

<div class="dashlet">
&nbsp;&nbsp;&nbsp;<div class="title">${msg("dashlet.title")}</div>
&nbsp;&nbsp;&nbsp;<div class="body scrollableList">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:formTest();">formTest()</a>
&nbsp;&nbsp;&nbsp;</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

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

zbennett

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 eagle

roject, with a parent type of cm:folder. Whenever I try to display a form to create a new eagle

roject 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 "eagle

roject".

My code:

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

Like I said, if I comment 'itemId: "eagle

roject",' and uncomment '//itemId: "cm:folder",' then the form displays just fine, but for a new cm:folder instead of a new eagle

roject (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">
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; <description>Eagle Hierarchy</description>
&nbsp;&nbsp; <author>Zach Bennett</author>
&nbsp;&nbsp; <version>1.0</version>

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

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

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

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

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

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

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

zbennett

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!

taiko3615

Hi zbennett 🙂

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

Thanks !

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,

yascorp

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,