widget auto launch location

897
9
Jump to solution
03-09-2017 02:13 PM
CCWeedcontrol
Regular Contributor

I have an app with two widgets that auto launch when the app is opened. The problem is that these two widgets cover the zoom, home, locate icons and the widget icons on the top right at start up. I've tried editing the Panel.js to moving them based on this thread but mine seems different so i am not sure what lines to edit and with what? I tried adding line position.left += 50; to line 29 but the panels are still over the icons.

I am working with the Launchpad Theme.

Thanks.

Here is what mine looks like.

_setPositionStyle: function(pos){
      var style;

      if(this.position.zIndex){
        pos.zIndex = this.position.zIndex;
      }
      this.position.left = pos.left;
      this.position.top = pos.top;
      this.position.width = pos.width;
      this.position.height = pos.height;

      style = utils.getPositionStyle(pos);
      lang.mixin(style, pos.borderRadiusStyle);
      domStyle.set(this.domNode, style);
    },

    onWindowResize: function(){
      var position = {}, box;

      if(this.windowState === 'minimized'){
        return; //do nothing if panel is minimized.
      }

      if(window.appInfo.isRunInMobile){
        box = this._getLayoutBox();

        if(this.windowState === 'maximized'){
          position.top = 0;
          position.left += 50; 
          position.height = box.h;
        }else{
          position.top = box.h / 2;
          position.height = box.h / 2;
        }
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

For 2.3 the instructions are the same. Here is the code block in that version (line 18):

    /**
     * @override
     * @param {Object} position      contains these fields: left, top, width, height,
     * margin and index
     * @param {[type]} containerNode [description]
     */
    setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin);
      position.top -= position.margin * row;

      position.left += 50;
      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

what version of WAB?

0 Kudos
CCWeedcontrol
Regular Contributor

oops my bad WAB 2.3

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

For 2.3 the instructions are the same. Here is the code block in that version (line 18):

    /**
     * @override
     * @param {Object} position      contains these fields: left, top, width, height,
     * margin and index
     * @param {[type]} containerNode [description]
     */
    setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin);
      position.top -= position.margin * row;

      position.left += 50;
      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },
CCWeedcontrol
Regular Contributor

Robert that seem to work for just the Legend widget, but the Esearch popup is blocking the the widgets on the right. I can't seem to find the location of code to add position.left+=50: for Permit Search widget.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

I am a little confused. Can you provide a screenshot?

0 Kudos
CCWeedcontrol
Regular Contributor

sure.

I have two widgets that pop up when the application is started, the Legend and Permit Search.  I was able to move the legend widget with the code you posted but you can see that the Permit Search widget is blocking the widget icons on the top right corner at start up.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

That is a WHOLE other thing when dealing with on screen placeholder widgets vs Launchpad anchor bar.

jimu/OnScreenWidgetPanel.js

      _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;

            // prevent the panel out of map content
            if ((result.position.left + this._positionInfoBox.w) > layoutBox.w) {
              result.position.left -= this._positionInfoBox.w;
              if (result.position.left < 0) {
                result.position.left = layoutBox.w - this._positionInfoBox.w;
              }
            }
          } else {
            result.position.left = leftBlankWidth;
            // prevent the panel out of map content
            if ((result.position.left + this._positionInfoBox.w) > layoutBox.w) {
              if (layoutBox.w > this._positionInfoBox.w) {
//This is my change adding - 70 
                result.position.left = layoutBox.w - this._positionInfoBox.w - 70;
              } else {
                result.position.left = 0;
              }
            }
          }
        } 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) {
//This is my change commenting out the + 40 + 3
            result.position.top = this._positionInfoBox.t;// + 40 + 3; // preloadIcon height is 40px
          }
        }

        return result;
      },
CCWeedcontrol
Regular Contributor

Awesome Thank you.

0 Kudos
CCWeedcontrol
Regular Contributor

Sorry to bring this back up but i has been bothering me and can't figure out how to move the windows down.

Pic one curently show how the ESearch appears at launch, pic two is how i would like it to appear at lunch it doesn't cover up the toggle buttons. What do i need to change to get to ESarch auto lunch to move down.

0 Kudos