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?
Solved! Go to Solution.
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; },
Douglas,
See this thread for the answer:
change on-panel widget's location and size in foldtable theme
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.
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; },
Awesome. Thanks Robert.