Re-Open widget

3681
9
Jump to solution
12-23-2015 02:54 PM
MeleKoneya
Occasional Contributor III

I have a custom widget that requires user input I would like to ensure that the user has input data before they close the panel.

I have some code that alerts the user if the data has not been input,  but I would like the panel to re-open 'forcing' the user to set a value before proceeding.

I was using the onClose function to check for the value and then re-open the panel,

onClose: function(){

        console.log('onClose');

        if (!editor)

        {

         alert('Must set station/shift');

                   var pm = PanelManager.getInstance();

         pm.openPanel(_34_panel);

        }

       

       }

I got an error in console that lead me to believe that the widget had been destroyed by the time it got to my code.

Has anyone done something like this?

Thanks for any code samples.

Mele

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Mele,

  Here is my tested solution:

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  'jimu/PanelManager',
  'jimu/dijit/Message',
  'dojo/aspect',
  'dojo/_base/lang'
],
function(
    declare,
    BaseWidget,
    PanelManager,
    Message,
    aspect,
    lang
) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {
      // Custom widget code goes here

      baseClass: 'jimu-widget-customwidget',

      //this property is set by the framework when widget is loaded.
      name: 'CheckClose',
      label: 'Check Before Close',
      editor: null,

      //methods to communication with app container:

      postCreate: function() {
       this.inherited(arguments);
       console.log('postCreate');
      },

      startup: function() {
        this.inherited(arguments);
        console.log('startup');
        aspect.before(this, 'onClose', function(){
          if (!this.editor){
            var qMessage = new Message({
            type: 'question',
            titleLabel: 'Problem',
            message: 'Must set station/shift',
            buttons: [{
              label: 'OK',
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                var pm = PanelManager.getInstance();
                pm.openPanel(this.id + '_panel');
              }))
            }]
          });
          }
        });
      },

      onOpen: function(){
        console.log('onOpen');
      },

      onClose: function(){
        console.log('onClose');
      }

    });
  });

View solution in original post

9 Replies
RickeyFight
MVP Regular Contributor

Mele,

I would consider moving this to Web AppBuilder Custom Widgets

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mele,

  This sounds like a good time to dojo aspect.before.

0 Kudos
JunshanLiu
Occasional Contributor III

Could you post your console error to help us find what's the reason?

0 Kudos
MeleKoneya
Occasional Contributor III

The error that I get is

fail to close widget SFDShiftPickList. TypeError: Object doesn't support property or method 'setState'

Thanks for any assistance.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mele,

  Here is my tested solution:

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  'jimu/PanelManager',
  'jimu/dijit/Message',
  'dojo/aspect',
  'dojo/_base/lang'
],
function(
    declare,
    BaseWidget,
    PanelManager,
    Message,
    aspect,
    lang
) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {
      // Custom widget code goes here

      baseClass: 'jimu-widget-customwidget',

      //this property is set by the framework when widget is loaded.
      name: 'CheckClose',
      label: 'Check Before Close',
      editor: null,

      //methods to communication with app container:

      postCreate: function() {
       this.inherited(arguments);
       console.log('postCreate');
      },

      startup: function() {
        this.inherited(arguments);
        console.log('startup');
        aspect.before(this, 'onClose', function(){
          if (!this.editor){
            var qMessage = new Message({
            type: 'question',
            titleLabel: 'Problem',
            message: 'Must set station/shift',
            buttons: [{
              label: 'OK',
              onClick: lang.hitch(this, lang.hitch(this, function () {
                qMessage.close();
                var pm = PanelManager.getInstance();
                pm.openPanel(this.id + '_panel');
              }))
            }]
          });
          }
        });
      },

      onOpen: function(){
        console.log('onOpen');
      },

      onClose: function(){
        console.log('onClose');
      }

    });
  });
JunshanLiu
Occasional Contributor III

"_34_panel" is this a correct panel id? I can not reproduce your issue, if I use a correct panel id, it works well for me if I put widget in widget pool.

If I put widget in onscreen widgets, I need use setTimeout to open panel to avoid recursive invoke:

setTimeout(lang.hitch(this, function(){

      pm.openPanel(this.id + '_panel');

     }), 1000);

RobertScheitlin__GISP
MVP Emeritus

Junshan,

   I started out using a setTimeout like that then I decided that since she wanted to do an Alert anyway, that the Message dijit would work to accomplish both purposes of the delay and user message.

MeleKoneya
Occasional Contributor III

Junshan Liu,   setting the timeout worked to get the panel to open.   It was an onscreen widget so that helped a lot!   Thanks.

Robert Scheitlin, GISP,   I may end up using your solution as well,  but for now it is working.   You are both correct so I appreciate your help in solving my problem!    Can I mark both of your answers as correct?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mele,

  Sort of, you can mark both as the correct answer but only the last one clicked will retain the correct answer mark (but both will receive credit for the correct answer, as far as I know).

0 Kudos