Add Dialog prior to Closing Widget

571
4
Jump to solution
02-23-2017 09:51 AM
KarenRobine
Occasional Contributor II

I'd like to add a dijit/ConfirmDialog prior to closing a widget of type dockable-panel. So I would like to overwrite the onClose event. Thoughts on how to do this. If I add the ConfirmDialog to onClose(), its too late to close it.  Has anyone done this?  I can probably hide the close button and add my own. Examples of this?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Karen,

   You will find that this answers your question:

Edits to the OnScreenWidgetPanel.js file.

define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/dnd/move',
    'dijit/_TemplatedMixin',
    'jimu/BaseWidgetPanel',
    'jimu/utils',
    'dojox/layout/ResizeHandle',
    'dijit/ConfirmDialog',
    'dojo/touch'
  ],
  function(
    declare, lang, html, on, Move,
    _TemplatedMixin, BaseWidgetPanel, utils, ResizeHandle, ConfirmDialog
  ) {

.....

      _confirmClose: function(){
        this.myDialog.show();
      },

      _onCloseBtnClicked: function(evt) {
        console.info(this);
        if(this.label === 'Draw'){ //this is where you define which widget
          this._confirmClose();
          return;
        }
        this.panelManager.closePanel(this);
        evt.stopPropagation();

        //avoid to touchEvent pass through the closeBtn
        if (evt.type === "touchstart") {
          evt.preventDefault();
        }
      },

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Karen,

  Are you looking to change the behavior for all widget or just a certain one?

0 Kudos
KarenRobine
Occasional Contributor II

Just a certain one (not all).  Thanks.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Karen,

   You will find that this answers your question:

Edits to the OnScreenWidgetPanel.js file.

define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/dnd/move',
    'dijit/_TemplatedMixin',
    'jimu/BaseWidgetPanel',
    'jimu/utils',
    'dojox/layout/ResizeHandle',
    'dijit/ConfirmDialog',
    'dojo/touch'
  ],
  function(
    declare, lang, html, on, Move,
    _TemplatedMixin, BaseWidgetPanel, utils, ResizeHandle, ConfirmDialog
  ) {

.....

      _confirmClose: function(){
        this.myDialog.show();
      },

      _onCloseBtnClicked: function(evt) {
        console.info(this);
        if(this.label === 'Draw'){ //this is where you define which widget
          this._confirmClose();
          return;
        }
        this.panelManager.closePanel(this);
        evt.stopPropagation();

        //avoid to touchEvent pass through the closeBtn
        if (evt.type === "touchstart") {
          evt.preventDefault();
        }
      },
KarenRobine
Occasional Contributor II

Thanks Robert.  This is the correct answer. I appreciate your help....

But the only issue I see in using this methodology is as follows: From a maintenance standpoint, this is a little tricky. If switching to a new version of the API and re-generating my code from the template, this functionality will break. 

I found the style for the close button in FoldableTheme\panels\FoldablePanel\style.css (.jimu-foldable-panel .close-btn).   I may try to place a version of the close button on top of the out of the box close button (and maybe hide the OOB close button).   I'll post this when I get it working.

Thanks a bunch!!

0 Kudos