topic Re: Add Dialog prior to Closing Widget in ArcGIS Web AppBuilder Questions

Add Dialog prior to Closing Widget

KarenRobine — Thu, 23 Feb 2017 17:51:47 GMT

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?

Re: Add Dialog prior to Closing Widget

RobertScheitlin__GISP — Mon, 27 Feb 2017 15:58:37 GMT

Karen,

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

Re: Add Dialog prior to Closing Widget

KarenRobine — Mon, 27 Feb 2017 23:14:17 GMT

Just a certain one (not all). Thanks.

Re: Add Dialog prior to Closing Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:13:12 GMT

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

Re: Add Dialog prior to Closing Widget

KarenRobine — Tue, 28 Feb 2017 14:47:15 GMT

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!!