topic Re: set the on-screen widget position programmatically in Web AppBuilder Custom Widgets Questions

set the on-screen widget position programmatically

LefterisKoumis — Fri, 24 Feb 2017 19:24:51 GMT

I use the _setDesktopPosition function used in the OnScreenWidget.js in my custom widget.js to set the position of a panel at start up but it ignores it.

Ideas?

startup: function () {

html.place(this.domNode, jimuConfig.mapId);

html.setStyle(this.domNode, {
left: 100 + 'px',
right: 'auto',
top: 100 + 'px',
// width: (position.width || this.position.width || this._originalBox.w) + 'px',
// height: (position.height || this.position.height || this._originalBox.h) + 'px'
});

--- -------

---------

thank you.

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Mon, 27 Feb 2017 14:46:04 GMT

Lefteris,

Where is the widget coming from (i.e. on screen widget place holder, some widget controller like the header)?

Re: set the on-screen widget position programmatically

LefterisKoumis — Mon, 27 Feb 2017 16:43:13 GMT

This is a custom on-screen widget. I don't know if it matters since it is not in the header, but fyi I am using the launchpad theme.

Thank you.

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Mon, 27 Feb 2017 16:52:53 GMT

so it is not in the anchor bar controller?

Re: set the on-screen widget position programmatically

LefterisKoumis — Mon, 27 Feb 2017 17:04:50 GMT

No.

Here is how the GetInfo widget is defined in the config.json:

"widgetOnScreen": {
"widgets": [
{
"uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget",
"position": {
"bottom": 10,
"height": 40,
"relativeTo": "map",
"zIndex": 0
},
"version": "2.3",
"id": "themes_LaunchpadTheme_widgets_AnchorBarController_Widget_19",
"name": "AnchorBarController"
},
{
"uri": "themes/LaunchpadTheme/widgets/Header/Widget",
"position": {
"left": 15,
"top": 17,
"width": 670,
"height": 46,
"relativeTo": "map"
},
"version": "2.3",
"id": "themes_LaunchpadTheme_widgets_Header_Widget_20",
"name": "Header"
},
{
"uri": "widgets/GetInfo/Widget",
"config": "configs/GetInfo/config_GetInfo.json",

"id": "widgets_GetInfo_Widget_36",
"IsController": false,
"name": "GetInfo",
"version": "1.3.1",
"label": "Get Info",
"openAtStart": true
},

Thank youl.

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Mon, 27 Feb 2017 17:12:49 GMT

So if it is an on screen widget then the panels position is controlled by the onScreenWidgetIcon.js getOffPanelWidgetPosition function.

Re: set the on-screen widget position programmatically

LefterisKoumis — Mon, 27 Feb 2017 17:20:23 GMT

Perhaps in the postCreate function, I could redefine the widget position? After the widget is created, can we redefined the postion?

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Mon, 27 Feb 2017 17:25:04 GMT

it have to happen in the onOpen or startup as they occur after the setPosition in the widget lifecycle:

Widget life cycle—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: set the on-screen widget position programmatically

LefterisKoumis — Mon, 27 Feb 2017 17:49:10 GMT

That bring me back to the original question when I posted this question. The script I used in the startup function did not alter the postion of the widget. What am I missing? Thanks.

Re: set the on-screen widget position programmatically

Drew — Sun, 12 Dec 2021 09:30:17 GMT

This works for me (see below)

startup: function ()
{
  domStyle.set(this.domNode, "right", "100px")
  domStyle.set(this.domNode, "top", "100px")
}‍‍‍‍‍

Maybe you have a CSS class over writing the style?

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:30:20 GMT

Lefteris,

When using the launchpad theme you should use:

      startup: function() {
        this.inherited(arguments);
        var position = {
          relativeTo: map,
          left: 277,
          top: 225,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);‍‍‍‍‍‍‍‍
      },‍‍‍‍‍‍‍‍‍‍‍

Re: set the on-screen widget position programmatically

MarkCooper5 — Wed, 25 Jul 2018 15:40:35 GMT

Does anyone know what needs to be done to achieve this in the tab theme?

Thanks

Re: set the on-screen widget position programmatically

RobertScheitlin__GISP — Wed, 25 Jul 2018 15:42:47 GMT

Mark,

Have you tried the above?