AnsweredAssumed Answered

WAB Dev Edition 2.7: How can I add a dropdown menu to header widget controller?

Question asked by ftonini_msugis on Apr 20, 2018
Latest reply on Apr 24, 2018 by rscheitlin

I am using WAB2.7 Dev Edition as a template, and am trying to add a dropdown menu item to the header widget controller element, where all the links are listed. For example (see image below), I would like users to click on the "sample data" link and have a list of N items in a drop-down menu fashion.

 

 

Sample Data

|

|

Sample Data1  (link)

Sample Data2  (link)

...

 

For CSS, I can probably re=use some of the jimu.css style (which one?) but for the functionality, I am looking inside the \themes\FoldableTheme\widgets\HeaderController\Widget.js file:

 

array.forEach(links, function(link) {

   if (link.label.toUpperCase() === 'SAMPLE DATA'){
      html.create('a', {
         href: link.url,
         rel: 'noopener noreferrer',
         innerHTML: utils.sanitizeHTML(link.label),
         'class': "jimu-link jimu-align-leading jimu-leading-margin1",
         style: {
            lineHeight: this.height + 'px'
         }
      }, this.dynamicLinksNode);

   }

}, this);

I am aware the customization has to happen here, but I am not sure how to go about it...I would normally add a <div> if I was writing it from scratch, but within the Widget.js, I want to make sure I can do this using the appropriate tags and functions.

Outcomes