How to set the open location of an onScreen widget

4106
4
Jump to solution
12-08-2015 07:06 AM
DouglasGuess
Occasional Contributor

I'm using arcgis-web-appbuilder-1.1 (foldable theme) and I'm trying to set the open location of the onScreen widgets.  Currently, the onScreen widgets open directly below the widget icon (specified by the position within config.json).  I'd like to open the widget(s) as far to the left as possible.  Can this also be specified within the config.json file?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Douglas,

  OK, in that case then you have to make these changes

Add wtop and wleft to the widgets postion in the config.json (line 6 & 7):

{
        "position": {
          "left": 55,
          "top": 45,
          "relativeTo": "map",
          "wleft": 200,
          "wtop": 200
        },
        "placeholderIndex": 1,
        "id": "_28",
        "name": "Navigation",
        "label": "Navigation",
        "version": "1.3",
        "IsController": false,
        "uri": "widgets/Navigation/Widget",
        "config": ""
      },

and to the jimu.js/OnScreenWidgetPanel.js (lines 43 - 48):

_getPositionInfo: function() {
        var result = {
          isRunInMobile: false,
          position: {
            left: 0,
            top: 5
          }
        };
        var layoutBox = this._getLayoutBox();
        //judge width
        var leftBlankWidth = this._positionInfoBox.l;
        if (!window.appInfo.isRunInMobile) {
          if (window.isRTL) {
            result.position.left = layoutBox.w - leftBlankWidth;
          } else {
            result.position.left = leftBlankWidth;
          }
        } else {
          result.isRunInMobile = true;
          return result;
        }

        //judge height
        // preloadIcon height is 40px, tolerance is 3px
        var topBlankHeight = this._positionInfoBox.t;
        var bottomBlankHeight = layoutBox.h - topBlankHeight;
        if (topBlankHeight >= bottomBlankHeight) {
          if (topBlankHeight >= this._positionInfoBox.h) { // preloadIcon height is 40px
            result.position.top = this._positionInfoBox.t - this._positionInfoBox.h - 40 - 3;
          }
        } else {
          if (bottomBlankHeight >= this._positionInfoBox.h) {
            result.position.top = this._positionInfoBox.t + 40 + 3; // preloadIcon height is 40px
          }
        }

        if (!result.isRunInMobile) {
          if ((result.position.left + this._positionInfoBox.w) > layoutBox.w) {
            result.position.left -= this._positionInfoBox.w;
          }
        }

        if(this.position.wtop){
          result.position.top = this.position.wtop;
        }
        if(this.position.wleft){
          result.position.left = this.position.wleft;
        }

        return result;
      },

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Douglas,

   See this thread for the answer:

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

DouglasGuess
Occasional Contributor

Thanks for the reply Robert, however, I don't think this is what I'm after.  It appears the answer is focused on widget pool panels, not on screen widgets.  In the thread, you gave a response that "the position of the widget (on screen widget) is always going to be relative to the on screen widget button position".  This is what I'm trying to change.  The position of the on screen buttons can be set within the config.json file, however, when a specific on screen widget button is clicked, I want the widget to open in a specific location...not relative to it's corresponding button.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Douglas,

  OK, in that case then you have to make these changes

Add wtop and wleft to the widgets postion in the config.json (line 6 & 7):

{
        "position": {
          "left": 55,
          "top": 45,
          "relativeTo": "map",
          "wleft": 200,
          "wtop": 200
        },
        "placeholderIndex": 1,
        "id": "_28",
        "name": "Navigation",
        "label": "Navigation",
        "version": "1.3",
        "IsController": false,
        "uri": "widgets/Navigation/Widget",
        "config": ""
      },

and to the jimu.js/OnScreenWidgetPanel.js (lines 43 - 48):

_getPositionInfo: function() {
        var result = {
          isRunInMobile: false,
          position: {
            left: 0,
            top: 5
          }
        };
        var layoutBox = this._getLayoutBox();
        //judge width
        var leftBlankWidth = this._positionInfoBox.l;
        if (!window.appInfo.isRunInMobile) {
          if (window.isRTL) {
            result.position.left = layoutBox.w - leftBlankWidth;
          } else {
            result.position.left = leftBlankWidth;
          }
        } else {
          result.isRunInMobile = true;
          return result;
        }

        //judge height
        // preloadIcon height is 40px, tolerance is 3px
        var topBlankHeight = this._positionInfoBox.t;
        var bottomBlankHeight = layoutBox.h - topBlankHeight;
        if (topBlankHeight >= bottomBlankHeight) {
          if (topBlankHeight >= this._positionInfoBox.h) { // preloadIcon height is 40px
            result.position.top = this._positionInfoBox.t - this._positionInfoBox.h - 40 - 3;
          }
        } else {
          if (bottomBlankHeight >= this._positionInfoBox.h) {
            result.position.top = this._positionInfoBox.t + 40 + 3; // preloadIcon height is 40px
          }
        }

        if (!result.isRunInMobile) {
          if ((result.position.left + this._positionInfoBox.w) > layoutBox.w) {
            result.position.left -= this._positionInfoBox.w;
          }
        }

        if(this.position.wtop){
          result.position.top = this.position.wtop;
        }
        if(this.position.wleft){
          result.position.left = this.position.wleft;
        }

        return result;
      },
DouglasGuess
Occasional Contributor

Awesome.  Thanks Robert.

0 Kudos