topic Re: onOpen Multiple Widgets: Dart Theme in Web AppBuilder Custom Widgets Questions

onOpen Multiple Widgets: Dart Theme

JamesCrandall — Sun, 12 Dec 2021 09:33:12 GMT

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
      }
    ],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: onOpen Multiple Widgets: Dart Theme

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:33:15 GMT

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;
        // }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Mon, 26 Feb 2018 15:41:29 GMT

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

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Mon, 26 Feb 2018 15:42:19 GMT

Thank you!

I'll be back shortly to mark as correct.

Re: onOpen Multiple Widgets: Dart Theme

RobertScheitlin__GISP — Mon, 26 Feb 2018 15:47:27 GMT

James,

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

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Sun, 12 Dec 2021 09:33:17 GMT

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;
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: onOpen Multiple Widgets: Dart Theme

RobertScheitlin__GISP — Mon, 26 Feb 2018 16:46:22 GMT

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

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Mon, 26 Feb 2018 16:49:29 GMT

haha! Brilliant!

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

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Tue, 27 Feb 2018 14:45:11 GMT

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!

Re: onOpen Multiple Widgets: Dart Theme

RobertScheitlin__GISP — Tue, 27 Feb 2018 14:46:46 GMT

James,

Sorry I should have mentioned that.

Re: onOpen Multiple Widgets: Dart Theme

JamesCrandall — Tue, 27 Feb 2018 15:00:33 GMT

Oh totally my fault! I was so buried in the JavaScript that I was certain I broke it somehow. I had to remove/re-add the original widget to ultimately see that config!!! LOL.