Center Map After Jewelry Box Theme Has Loaded

[NathanHeickLACSD]

I was wondering if someone had tried modifying an app built off of the Jewelry Box Theme so that the map is centered properly.  It centers at the web map extent as configured, but it does it before the dockable panel has loaded and opened up.  Afterwards, it pushes the map to the right and it's not centered properly.  I am thinking I need to recenter the map again after the dockable panel or theme finishes loading.

[RobertScheitlin__GISP]

Nathan,

   I think this is what you are wanting. 

server\apps\[app#]\themes\JewelryBoxTheme\panels\LDockablePanel\Panel.js

Lines 2, 3, 14 - 18, 30

      startup: function(){
        this.vmap = this.panelManager.map;
        this.mapExt = this.vmap.extent;
        var configs = this.getAllWidgetConfigs();
        if(Array.isArray(this.config.widgets)){
          configs = this.config.widgets;
        }else{
          configs = [this.config];
        }
        if(configs.length > 0){
          html.empty(this.containerNode);
        }

        topic.subscribe('changeMapPosition', lang.hitch(this, function(){
          setTimeout(lang.hitch(this, function(){
            this.vmap.centerAt(this.mapExt.getCenter());
          }), 500);
        }));
        this.inherited(arguments);
      },

      onOpen: function(){
        this._setPostionWidthAndLeft();
        html.setStyle(this.domNode, {
          width: this.position.width + 'px'
        });
        if(this.position.width === 0){
          this.panelManager.minimizePanel(this);
        }else{
          this.mapExt = this.vmap.extent;
          this.panelManager.maximizePanel(this);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[NathanHeickLACSD · Accepted solution]

Thanks, Robert.  My final code is below.  I decided to only modify the map extent the first time the panel was opened.  I wish I could find more documentation on the topics that you can subscribe to.  The JavaScript API has so many events you can register event handlers for.  The WAB Developer Edition help seems kind of high level.

      startup: function(){
        var configs = this.getAllWidgetConfigs();
        var initialMapExtent = this.map.extent;
        var firstOpened = false;

        if(Array.isArray(this.config.widgets)){
          configs = this.config.widgets;
        }else{
          configs = [this.config];
        }
        if(configs.length > 0){
          html.empty(this.containerNode);
        }

        this.inherited(arguments);

        topic.subscribe('changeMapPosition', lang.hitch(this, function () {
          if (!firstOpened) {
            setTimeout(lang.hitch(this, function () {
              this.map.setExtent(initialMapExtent);
            }), 500);
            firstOpened = true;
          }
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[NathanHeickLACSD]

Thanks Robert.  I marked my answer as correct because it was the final product I was looking for, but obviously you deserve the credit for me getting there.