Which WAB to choose Portal? Online or devleoper version?

2014
20
11-04-2016 07:37 AM
NavKa
by
New Contributor III

Hello

I am little confused here. I am trying to create a web app using WAB. we have ArcGIS server and portal for our organization. First I started with portal WAB but since online version is most updated and has more capability I moved on to online WAB using layers from the ArcGIS server. But now we have the need to of more customization so I thought of installing the developer edition. Although I am not a programmer and just starting mu journey by learning from online forms and using publically available widgets or codes. Can someone guide me which would be my best bet Portal? or Online or Developer edition? Our main requirements are privacy of data we don't want data off site. More customized website as we go forward and I learn more coding. More capabilities. And annually adding more data. Basically this is 1st year then we need timeline analysis for future.

one more question do they release developer edition with online WAB edition?

Any help is greatly appreciated.

Thanks

Nav.

0 Kudos
20 Replies
RobertScheitlin__GISP
MVP Emeritus

Nav,

   Have you added the LayerList widget to your app?

0 Kudos
NavKa
by
New Contributor III

Yes it is there but it doesn't show any layers. legend shows for 2 layers that are on.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Nav,

   What kind of layers are they?

0 Kudos
NavKa
by
New Contributor III

They are feature layers one with point symbols and one with polygons.

I was wondering if the code below I copied from you post is causing any problems.

Is it possible to send the default code as I changed it for all apps.

Thanks

Nav

If you want to change this for all apps you produce in the future then change this file: client\stemapp\widgets\LayerList\LayerListView.js

If you want to change on specific app then change this file:server\apps\APP##\widgets\LayerList\LayerListView.js

 

  1.       setTimeout(lang.hitch(this,  
  2.                            this._onRowTrClick,  
  3.                            layerInfo,  
  4.                            imageShowLegendNode,  
  5.                            layerTrNode,  
  6.                            tableNode), 300);  
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Nav,

   That is correct.  

  1. What version of WAB Dev are you using ?
  2. Can you show me exactly where you are adding these lines?
0 Kudos
NavKa
by
New Contributor III

I am using 2.2

here is the snap shot of the code I am adding.

Thanks

Nav

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Nav,

   Yes that code is the issue. You have copied the code from the older version that was for 2.0 or earlier. the correct code for 2.2 is:

      setTimeout(
        lang.hitch(this,
          this._onRowTrClick,
          layerInfo,
          imageShowLegendDiv,
          layerTrNode,
          tableNode), 
      300);

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

NavKa
by
New Contributor III

Thanks! I changed the code but layers are still not showing.

Can you please check the code incase I need to take out anything from above this code.

Thanks

Nav

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Nav,

  Here is the whole working 2.2 addLayerNode function in case you missed something:

    addLayerNode: function(layerInfo, level, toTableNode) {
      var layerTrNode = domConstruct.create('tr', {
          'class': 'jimu-widget-row layer-row ' +
            ( /*visible*/ false ? 'jimu-widget-row-selected' : ''),
          'layerTrNodeId': layerInfo.id
        }, toTableNode),
        layerTdNode, ckSelectDiv, ckSelect, imageNoLegendDiv,
        imageNoLegendNode, popupMenuNode, i, imageShowLegendDiv, popupMenu, divLabel;

      layerTdNode = domConstruct.create('td', {
        'class': 'col col1'
      }, layerTrNode);

      for (i = 0; i < level; i++) {
        domConstruct.create('div', {
          'class': 'begin-blank-div jimu-float-leading',
          'innerHTML': ''
        }, layerTdNode);
      }

      imageShowLegendDiv = domConstruct.create('div', {
        'class': 'showLegend-div jimu-float-leading',
        'imageShowLegendDivId': layerInfo.id
      }, layerTdNode);

      ckSelectDiv = domConstruct.create('div', {
        'class': 'div-select jimu-float-leading'
      }, layerTdNode);

      ckSelect = new CheckBox({
        checked: layerInfo.isVisible(), //layerInfo.visible
        'class': "visible-checkbox-" + layerInfo.id
      });

      domConstruct.place(ckSelect.domNode, ckSelectDiv);

      imageNoLegendDiv = domConstruct.create('div', {
        'class': 'noLegend-div jimu-float-leading'
      }, layerTdNode);

      var imageName;
      if (layerInfo.isTable) {
        imageName = 'images/table.png';
      } else {
        imageName = 'images/noLegend.png';
      }

      imageNoLegendNode = domConstruct.create('img', {
        'class': 'noLegend-image',
        'src': this.layerListWidget.folderUrl + imageName,
        'alt': 'l'
      }, imageNoLegendDiv);

      if (layerInfo.noLegend || layerInfo.isTable) {
        domStyle.set(imageShowLegendDiv, 'display', 'none');
        domStyle.set(ckSelectDiv, 'display', 'none');
        domStyle.set(imageNoLegendDiv, 'display', 'block');
      }

      // set tdNode width
      domStyle.set(layerTdNode, 'width', level * 12 + 40 + 'px');

      var layerTitleTdNode = domConstruct.create('td', {
        'class': 'col col2'
      }, layerTrNode);

      var grayedTitleClass = '';
      try {
        if (!layerInfo.isInScale()) {
          grayedTitleClass = 'grayed-title';
        }
      } catch (err) {
        console.warn(err.message);
      }
      var layerTitleDivIdClass = 'layer-title-div-' + layerInfo.id;
      divLabel = domConstruct.create('div', {
        'innerHTML': layerInfo.title,
        'class':layerTitleDivIdClass + ' div-content jimu-float-leading ' + grayedTitleClass
      }, layerTitleTdNode);

      //domStyle.set(divLabel, 'width', 263 - level*13 + 'px');

      layerTdNode = domConstruct.create('td', {
        'class': 'col col3'
      }, layerTrNode);

      // add popupMenu
      popupMenuNode = domConstruct.create('div', {
        'class': 'layers-list-popupMenu-div'
      }, layerTdNode);

      popupMenu = new PopupMenu({
        //items: layerInfo.popupMenuInfo.menuItems,
        _layerInfo: layerInfo,
        box: this.layerListWidget.domNode.parentNode,
        popupMenuNode: popupMenuNode,
        layerListWidget: this.layerListWidget,
        _config: this.config
      }).placeAt(popupMenuNode);
      this.own(on(popupMenu,
        'onMenuClick',
        lang.hitch(this, this._onPopupMenuItemClick, layerInfo, popupMenu)));

      //add a tr node to toTableNode.
      var trNode = domConstruct.create('tr', {
        'class': '',
        'layerContentTrNodeId': layerInfo.id
      }, toTableNode);

      var tdNode = domConstruct.create('td', {
        'class': '',
        'colspan': '3'
      }, trNode);

      var tableNode = domConstruct.create('table', {
        'class': 'layer-sub-node',
        'subNodeId': layerInfo.id
      }, tdNode);

      //bind event
      this.own(on(layerTitleTdNode,
        'click',
        lang.hitch(this,
          this._onRowTrClick,
          layerInfo,
          imageShowLegendDiv,
          layerTrNode,
          tableNode)));

      setTimeout(
        lang.hitch(this,
          this._onRowTrClick,
          layerInfo,
          imageShowLegendDiv,
          layerTrNode,
          tableNode),
      300);

      this.own(on(imageShowLegendDiv,
        'click',
        lang.hitch(this,
          this._onRowTrClick,
          layerInfo,
          imageShowLegendDiv,
          layerTrNode,
          tableNode)));

      this.own(on(layerTrNode,
        'mouseover',
        lang.hitch(this, this._onLayerNodeMouseover, layerTrNode, popupMenu)));
      this.own(on(layerTrNode,
        'mouseout',
        lang.hitch(this, this._onLayerNodeMouseout, layerTrNode, popupMenu)));
      this.own(on(ckSelect.domNode, 'click', lang.hitch(this,
        this._onCkSelectNodeClick,
        layerInfo,
        ckSelect)));

      this.own(on(popupMenuNode, 'click', lang.hitch(this,
        this._onPopupMenuClick,
        layerInfo,
        popupMenu,
        layerTrNode)));

      return {
        currentNode: layerTrNode,
        subNode: tableNode
      };
    },
NavKa
by
New Contributor III

Thanks Rob that worked perfectly. I was changing main widget and not the app widget.

Thank you so much for your help! Really appreciate it!

0 Kudos