onOpen Multiple Widgets: Dart Theme

[JamesCrandall]

WAB Developer 2.5

Dart Theme

Attempting to open two widgets at application open.

-Popup Panel Widget

-Edit Widget

I updated the config.json of each widets openAtStart property but this doesn't work to open both at the same time.  Not sure if there's another palce(s) that will need altered.

  "widgetPool": {
    "panel": {
      "uri": "themes/DartTheme/panels/DartPanel/Panel",
      "position": {
        "relativeTo": "map"
      }
    },
    "widgets": [
      {
        "uri": "widgets/LayerList/Widget",
        "version": "2.5",
        "id": "widgets_LayerList_Widget_19",
        "name": "LayerList",
        "index": 2
      },
      {
        "name": "Edit",
        "version": "2.5",
        "uri": "widgets/Edit/Widget",
        "index": 3,
        "id": "widgets_Edit_Widget_54",
        "config": "configs/Edit/config_Edit.json",
        "openAtStart": true
      },
      {
        "name": "PopupPanel",
        "uri": "widgets/PopupPanel/Widget",
        "config": "configs/PopupPanel/config_PopupPanel.json",
        "index": 4,
        "id": "widgets_PopupPanel_Widget_55",
        "version": "2.6",
        "openAtStart": true
      }
    ],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

James,

   Though the theme supports opening multiple widgets at the same time. it does not support have multiple set to open at start. You can easily add that ability by make this change to the [install dir]\server\apps\[app#]\themes\DartTheme\widgets\DartController\Widget.js _createIconNodes function:

      // create icon nodes
      _createIconNodes: function() {
        html.empty(this.containerNode);
        this.openedIds = [];
        var i, iconConfig, name, allIconConfigs = this.getAllConfigs();
        var defaultSearch = true;
        var openAtStartNode;
        this.openAtStartIds = [];
        this.iconCount = 0;
        for (i = 0; i < allIconConfigs.length; i++) {
          iconConfig = allIconConfigs[i];
          name = iconConfig.name;
          if (name === "ZoomSlider" || name === "HomeButton" || name === "MyLocation" || name === "ExtentNavigate") {
            this._createChildWidget(iconConfig);
          } else if (name === "Search" && defaultSearch) {
            defaultSearch = false;
            this._createChildWidget(iconConfig);
          } else {
            this.iconCount += 1;
            var node = this._createIconNode(iconConfig);
            if (iconConfig.openAtStart) {
              this.openAtStartIds.push(iconConfig.id);
            }
          }
        }

        var containerStyle = {
          width: this.iconCount * this.height + 'px'
        };
        html.setStyle(this.containerNode, containerStyle);

        //open all openatstartwidgets
        if(this.openAtStartIds.length > 0){
          this.setOpenedIds(this.openAtStartIds);
        }

        //open the first openatstart widget
        // if (openAtStartNode && !this.openAtStartWidget) {
        //   this._onIconClick(openAtStartNode);
        //   this.openAtStartWidget = openAtStartNode.config.name;
        // }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JamesCrandall]

Thank you!

I'll be back shortly to mark as correct.

[RobertScheitlin__GISP]

James,

  Setting the position and size is a bit of work. In the same file as above look at the _getNextPosition function.

[JamesCrandall]

Okay, I can get close to setting the position where I open the second widget by adding a second _getNextPosition() function and add a conditional statement in the _showIconContent function to test for identifying that second widget I want to position on the right side of the screen.

The issue is that I won't know the exact screen size and if my "offset" value is too high then the widget is automatically placed at position left: 0

Perhaps if I can test for window.size or something like that?  Then I could at least setup a right-position based upon ranges of screen size values that open the app.  This would only be ideal for non-mobile devices.

// show icon content
_showIconContent: function(iconConfig) {
if (iconConfig.inPanel === false) {
var name = iconConfig.name;
this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
this.openedId = iconConfig.id;
html.setStyle(widget.domNode, 'zIndex', 0);
if (name !== "OverviewMap") {
widget.setPosition(this.wPos, this.map.id);
}
this.widgetManager.openWidget(widget);
domStyle.set(widget.domNode, "display", null);
this._minimizeController();
}));
} else {
var pid = iconConfig.id + '_panel';
var panel = this.panelManager.getPanelById(pid);
if (pid == "widgets_Edit_Widget_54_panel") {
var pos = this._getSecondWidgetPosition();
}
else {
var pos = this._getNextPosition();
}
if (panel) {
pos = panel.position;
}
iconConfig.panel.position = pos;
this.openedIds.push(iconConfig.id);
this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
aspect.after(panel, 'onClose', lang.hitch(this, function() {
this._switchNodeToClose(iconConfig.id);
}));
}));
}
},
// get next position
_getNextPosition: function() {
this._updatePanelCount(1);
var offset = (this.panelCount - 1) * 10 + 10;
var pos = {
top: 0,
left: offset,
width: 320,
height: 450,
relativeTo: 'map'
};
return pos;
},
_getSecondWidgetPosition: function () {
this._updatePanelCount(2);
var offset = (this.panelCount - 1) * 1400; //700 + 700;
console.log("offset value: ", offset)
var pos = {
top: 0,
left: offset,
width: 425,
height: 835,
relativeTo: 'map'
};
return pos;
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Ya that was the "Bit of work" part of my comment. You could switch the left property to a right property for your _getSecondWidgetPosition

[JamesCrandall]

haha! Brilliant!

Using the right property is a great idea and seems to work on my dev computer great!

[JamesCrandall]

Ultimately, would like to have Edit and Popup Panel widgets as such onOpen of the application.

[JamesCrandall]

Just an fyi on modifying this theme's widget pool settings to open multiple widget/panels on startup -- the popup panel widget would open at startup as I wanted but it would automatically close!  Then any subsequent open (by clicking the widget) it would open and stay open.

I'll just say, please ay attention to the actual default config dialog -- I was so focused on the JavaScript, thinking that I had done something wrong, but there is a "Close this widget on widget startup" setting that needs to be unchecked!

[RobertScheitlin__GISP]

James,

  Sorry I should have mentioned that.