topic Re: change on-panel widget's location and size in foldtable theme in Web AppBuilder Custom Widgets Questions

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

LefterisKoumis — Thu, 19 Nov 2015 22:02:00 GMT

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?

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:08:50 GMT

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.

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

LefterisKoumis — Fri, 20 Nov 2015 16:27:57 GMT

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.

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

RobertScheitlin__GISP — Fri, 20 Nov 2015 16:38:44 GMT

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?

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

LefterisKoumis — Fri, 20 Nov 2015 16:43:04 GMT

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.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:08:52 GMT

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
        }

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

LefterisKoumis — Fri, 20 Nov 2015 17:30:41 GMT

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

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

LefterisKoumis — Sun, 29 Nov 2015 19:00:28 GMT

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