set the on-screen widget position programmatically

3594
12
Jump to solution
02-24-2017 11:24 AM
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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);‍‍‍‍‍‍‍‍
      },

View solution in original post

12 Replies
RobertScheitlin__GISP
MVP Emeritus

Lefteris,

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

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

so it is not in the anchor bar controller?

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
LefterisKoumis
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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 

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
Drew
by
Occasional Contributor III

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?

0 Kudos