group widgets in folder in Ldockable Panel

aishvaryvardhan — Wed, 13 Dec 2017 11:08:59 GMT

Hi,

I am using jewelry box theme, i want to group widgets in Ldockable panel. I am able to group them by increasing the max-widget in config.json. but they are not displaying in frontend. Only the first one is coming.
is there any way i can achieve it ?
please find snapshot

Any help on this is highly appreciated.
Thanks

Ash

Re: group widgets in folder in Ldockable Panel

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:25:52 GMT

Ash,

The LDockablePanel has to be extended to support this. The reason that the maxWidget is not a UI configurable option is that there is no sizing code to support adding more than one widget in the panel.

Here is an update to the Panel.js to add that basic support:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2017 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/html',
    'require',
    'dojo/topic',
    'dijit/_TemplatedMixin',
    'dojo/text!./Panel.html',
    'jimu/BaseWidgetPanel',
    'jimu/dijit/LoadingIndicator',
    'jimu/utils',
    'jimu/BaseWidgetFrame',
    'dojo/_base/array'
  ],
  function(
    declare, lang, html, require, topic,
    _TemplatedMixin, template, BaseWidgetPanel, LoadingIndicator, utils,
    BaseWidgetFrame, array
  ) {
    //jshint unused:false
    /****
    This panel is dockable at left
    ****/
    return declare([BaseWidgetPanel, _TemplatedMixin], {
      baseClass: 'jimu-panel jimu-ldockable-panel',

      templateString: template,

      width: 0,

      postCreate: function(){
        this.inherited(arguments);
        this.maxWidth = this.position.width;
      },

      startup: function(){
        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);
        }

        this.inherited(arguments);
      },

      loadAllWidgetsInOrder: function(){
        console.info(this.config.maxWidgets);
        var configs = this.getAllWidgetConfigs();
        if(Array.isArray(this.config.widgets)){
          configs = this.config.widgets;
        }else{
          configs = [this.config];
        }
        array.forEach(configs, function(widgetConfig){
          var frame, loading;
          if(widgetConfig.visible === false){
            return;
          }
          loading = new LoadingIndicator();
          frame = this.createFrame(widgetConfig);
          frame.containerNode.style.height = (100 / parseInt(this.config.maxWidgets)) + "%";
          this.addChild(frame);
          frame.setLoading(loading);

          this.widgetManager.loadWidget(widgetConfig).then(lang.hitch(this, function(widget){
            frame.setWidget(widget);
            widget.startup();
          }));
        }, this);
      },

      createFrame: function(widgetSetting){
        /*jshint unused: false*/
        return new BaseWidgetFrame();
      },

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

      setPosition: function(position){
        this.inherited(arguments);
        topic.publish('changeMapPosition', {left: this.position.left + this.position.width});
      },

      onMaximize: function() {
        html.addClass(this.barNode, 'max');
        html.removeClass(this.barNode, 'min');

        this.position.left = 0;
        this.setPosition(this.position);
        this.inherited(arguments);
      },

      onMinimize: function() {
        html.removeClass(this.barNode, 'max');
        html.addClass(this.barNode, 'min');

        //on minimize, we can't set width/height = 0 to minimize because we use border-box model
        //and the content height/width can't be nagative
        //go here for more information: http://dev.w3.org/csswg/css-ui/#box-sizing
        this.position.left = 0 - this.position.width;
        this.setPosition(this.position);
        this.inherited(arguments);
      },

      resize: function(){
        this._setPostionWidthAndLeft();

        var style = utils.getPositionStyle(this.position);
        style.position = 'absolute';
        html.setStyle(this.domNode, style);
        topic.publish('changeMapPosition', {left: this.position.left + this.position.width});
      },

      _setPostionWidthAndLeft: function(){
        if(window.appInfo.isRunInMobile){
          var box = html.getMarginBox(window.jimuConfig.layoutId);
          this.position.width = box.w * 0.8;
          if(this.position.width > this.maxWidth){
            this.position.width = this.maxWidth;
          }
        }else{
          this.position.width = this.position.width;
        }

        // if(this.windowState === 'minimized'){
        //   this.position.left = 0 - this.position.width;
        // }else{
        //   this.position.left = 0;
        // }
      },

      _onBarClick: function() {
        if (this.windowState === 'maximized') {
          this.panelManager.minimizePanel(this);
        } else {
          this.panelManager.maximizePanel(this);
        }
      }

    });
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: group widgets in folder in Ldockable Panel

aishvaryvardhan — Thu, 14 Dec 2017 12:04:52 GMT

Seems great, will check with my app

Thanks a lot Robert

Re: group widgets in folder in Ldockable Panel

RobertScheitlin__GISP — Thu, 14 Dec 2017 14:02:56 GMT

Great don't forget to mark this as answered as soon as you test and see that it is.

topic Re: group widgets in folder in Ldockable Panel in Web AppBuilder Custom Widgets Questions

group widgets in folder in Ldockable Panel

Re: group widgets in folder in Ldockable Panel

Re: group widgets in folder in Ldockable Panel

Re: group widgets in folder in Ldockable Panel