Latest Contributions by WilliamMiller4

Success!!! Thank you Robert! Gratefully, William ... View more

Hi Robert, In step 6c, the instructions are to "Use SimpleBorderPanel as the default panel in widgetPool." ESRI/ArcGIS might want to change their screenshot in step 7 to reflect this, as well as display the Legend widget, which the user is instructed to click, and not the Basemap Gallery. Thanks again for looking at this Robert. William ... View more

Hi Robert, The code is are the same... Are your panels Simple Border Panels:                                  Or Foldable(?) Panels: I'm having trouble with the Simple Border Panels. Does it matter that I'm using Web AppBuilder 2.0 and not 2.1? Thanks again and sorry to be such a bother. William ... View more

Hi Robert, Thanks for your help with the groupTooltips issue. That part is working. Unfortunately, while the group widget "closes", the solo widgets stay visible after a second click (the first click for opening them). The following snippet shows where I think the issue might be located in the code. this.own(on(iconNode, 'click', function() {   // remove active state from any icon node   query('.jimu-state-active', self.domNode).removeClass('jimu-state-active');   // close panel ////self.panelManager.closePanel(self.openedWidgetId + '_panel');            // uncomment this line and the group widget closes   // close group tooltips   query('.group-tooltip').removeClass('show');   // if clicked on an active icon node   if(self.activeIconNode === this) { //////self.panelManager.closePanel(iconConfig.id + '_panel');               // uncomment this line and the solo widgets close     self.activeIconNode = null;     return;   } Uncomment both lines 5 and 11 and only the group widget "closes." Again, any help would be greatly appreciated. William ... View more

Now I'm having trouble with step 12 in the process. However, if I add the About widget to the SidebarController, the following warnings and error appear in the console:     Warning: no uploadUrl provided.      FileUploader.js:32     this.movie.PercentLoaded() failed TypeError: this.movie.PercentLoaded is not a function(…)      main.js:2867           x 17     Uncaught Error: Building SWF failed.      main.js:2867 Even with these errors and warning, everything seems to be working through step 11 (code below). define([   'dojo/_base/declare',   'dojo/on',   'dojo/query',   'dojo/dom-class',   'jimu/PoolControllerMixin',   'jimu/BaseWidget'   ], function(     declare,     on,     query,     domClass,     PoolControllerMixin,     BaseWidget     ) {   //To create a widget, you need to derive from BaseWidget.   return declare([BaseWidget, PoolControllerMixin], {     // DemoWidget code goes here         //please note that this property is be set by the framework when widget is loaded.     //templateString: template,         baseClass: 'jimu-widget-sidebar-controller jimu-main-background',         allConfigs: [],         openedWidgetId: '',         activeIconNode: null,         postCreate: function() {       this.inherited(arguments);       console.log('postCreate');             this.allConfigs = this.getAllConfigs();       for(var i = 0; i < this.allConfigs.length; i++) {         this._createIconNode(this.allConfigs);       }     },         startup: function() {       this.inherited(arguments);       console.log('startup');     },         _createIconNode: function(iconConfig, targetNode) {       var iconNode, iconImage;       if(!targetNode) targetNode = this.containerNode;       iconNode = document.createElement('DIV');       iconNode.className = 'icon-node';       if(iconConfig.icon) {         iconImage = document.createElement('img');         iconImage.src = iconConfig.icon;       }             if(iconConfig.label) {         iconNode.title = iconConfig.label;         iconImage.alt = iconConfig.label;       }       iconNode.appendChild(iconImage);             targetNode.appendChild(iconNode);       // check if the widget is set to open at start       if (iconConfig.openAtStart) {          // check if the icon is a group icon         this.activeIconNode = iconNode;         domClass.add(iconNode, 'jimu-state-active');         this._showWidgetContent(iconConfig);       }             var self = this;       this.own(on(iconNode, 'click', function() {         // remove active state from any icon node         query('.jimu-state-active', self.domNode).removeClass('jimu-state-active');         // close panel         // close group tooltips         // if clicked on an active icon node         if(self.activeIconNode === this) {           self.panelManager.closePanel(iconConfig.id + '_panel');           self.activeIconNode = null;           return;         }                 // show panel         domClass.add(this, 'jimu-state-active');         self._showWidgetContent(iconConfig);         self.activeIconNode = this;       }));       return iconNode;     },         _showWidgetContent: function(iconConfig) {       if(this.openedWidgetId) {         this.panelManager.closePanel(this.openedWidgetId + '_panel');       }       var self = this;       this.panelManager.showPanel(iconConfig).then(function(widget) {         // the panel displays successfully         self.own(on.once(widget, 'close', function () {           domClass.remove(self.activeIconNode, 'jimu-state-active');           self.activeIconNode = null;         }));       }, function (err) {         // the panel failed to display       });       this.openedWidgetId = iconConfig.id;     }   }); }); After I add code for step 12 (code below), I get an error if I try to create a group (error:TypeError: Cannot read property '_29' of undefined at _createIconNode Line 79). Even if I don't create a group, the widgets will no longer close. define([   'dojo/_base/declare',   'dojo/on',   'dojo/query',   'dojo/dom-class',   'jimu/PoolControllerMixin',   'jimu/BaseWidget'   ], function(     declare,     on,     query,     domClass,     PoolControllerMixin,     BaseWidget     ) {   //To create a widget, you need to derive from BaseWidget.   return declare([BaseWidget, PoolControllerMixin], {     // DemoWidget code goes here         //please note that this property is be set by the framework when widget is loaded.     //templateString: template,         baseClass: 'jimu-widget-sidebar-controller jimu-main-background',         allConfigs: [],         openedWidgetId: '',         activeIconNode: null,         groupTooltips: {},             postCreate: function() {       this.inherited(arguments);       console.log('postCreate');             this.allConfigs = this.getAllConfigs();       for(var i = 0; i < this.allConfigs.length; i++) {         this._createIconNode(this.allConfigs);       }     },         startup: function() {       this.inherited(arguments);       console.log('startup');     },         _createIconNode: function(iconConfig, targetNode) {       var iconNode, iconImage;       if(!targetNode) targetNode = this.containerNode;       iconNode = document.createElement('DIV');       iconNode.className = 'icon-node';       if(iconConfig.icon) {         iconImage = document.createElement('img');         iconImage.src = iconConfig.icon;       }             if(iconConfig.label) {         iconNode.title = iconConfig.label;         iconImage.alt = iconConfig.label;       }       iconNode.appendChild(iconImage);             targetNode.appendChild(iconNode);       // check if the widget is set to open at start       if (iconConfig.openAtStart) {          // check if the icon is a group icon         this.activeIconNode = iconNode;         domClass.add(iconNode, 'jimu-state-active');         this._showWidgetContent(iconConfig);       }             // check if the icon is a group icon       if(this._isGroupIcon(iconConfig)) {         // if group's tooltip has not been created yet         if(!this.groupTooltip[iconConfig.id]) {           // create group tooltip and its content          var groupTooltip = document.createElement('div');           groupTooltip.className = 'group-tooltip';           document.body.appendChild(groupTooltip);           for(var i = 0; i < iconConfig.widgets.length; i++) {             this._createIconNode(iconConfig.widgets, groupTooltip);           }           this.groupTooltip[iconConfig.id] = groupTooltip;         }       }             var self = this;       this.own(on(iconNode, 'click', function() {         // remove active state from any icon node         query('.jimu-state-active', self.domNode).removeClass('jimu-state-active');         // close panel         self.panelManager.closePanel(self.openedWidgetId + '_panel');         // close group tooltips         query('.group-tooltip').removeClass('show');         // if clicked on an active icon node         if(self.activeIconNode === this) {           self.activeIconNode = null;           return;         }         // clicking on a group icon         if (self._isGroupIcon(iconConfig)) {           self.openedWidgetId = null;           self._positionTooltip(self.groupTooltips[iconConfig.id], this);           domClass.add(self.groupTooltips[iconConfig.id], 'show');         } else { // clicking on a widget icon           // show panel           self._showWidgetContent(iconConfig);         }           domClass.add(this, 'jimu-state-active');           self.activeIconNode = this;       }));       return iconNode;     },         _showWidgetContent: function(iconConfig) {       if(this.openedWidgetId) {         this.panelManager.closePanel(this.openedWidgetId + '_panel');       }       var self = this;       this.panelManager.showPanel(iconConfig).then(function(widget) {         // the panel displays successfully         self.own(on.once(widget, 'close', function () {           domClass.remove(self.activeIconNode, 'jimu-state-active');           self.activeIconNode = null;         }));       }, function (err) {         // the panel failed to display       });       this.openedWidgetId = iconConfig.id;     },         _isGroupIcon: function(iconConfig) {       return iconConfig.widgets && iconConfig.widgets.length > 1;     },         _positionTooltip: function(tooltip, iconNode) {       var iconBoundingRect = iconNode.getBoundingClientRect();       tooltip.style.top = iconBoundingRect.top + 'px';       tooltip.style.left = (iconBoundingRect.width || iconNode.clientWidth) + 'px';     }   }); }); Thank you for your time and help. William ... View more

Hi Robert, Thanks for the suggestion. After clearing my browser cache, I still had the problem. However your suggestion gave me the idea to start a new app, and now it works. Gratefully, William ... View more

Okay. So all the html is generated programmatically in the JavaScript. I got it working. How did you style the entire dialog box background light yellow and the content panes peach? ... View more

Thanks for the links Rebecca. I had already looked at Larry's WelWhatDisHelpAbout widget though. If it were a free standing widget, I probably would use it, but it is dependent on the Acme widget. I'm hoping to find a simpler way. ... View more

Thanks for the suggestion Michael. I was just hoping to have the content appear in the center of the browser, as part of its function is to act as a welcome screen. Also, my About widget currently provides information and instructions on how to use each of the widgets. ... View more

Hi Steve, Could I have a look at your html for the widget? Thanks, William ... View more

Thanks Steve! I'm looking at your code right now, and I'll let you know how it works on Monday. By the way, if you want to add code in a GeoNet message, after clicking REPLY there is a link labeled Use advanced editor in the upper right corner of your reply message box (see image below). If you click on that, you get a new screen and text field (see image below). Once your code is in the text area, highlight it and go to the >>, select Syntax Highlighting, followed by the programing language you are using (see image below). Below is an example of how it looks after the process is done. Have a  great weekend! ... View more

Hi Robert, I finally got back to this problem. Below is a picture of what I would like to accomplish, that is to display a TabContainer in the center of the browser. I have a working TabContainer using only dojo, but I'm not sure how to transition it to Web AppBuilder, especially how to center the container. Do I need to modify or create a layout in an existing theme (\client\stemapp\themes\FoldableTheme\layouts\default\config.json) or in a new theme? Any guidance will be much appreciated. William ... View more

Hi Robert, Thank you for your suggestion, but I should have been more specific in my original question. The reason I was thinking of making a widget was because I wanted users to be able to reference the information presented after the splash screen at any point in the application. I don't want the widget to be in a panel, as I would like it to be centered on the screen. I also wanted to include tabs to help organize the data. I'm hoping to include this widget in the headerController. Any thoughts on what ESRI/DOJO class I should use for this widget? Thanks again for your attention to this matter. William ... View more

Robert, Would I add one of these to the onOkClick function in the splash widget? ... View more