change on-panel widget's location and size in foldtable theme

[LefterisKoumis]

This question was asked before, last year by another user, of how to change the size of an on-panel foldable widget and got no working answer. Hopefully, someone has a suggestion.

I tried to modified the config.json, but it seems the theme overrides it

"widgetPool": {

    "panel": {

      "uri": "themes/FoldableTheme/panels/FoldablePanel/Panel",

     ----------

-----------

      }

    },

    "widgets": [

      {

-----------

--------

{

  "label": "mywidget",

  "uri": "widgets/mywidget/Widget",

  "position": {

          "left": 55,

          "top": 45,

   "height":300

        },

  "index": 3

   }]},

and I tried the panel manager

var pm = PanelManager.getInstance().getPanelById(this.id + '_panel');

         pm.resize({h:300});

and it still doesn't work.

Can we change location and size of the widget in the foldable theme?

[RobertScheitlin__GISP]

Lefteris,

  I am able to change an on screen widget (the ones in the 1, 2, 3, 4, 5 placeholders) by adding a width property to the position property of the widget in the config.json.

{
        "position": {
          "left": 105,
          "top": 45,
          "relativeTo": "map",
          "width": 200
        },
        "placeholderIndex": 1,
        "id": "_29",
        "name": "Bookmark",
        "label": "Bookmark",
        "version": "1.3",
        "uri": "widgets/Bookmark/Widget",
        "config": "configs/Bookmark/config_Bookmark.json"
      },

The position of the widget (on screen widget) is always going to be relative to the on screen widget button position.

[LefterisKoumis]

Thank you Robert.

Yes, I can do that for an on-screen widget.

My question is for the foldable theme only and for on-panel widgets.

The code shows the widget is under the widget pool block.

I am trying to manage the size and location of a on panel widget that is on the foldable theme.

I can change the on-panel widget location and size  on other themes.

Is anything in the documentation that refers to these limitations for this theme?

Thank you.

[RobertScheitlin__GISP]

Lefteris,

  OK you are going to have to help me understand what you are referring to as on-panel widget... Are you taking about the widgets in the header controller that popup on the right side of the screen?

[LefterisKoumis]

Yes, that's correct. Sorry for not been clear. I thought the code provided showing the widget under the widgetpool would indicate its type.

Thank you.

[RobertScheitlin__GISP · Accepted solution]

Lefteris,

  I would require some editing in the [install dir]\server\apps\[app#]\themes\FoldableTheme\widgets\HeaderController\Widget.js. Keep in mind that this will affect the apps responsive design for mobile:

Add lines 16 - 29

_showIconContent: function(iconConfig) {
        if(iconConfig.inPanel === false){
          this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
            this.openedId = iconConfig.id;
            var iconNode = this._getIconNodeById(iconConfig.id);

            //we don't call widget.startup because getWidgetMarginBox has started widget
            //widget.startup();

            html.setStyle(widget.domNode, 'zIndex', 101);

            this._setOffPanelWidgetPosition(iconNode, widget);
            this.widgetManager.openWidget(widget);
          }));
        }else{
          if(iconConfig.position){
            if(iconConfig.position.width){
              iconConfig.panel.position.width = iconConfig.position.width;
            }
            if(iconConfig.position.top){
              iconConfig.panel.position.top = iconConfig.position.top;
            }
            if(iconConfig.position.left){
              iconConfig.panel.position.left = iconConfig.position.left;
            }
            if(iconConfig.position.right){
              iconConfig.panel.position.right = iconConfig.position.right;
            }
          }
          this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
            this.openedId = iconConfig.id;
            this.own(aspect.after(panel, 'onClose', lang.hitch(this, function() {
              this._onPanelClose(iconConfig.id);
            })));
          }));
        }
      },

And in the main config.json add the position object to your desired widget:

"position": {
          "left": 105,
          "top": 45,
          "relativeTo": "map",
          "width": 450
        }

[LefterisKoumis]

Fantastic! Thank you!. Otherwise, the widget as setup by the default foldable theme looks like a side panel.

[LefterisKoumis]

Robert,

I noticed that the height is not included in your code, so I added it. However, I cannot modify the widget's height in the config.json. Can the height be modified? Also, can the widget be floated around after its initial location is set?

Thank you.

widget.js

----------

if(iconConfig.position.right){

              iconConfig.panel.position.right = iconConfig.position.right;

            }

   if(iconConfig.position.height){

              iconConfig.panel.position.height = iconConfig.position.height;

            }

          }

----------------

config.json:

"position": {

          "left": 105,

          "top": 45,

          "relativeTo": "map",

          "width": 450,

    "height":300

        },