How to make an on screen widget foldable in tab theme?

574
2
Jump to solution
03-23-2018 12:24 PM
MartinOwens1
Occasional Contributor II

So I've been trying to make one of my onScreen widgets foldable in the tab theme with no luck. In OnScreenWidgetPanel.js I've been able to add the html foldable nodes the application uses when in the mobile view but I'm having a heck of a time changing the Desktop UI to get it to collapse the widget. Any help would be great!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Martin,

   You will have to do more work figuring the positioning of the panel in the _setMobilePostion function but to get the panel to fold in desktop mode you need to modify the jimu\OnScreenWidgetPanel.js _onFoldableBtnClicked function like this:

      _onFoldableBtnClicked: function(evt) {
        evt.stopPropagation();
        var posInfo = this._getPositionInfo();
        //if (posInfo.isRunInMobile) {
          if (this.windowState === 'minimized') {
            html.removeClass(this.foldableNode, 'fold-up');
            html.addClass(this.foldableNode, 'fold-down');
            this.panelManager.normalizePanel(this);
          } else {
            html.removeClass(this.foldableNode, 'fold-down');
            html.addClass(this.foldableNode, 'fold-up');
            this.panelManager.minimizePanel(this);
          }
          this._setMobilePosition();
        //}
      },

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

Martin,

   You will have to do more work figuring the positioning of the panel in the _setMobilePostion function but to get the panel to fold in desktop mode you need to modify the jimu\OnScreenWidgetPanel.js _onFoldableBtnClicked function like this:

      _onFoldableBtnClicked: function(evt) {
        evt.stopPropagation();
        var posInfo = this._getPositionInfo();
        //if (posInfo.isRunInMobile) {
          if (this.windowState === 'minimized') {
            html.removeClass(this.foldableNode, 'fold-up');
            html.addClass(this.foldableNode, 'fold-down');
            this.panelManager.normalizePanel(this);
          } else {
            html.removeClass(this.foldableNode, 'fold-down');
            html.addClass(this.foldableNode, 'fold-up');
            this.panelManager.minimizePanel(this);
          }
          this._setMobilePosition();
        //}
      },
0 Kudos
MartinOwens1
Occasional Contributor II

Thanks Robert!

0 Kudos