Using dijit/DropDownMenu in a custom WAB widget

BryceWhiteside — Mon, 25 Mar 2019 20:43:49 GMT

I'm trying to use dijit/DropDownMenu in a custom WAB widget but can't seem to get it to work. Can anyone point me to some sample code or API docs? Thank you!

Re: Using dijit/DropDownMenu in a custom WAB widget

RobertScheitlin__GISP — Mon, 25 Mar 2019 21:20:53 GMT

Bryce,

You are probably missing something simple in your code. Can you post your attempt to use the dijit inside your widget?

Re: Using dijit/DropDownMenu in a custom WAB widget

BryceWhiteside — Mon, 25 Mar 2019 21:28:39 GMT

Hi Robert,

Thanks for replying. Here is my Widget.js:

define(
['dojo/_base/declare', 
'dojo/parser',
'dijit/DropDownMenu', 
'dijit/MenuItem', 
'dijit/MenuSeparator', 
'dijit/PopupMenuItem',
'jimu/BaseWidget',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.3.1.min.js, https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'
],
function(
declare, 
parser,
DropDownMenu,
MenuItem,
MenuSeparator,
PopupMenuItem,
BaseWidget, 
$,
){
    return declare(BaseWidget, {
        
        baseClass: 'jimu-widget-pagwidget',
        
        startup: function () {
            var map = this.map;

            $('#txtTest').text('Dijit Test');       

        }
    });
});

And here is my Widget.html:

<div>
    <div id="txtTest"></div> 
 
 <div data-dojo-type="dijit/DropDownMenu" id="navMenu">
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut',
            onClick:function(){alert('cut!')}">Cut</div>
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy',
            onClick:function(){alert('copy!')}">Copy</div>
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste',
            onClick:function(){alert('paste!')}">Paste</div>
        <div data-dojo-type="dijit/MenuSeparator"></div>
        <div data-dojo-type="dijit/PopupMenuItem">
            <span>Action</span>
            <div data-dojo-type="dijit/DropDownMenu" id="submenu2">
                <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('nested #1!')}">Nested #1</div>
                <div data-dojo-type="dijit/MenuItem" onclick="alert('nested #2!')">Nested #2</div>
            </div>
        </div>
    </div>
</div>

I took the example from dijit/DropDownMenu — The Dojo Toolkit - Reference Guide

Thanks for your help,

Bryce

Re: Using dijit/DropDownMenu in a custom WAB widget

BryceWhiteside — Mon, 25 Mar 2019 22:35:35 GMT

Hi again. Turns out I had to call parser.parse() in the startup function. Problem solved. Thanks for your time.

topic Using dijit/DropDownMenu in a custom WAB widget in ArcGIS Web AppBuilder Questions

Using dijit/DropDownMenu in a custom WAB widget

Re: Using dijit/DropDownMenu in a custom WAB widget

Re: Using dijit/DropDownMenu in a custom WAB widget

Re: Using dijit/DropDownMenu in a custom WAB widget