topic Re: Which WAB to choose Portal? Online or devleoper version? in ArcGIS Web AppBuilder Questions

Which WAB to choose Portal? Online or devleoper version?

NavKa — Fri, 04 Nov 2016 14:37:40 GMT

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.

Re: Which WAB to choose Portal? Online or devleoper version?

RickeyFight — Fri, 04 Nov 2016 14:47:36 GMT

Look here for a list of custom Webapps:

/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list

I think developer is the best because it gives you the most control over the webapp.

The developer edition usually gets released a few weeks after the online version.

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Fri, 04 Nov 2016 14:47:54 GMT

Nav,

The developer edition of WAB comes out a few weeks after the latest AGOL version. The On premise Portal version of WAB is the most behind as it is always the previous version of WAB. You can only do code customizations and use custom widgets using WAB Dev (not Portal or AGOL versions).

Re: Which WAB to choose Portal? Online or devleoper version?

RebeccaStrauch__GISP — Fri, 04 Nov 2016 14:55:08 GMT

Lot's of questions there. I'll give my two-cents on them.

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

I'll answer this one first. AGOL (Online) will always have updates first. WAB-developer edition usually has a new release with most/all of the updates within 4-6 weeks (or sometimes less). The onsite Portal will always be behind that and is currently still at least one update behind from what I understand (I do not have the local Portal installed).

i don't think the delay for the dev edition is an issue since it any newly introduced bugs/issues with the online version are sometimes found and corrected, or a workaround provided before the dev edition is released.

My recommendation is to use the developer edition for the flexibility of adding additional customization. although the AGOL version does seem to adopt some of the user provided customization, my guess is some will never be incorporated.

For security, I would take advantage of you ArcGIS Server security options, and use a proxy to provide access to those services if needed. with that, you can keep all you data and services on premise, and just use AGOL to "pass thru" the URL to the services. developer edition also has a custom widget available that allows you to use you "local" ARcGIS Server services.

To see some information and updates on many of the WAB versions and custom widgets, I have a blog post that is updated regulary

/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list?sr=search&searchId=24e72e62-4e9e-4826-9ec5-dfe0cd781512&searchIndex=0‌

which also has links to install tips, although the help has been improved too.

also, make sure you check out https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=493c23ae-16a9-49f3-ad47-52aa5e850fba&searchIndex=0‌ for news on customization and widgets.

Re: Which WAB to choose Portal? Online or devleoper version?

DerekLaw — Fri, 04 Nov 2016 22:16:11 GMT

Hi Nav,

Just wanted to add some comments onto the great responses above:

- Web AppBuilder embedded in Portal for ArcGIS 10.5 (scheduled to be released before the end of 2016) will have the same functionality that is in Web AppBuilder in ArcGIS Online (as of the Sept 2016 update);

- You should only use Web AppBuilder for ArcGIS Developer Edition to work with custom widgets and themes; while it is technically possible to enable with Web AppBuilder in Portal for ArcGIS - this is not supported, nor recommended by Esri;

Please review question 1 in this blog post: Clarifying 3 questions about Web AppBuilder for ArcGIS | ArcGIS Blog

Hope this helps,

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Thu, 10 Nov 2016 18:44:09 GMT

Thanks everyone for great replies and clarifying things for me.

One question which editor do you use to edit code in WAB developer version? Like if I want to add just few lines to the WAB code and not developing my own widget.

Thanks again!

Nav

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Thu, 10 Nov 2016 18:47:19 GMT

Nav,

For that Notepad++ will work fine. I personally use Atom.io.

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Thu, 10 Nov 2016 20:33:06 GMT

Thanks Robert!

Ok one more question sorry if it is getting too much. So I want to bring in my ArcGIS online app into the WAB developer edition.

I downloaded it but I am not able to add it to the WAB Dev. It gives error that only the people who have ArcGIS account with our organization can use it.

WAB for developer is connected to out Portal and not ArcGIS online. Is there a way I can bring in my app from AGOL for further customization?

Thank you so much!

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Thu, 10 Nov 2016 21:05:56 GMT

Nav,

When you download a WAB app from AGOL it's code is minified and really unsuitable for further customization. Your best bet is to start fresh in WAB Dev.

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Fri, 11 Nov 2016 19:26:41 GMT

Thanks Rob!

I was using your custom widget https://community.esri.com/thread/160914?q=layer

to expand all layers by default but now I can't see my layers in the operation layers list. I can see the data on the map and can use layers

in widgets but I can't see them to turn them on or off. Can you help please.

Thanks

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Fri, 11 Nov 2016 20:13:32 GMT

Nav,

Have you added the LayerList widget to your app?

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Fri, 11 Nov 2016 20:41:00 GMT

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

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Fri, 11 Nov 2016 20:46:10 GMT

Nav,

What kind of layers are they?

Re: Which WAB to choose Portal? Online or devleoper version?

SarojThapa1 — Fri, 11 Nov 2016 21:55:39 GMT

Try WAB developer edition. It offers more control, flexibility, and extensibility. Have a look at esri github in https://github.com/Esri/solutions-webappbuilder-widgets

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Mon, 14 Nov 2016 17:13:29 GMT

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

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

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Mon, 14 Nov 2016 17:16:13 GMT

Nav,

That is correct.

What version of WAB Dev are you using ?
Can you show me exactly where you are adding these lines?

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Mon, 14 Nov 2016 17:42:07 GMT

I am using 2.2

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

Thanks

Nav

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:18:42 GMT

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.

Re: Which WAB to choose Portal? Online or devleoper version?

NavKa — Mon, 14 Nov 2016 19:08:14 GMT

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

Re: Which WAB to choose Portal? Online or devleoper version?

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:18:45 GMT

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