Question

I am trying to create a simple Alfresco dashlet with an edit button enabled on the title bar. Unfortunately, I can not figure out how to get the edit button to actually display on the title bar.

Here is what I have so far:

dashlet desc file (.desc.xml)

<webscript>
   <shortname>Sample</shortname>
   <description>Displays a Sample dashlet</description>
   <family>dashlet</family>
   <url>/mycompany/components/dashlets/sample-dashlet</url>
</webscript>

My main freemarker template file (.ftl)

<script type="text/javascript">
    //<![CDATA[
    var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({
        "componentId": "${instance.object.id}",
        "siteId": "${page.url.templateArgs.site!""}",
        "title": "${msg("header")}"
    }).setMessages(${messages});
    new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");

    var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
    editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true);

    new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({
        actions: [{
            cssClass: "edit",
            eventOnClick: editDashletEvent,
            tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
        }]
    });
    //]]>
</script>

<div class="dashlet-1"> 
 <div> Test </div>
</div>

It seems as if the problem must be in my configuration somewhere, but I can’t find it. Can anyone point me in the right direction, please?

Answer 1

If you want a working example of a very simple dashlet that is set up to be configurable in this way, see http://code.google.com/p/alfresco-get-latest-document. This blog post sets up the basic functionality: http://ecmarchitect.com/archives/2012/05/08/1592. And this blog post expands on that to make the initial dashlet configurable: http://ecmarchitect.com/archives/2012/05/15/1599.

In comparing your FTL with mine, I’m wondering if your div classes/id need to follow this pattern:

  <div class="dashlet getlatestdoc">
  <div id="getlatestdoc_title" class="title">
    ${title}
  </div>

Otherwise, how will the edit button know where to render itself?