Locating Full Screen widget to widget pool?

356
3
Jump to solution
05-22-2018 06:28 AM
FranklinAlexander
Occasional Contributor II

Just wandering if it was possible to locate the Full Screen widget to the widget pool instead of having it appear in the top right corner of the map. I have a panel widget that opens at startup, and it covers the Full Screen widget, so I need to relocate it. I tried placing the widget in the widget pool of the config file, but this isn't working. It just places an icon in the header controller that doesn't do anything. I know I can change the position of the Full Screen widget to another location on the map, but the top right just makes the most sense, so it would be nice the header controller would be the best place. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Franklin,

   The full screen widget is not developed to be placed in a widget pool. The best you can do it re-position it to work better with your open panel like:

      {
        "uri": "widgets/FullScreen/Widget",
        "position": {
          "right": 368,
          "top": 8,
          "relativeTo": "map"
        },
        "version": "2.8",
        "id": "widgets_FullScreen_Widget_19",
        "name": "FullScreen",
        "config": null
      }‍‍‍‍‍‍‍‍‍‍‍‍

Another way is to change the above relativeTo property to "screen" and then you have to adjust the widgets.js setPosition function to set the widget z-index. (add line 4):

    setPosition: function (/*position*/) {
      this.inherited(arguments);
      var appConfig = window.getAppConfig();
      html.setStyle(this.domNode, 'z-index', 110);
      if (appConfig.theme.name === "DashboardTheme" && !window.appInfo.isRunInMobile) {
        html.setStyle(this.domNode, 'z-index', 110);
        this.placeAt(this._getDBThemeContainer());
      }

      //hide button in mobile
      if (window.appInfo.isRunInMobile || jimuUtils.isMobileUa()) {
        html.addClass(this.domNode, 'mobile');
      } else {
        html.removeClass(this.domNode, 'mobile');
      }
    },

That will give you something like this:

View solution in original post

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Franklin,

   The full screen widget is not developed to be placed in a widget pool. The best you can do it re-position it to work better with your open panel like:

      {
        "uri": "widgets/FullScreen/Widget",
        "position": {
          "right": 368,
          "top": 8,
          "relativeTo": "map"
        },
        "version": "2.8",
        "id": "widgets_FullScreen_Widget_19",
        "name": "FullScreen",
        "config": null
      }‍‍‍‍‍‍‍‍‍‍‍‍

Another way is to change the above relativeTo property to "screen" and then you have to adjust the widgets.js setPosition function to set the widget z-index. (add line 4):

    setPosition: function (/*position*/) {
      this.inherited(arguments);
      var appConfig = window.getAppConfig();
      html.setStyle(this.domNode, 'z-index', 110);
      if (appConfig.theme.name === "DashboardTheme" && !window.appInfo.isRunInMobile) {
        html.setStyle(this.domNode, 'z-index', 110);
        this.placeAt(this._getDBThemeContainer());
      }

      //hide button in mobile
      if (window.appInfo.isRunInMobile || jimuUtils.isMobileUa()) {
        html.addClass(this.domNode, 'mobile');
      } else {
        html.removeClass(this.domNode, 'mobile');
      }
    },

That will give you something like this:

0 Kudos
FranklinAlexander
Occasional Contributor II

The second option worked perfectly Robert. Thank you

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Franklin. Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question

0 Kudos