Tips (LocalLayer widgets) for more customization and Updating (may help with others too)

4222
12
02-18-2015 09:13 AM
RebeccaStrauch__GISP
MVP Esteemed Contributor
4 12 4,222

8/12/2015 - Quick update after WAB 1.2 release for LocalLayerWidget Today’s update is just to include some notes provided by Daniel Stoelb …nothing else has been modified (PDF has also been updated to reflect this update) :

When working with the Local Layer widget in the 1.2 developer edition, the file location to modify in the config file for it to recognize in the WAB1.2:

  • \arcgis-web-appbuilder-1.2\client\stemapp\predefined-apps\default\config.json
  • \arcgis-web-appbuilder-1.2\client\stemapp\predefined-apps\basic_viewer\config.json
  • \arcgis-web-appbuilder-1.2\client\stemapp\predefined-apps\editor\config.json
  • \arcgis-web-appbuilder-1.2\client\stemapp\predefined-apps\simple_map_viewer\config.json

March 20, 2015 - for a list of WAB resources, check out  Web AppBuilder Developer Edition - Customization Resource List

The information below may be out of date since WAB 1.1 was released yesterday and updated may have been made to the custom widget(s). I have not been able to test.  However, ther still may be some good information below.

Feb 18, 2015 -- work in progress, but lots of info below.  I made this as a separate blog post, and not with a PDF attachment.  Please leave comment if PDF version is preferred.....with shorter intro.  (see my Tips on installing WAB for "blog, all inclusive" vs the Tips for LocalLayer widget, with the PDF attached.....links are shown in second paragraph below.)

Updating to a new LocalLayer widget release (after you’ve already started customizing)

--- may also help with updating other widgets ---

New releases of the LocalLayer widget have been rapid over the past couple weeks as  Adam Drackley and Robert Scheitlin, GISP  have made improvements to the code.  So, what do you do if you’ve already spent time tweaking and customizing your installed version?  First, there is nothing that says you have to upgrade, but in order for Adam, Robert and others to help, it probably is best to upgrade to the latest released version since it may have added a feature, or fixed a bug.

 

The following are tips that may help in setting up a consistent procedure for updating. However, since each customization will vary, steps may need to be expanded or adapted for your own site(s).   [Note: some steps are similar to a first install, so see Tips and Observations for getting Web AppBuilder -  Developer Edition Installed and Tips for using the custom LocalLayer widget with WAB-Dev edition for more detailed instructions.]

First, before an update, I recommend making a backup of your current WAB folder installation folder.  This will give you a recovery point if things get messed up during the custom upgrade to your code.   Upgrading is not difficult, but if doing a lot of cut-and-paste from your files, things happen sometimes. Also, it gives you a location to copy you custom code from. These steps should be performed while WAB and node.js are shutdown.

  • Hint: I also keep a “clean” version of the WAB folder that just contains the default WAB 1.0 and the default custom widgets.  This allows me to start fresh if things get too out of whack. And occasionally, I will start over with this, to undo anything I may not have needed to do.....wait until you feel more comfortable with the process....and always keep a backup.

Note:  I will mention this again later, but it's important enough to mention up front: 

  • Brackets  () [] {} must be balanced and in proper location. 
  • commas may need to be moved, added and/or removed….
  • if not, widgets may not display or work properly.

Installing new version:

  • Go to https://github.com/cmndrbensisko/LocalLayerWidget  to download the latest version.
  • Extract the .zip to a new location (do not directly overwrite current folder).
  • Rename the extracted folder to match the name of the current widget folder.  Recommend “LocalLayer” but it can be called anything, as long as the “url” variables are setup to match it (see initial installation instructions). If upgrading from LL version prior to 1.3, make sure all url variable are set as described.   Instructions below assume folder is called  LocalLayer
  • Rename the current folder(s) to  in <WAB > \client\stemapp\widgets AND  all your created sites <WAB> \server\apps\##\widgets  where the LocalLayer widget exists to LocalLayer_v1.4_old  (or similar).  Keep a list of the apps\## folders that have this folder.  Not all apps will have it, if you did not customize using the LocalLayer widget.
  • Copy the new LocalLayer folder to each of these locations.
    • NOTE: Look at the folder copied and make sure all the files/subfolders are in the “root” of this LocalLayer folder…and not in a subfolder under that.  Make adjustments if needed.  (depending on how you un-zipped the file, this could change)
    • If you have named the new folder something other than the previous name, you will need to update the “url” variables to match the new folder name
  • At this point, any NEW app should use the new version of LocalLayer. However, if you customized the widget in any of your apps, these changes may not yet be shown.

Notes and Steps for transferring to updated version:

  • For existing customized apps, there are key config files that get modified when configuring a typical widget.  Many of these files are found in <WAB-install> \server\apps\##\widgets\   
  • Some KEY files for the LocalLayer widget: (and most likely the default layer, pop-ups, and attribute tables, as well)
    • For layers and pop-up configuration  <WAB> \server\apps\<#>\configs\LocalLayer\config_Local Layer Widget.json
      • Note:  spaces between “Local Layer Widget”
    • For attribute configuration <WAB> \server\apps\<#>\configs\AttributeTable\config_Attribute Table.json
      • Note:  spaces between  “Local Table”
  • The Config files in this directory may NOT have changed.However, there may be features that were added or changed to the widget that may not be reflected unless certain files are updated. Samples of this is when the ability to add Tile services was added, and when customizing the ability to modify the output format for a numeric field in pop-up was added.  For some reason, the Tile service option did not show up for me.  Neither did the pop-up field-formatting (but that was easy to modify in the config file).  There are several tips I can give to help what can or may need to be transfered:
    • Read the readme file to see if there are clues as to what needs to be updated, manually.  This may or may not give you enough info.
    • Test first.  See if things come up in WAB or not.  The new version could very well already work.
    • One thing I found that works for some of the widgets, is to remove them from my app (make sure you have backup first), save, then add the widget back. This should get a clean copy of the widget from the <WAB > \client\stemapp\widgets  folder. You can see as this is happening if you look at the node.js window.
    • If not,start from a "clean" WAB folder (see starting from scratch in the install document in my blog (link in first paragraph above).  Make sure all the custom widgets are in place.  Create a new site, making sure to do something with each widget you updated, and compare the files.
  • Open the customized/backup-up version of each of files  in a editor, preferably one that recognizes JavaScript code.. This will be used for copy-and-paste source.
    • NOTE: There are many editors available that can understand Javascript, There are many available, including free versions NotePad++ with addi-ins. Myself, I use Brackets. but it's all a matter of preference.
    • Poll on user preferences with other options
    • Lots of additional resources, including info on IDE/Editors (towards bottom)   Building Applications Using the ArcGIS API for JavaScript Resources‌
  • Open the config file to edit.  If things need to be added to the config, carefull sut and paste to new file.  Restart WAB to test.
    • Note: Make sure brackets  () [] {} are balanced and in proper location, and commas are where they are needed (may need to be moved, added and/or remove). If not, widgets may not display or work properly.
  • Some additional notes on what you might have customized items is listed below...

Addition tips and links for customization (gathered from testing and GeoNet threads)

NOTE: many widget configuration, including items not configured in the widget UI, can be found in the config files found in  <WAB> \server\apps\<#>\configs\ 

NOTE: Always make sure that () {} [] balance and to add/move/remove comma as needed

  • Attribute Table <WAB> \server\apps\<#>\configs\AttributeTable\config_Attribute Table.json :
    • Change “Layer name” shown in tab in attribute table.  By default it shows the layer name as provided in the feature  service.  To override, modify the “name”: value for the layer in “layerInfos”: .... in "config_Attribute Table.json"
    • Rearranging order of attribute tables shown.  You can do this in "config_Attribute Table.json".  Take care to add comma, if needed, between the "tab section" moved, and to make there isn't one after the last on in list.
    • Note about relationship between "config_Local Layer Widget.json" and "config_Attribute Table.json"   
      • The "name" tag in the Local Layer config file corresponds to the "id" tag in the Attribute Table config. 
      • This "id" need to be unique, and typically has "_#" added to the end, with the # corresponding to the MapServer/# in the "url"
      • The layer does not need to be turned on to get the attribute to show, but may need to tweak the "show" in the Attribute Table to be true. 
      • If layer display is off, but attribute "show": true    double-clicking the record in attribute table does not zoom-to.  Turning display of layer on, zoom-to works.


...more to come later

12 Comments
glennhazelton
Occasional Contributor III

hi Rebecca,

I discovered this widget by following comments on Roberts Identity Widget blog.

I am not a developer but I really am interested in this widget that you have built

my  question is:

is this ready for use by non-developers? or are you anticipating more changes.

the setup looks pretty complex.

and

do you have any advice on  how to use the developer version of the WAB with Portal (10.3).

RebeccaStrauch__GISP
MVP Esteemed Contributor

Hi Glenn,

First, I can't take credit for creating any of the custom widgets (so far anyway).  I'm just using, testing, giving feedback when I can and sharing what I've learned, Since I needed a way to keep track, I created  Web AppBuilder Developer Edition – Customization Resource List‌    which is a living document, meaning I add to it often.  It includes Links to groups/places/people, downloads, and a list of all the custom widgets I have found links to.  It may not be 100% complete but will try to keep it as up to date at I can.  I'm marking those that I have tried in the doc, since some I just haven't had time for yet.

To answer your questions - you do not need to be a developer to use it,  My blogs might make it look worse then it is because I break some of the steps down for those that aren't (i.e fill in between the lines a bit).  However, when using some of the custom widgets or other tweaks, you might need to be able to edit some of the files (in editor like Notepad++ with addins, although I prefer Brackets‌‌  or some other that understands JavaScript syntax).  Main tip with any of that, is watch for typos, and make sure you brackets and commas are in the right place.  And although I haven't installed with Portal myself, check out Tips and Observations for getting Web AppBuilder -  Developer Edition Installed‌  since that may help.

Best think is just to dive in.  Since it's local, and you can start over if things get too messy, that is sometime the best way to learn.  Have fun!

Felipe_SalomónLópez_Rodríguez

Hi Rebecca Strauch, GISP,

I Felipe Lopez, from Iquitos, Loreto, Peru. We are here implementing a map viewer WAB for our Spatial Data Infrastructure, so I try to use the layer locally widget, I make all the settings you indicate on the blog github, I can add layers, however when making a click on the widget does is an update of the page and not let me see the layers stored. I need your collaboration please.

RebeccaStrauch__GISP
MVP Esteemed Contributor

Hi Felipe Salomón López Rodríguez​,

sorry about the delay in responding, I'm out of the office this week.

if you haven't already, you may be better off posting your question at LocalLayerWidget and AccessifizrWidget   Or the get hub site since I am not the author, just sharing tips (and not able to research right now) but there may be additional things to try at Tips for using the custom LocalLayer widget with WAB-Dev edition   Or on Tapas Das'  Installing Robert’s Enhanced Search Widget for the Web AppBuilder    And   https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.tapasdas.com%2FWABv2.pdf      (....much more than just the enhanced search widget)

Felipe_SalomónLópez_Rodríguez

Hi Rebecca Strauch, GISP​,

really appreciate your answer, you kindly share me contact the author (name, email, working institution, telephone) Local Layer Widget please, to make inquiries and thus solve the problems that came my way.

RebeccaStrauch__GISP
MVP Esteemed Contributor

Posting on the forum page for the widget would still be your best bet, but the oruginal  author is Adam Drackley  with additional work by Robert Scheitlin, GISP​ , but unless they follow you, you can not send a direct messagE.  I've tagged the  here, in case they can answer the question, or branch it to the correct geonet space.

RobertScheitlin__GISP
MVP Esteemed Contributor

Felipe,

  Sounds like you may have added the widget in the WAB UI Widgets tab instead of manually adding it to the config.json as the readme.md states.

Please note that this is not an in-panel widget.

WebAppBuilder Steps:

To add this widget to your ArcGIS Web AppBuilder environment,

add the widget to your \client\stemapp\widgets directory,

and add a reference to the widget in the standard Default configuration

located at \client\stemapp\predefined-apps\default\config.json,

under the widgetOnScreen section.

AmyKlug
Regular Contributor

Anyone had luck with the LocalLayer Filter widget with WABDE 2.2?

https://github.com/daFiter/localLayer_filter

RebeccaStrauch__GISP
MVP Esteemed Contributor

The Local Layer widget was updated in Nov for LocalLayerWidget and AccessifizrWidget for 2.2 

Release LocalLayer v2.2 · cmndrbensisko/LocalLayer · GitHub 

I don't see an update date for the link you gave, but it looks like it is older.  You may need to tweak it for 2.2  ??

RickeyFight
MVP Regular Contributor

Amy,

I do have a version that does work with 2.2

But the one in the link you provided does not. 

I have not looked into why one works and the other does not. 

AmyKlug
Regular Contributor

Thanks Rickey, won't waste my time on that one anymore. Is there a site where someone can download the version that works with 2.2?

RickeyFight
MVP Regular Contributor

Amy PM me on geonet and I can talk to you about the widget. 

About the Author
Worked with GIS for 30+ years for the Alaska Dept of Fish and Game.