topic Re: Need to show help button on title bar of dashlet in alfresco in Alfresco Archive

Need to show help button on title bar of dashlet in alfresco

janaka1984 — Fri, 13 Mar 2015 10:41:51 GMT

Even if I use following line on FTL file new Alfresco.widget.DashletTitleBarActions("args.htmlid").setOptions({"actions":[{"bubbleOnClick":{"message":'${msg("dashlet.help")}'},"cssClass":"help","tooltip":'${msg("dashlet.help.tooltip")}'}]}); or=======================================================

Re: Need to show help button on title bar of dashlet in alfresco

rjohnson — Fri, 13 Mar 2015 10:57:37 GMT

Can you post your dashlets html.ftl. What you have in the controller looks correct (and always works for me).

Re: Need to show help button on title bar of dashlet in alfresco

janaka1984 — Fri, 13 Mar 2015 12:02:59 GMT

thanks for immediate reply

this is my main() of controller

function main()
{

   var dashletResizer = {
            id : "DashletResizer",
            name : "Alfresco.widget.DashletResizer",
            initArgs : ["\"" + args.htmlid + "\"", "\"" + instance.object.id + "\""],
            useMessages: false
         };

   model.widgets = [dashletResizer];

}

main();

=======================================================================================================

this is my FTL code

<#assign id = args.htmlid>
<#assign jsid = args.htmlid?js_string>

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

     new Test.dashlet.MyResult("${args.htmlid}").setOptions(
     {
        "componentId": "${instance.object.id}",
        "title": "<#if args.title?exists>${args.title?js_string}</#if>"
     }).setMessages(${messages});

var dashletTitleBarActions = new Alfresco.widget.DashletTitleBarActions("${id}").setOptions(
   {
      actions:
      [
         {
            cssClass: "help",
            bubbleOnClick:
            {
               message: "Information about dashlet"
            },
            tooltip: "Display help for this dashlet"
         }
      ]
   });
</script>

<@markup id="widgets">
   <@createWidgets group="dashlets"/>
</@>

<@markup id="html">
   <@uniqueIdDiv>
      <#assign el=args.htmlid?html>
      <<div class="dashlet site-profile">
        <div class="title" id="${el}-title"><span id="${el}-title-msg">${title!msg("dashboard.title")}</span>
          <span id='results'></span>
        </div>>
        <div class="toolbar flat-button">

thanks

janaka

Re: Need to show help button on title bar of dashlet in alfresco

rjohnson — Fri, 13 Mar 2015 12:47:11 GMT

Here is an example of a dashlet I have written that has the ? on the title bar.

Controller fg-lga-related-tickets.get.js


/**
 * Employee Comments component GET method
 */

function main()
{
   if(args.nodeRef) {
      model.nodeRef = args.nodeRef;
   } else {
      model.nodeRef = "none";
   }
   // Component definition
   var relatedTickets = {
      id: "FGLGARelatedTicketsList",
      name: "FarthestGate.dashlet.RelatedTicketsList",
      assignTo : "fgLgaRelatedTicketsList",                   // Need to reference the generated JS object
      options: {
         componentId : instance.object.id,
         nodeRef: model.nodeRef
      }
   };

    // Dashlet title bar component actions and resizer
    var actions = [];
    actions.push({
      cssClass: "help",
      bubbleOnClick:
      {
         message: msg.get("dashlet.help")
      },
      tooltip: msg.get("dashlet.help.tooltip")
    });
   
    var dashletResizer = {
      id: "DashletResizer",
      name: "Alfresco.widget.DashletResizer",
      initArgs: ['"' + args.htmlid + '"', '"' + instance.object.id + '"'],
      useMessages: false
    };
   
    var dashletTitleBarActions = {
      id: "DashletTitleBarActions",
      name: "Alfresco.widget.DashletTitleBarActions",
      useMessages: false,
      options: {
         actions: actions
      }
    };
    model.widgets = [relatedTickets, dashletResizer, dashletTitleBarActions];
}

main();

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

The mark up fg-lga-realated-tickets.get.html.ftl


<@markup id="css" >
   <#– CSS Dependencies –>
   <@link rel="stylesheet" type="text/css" href="${url.context}/res/farthest-gate/components/dashlets/fg-lga-related-tickets/fg-lga-related-tickets.css" group="dashlets"/>
</@>

<@markup id="js">
   <#– JavaScript Dependencies –>
   <@script type="text/javascript" src="${url.context}/res/farthest-gate/components/dashlets/fg-lga-related-tickets/fg-lga-related-tickets.js" group="dashlets"/>
</@>

<@markup id="widgets">
   <@createWidgets group="dashlets"/>
</@>

<@markup id="html">
   <@uniqueIdDiv>
      <div class="dashlet related-tickets-list">
         <div id="${args.htmlid}-related-tickets-title" class="title">${msg("header.title","","s","")}</div>
         <div id="${args.htmlid}-related-tickets-list" class="body scrollableList" <#if args.height??>style="height: ${args.height}px;"</#if>></div>
      </div>
   </@>
</@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and the descriptor fg-lga-realated-tickets.get.desc.xml


<webscript>
  <shortname>Ticket related tickets</shortname>
  <description>Displays other tickets for the same vehicle. </description>
   <family>dashlet</family>
  <url>/farthest-gate/components/fg-lga-related-tickets/fg-lga-related-tickets</url>
</webscript>
‍‍‍‍‍‍‍‍

This creates a working dashlet with the help & resize. The data is loaded via ajax from the browser once the dashlet is painted.