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.

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

janaka1984

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
===============================================================================================================================
new Alfresco.widget.DashletTitleBarActions("${id}").setOptions(
   {
      actions:
      [
         {
            cssClass: "help",
            bubbleOnClick:
            {
               message: "Information about dashlet"
            },
            tooltip: "Display help for this dashlet"
         }
      ]
   });

It can not show help (?) button on title bar. Please tell me how to show "help" with tool tip.

thanks

Find more posts tagged with

Comments

rjohnson

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

janaka1984

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

source code.txt.zip

rjohnson

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.