Latest Contributions by NathanHeick

I am having the same problem on version 10.6 using the Attribute Table.  If I copy-paste NULL values from one field to another, it pastes the text representation of NULL, not the value NULL.  Also, if I backspace in the field, it seems to leave an empty string in the cell, not NULL.  If I then right-click and select Delete, I still have an empty string in the cell.  This is a bug to me. If, however, I use the Attribute Editor, I can just backspace in the field and it leaves a NULL value in the cell.  It behaves quite nice. ... View more

Yes, I was able to update the hosted feature service using Python, but I had to republish the service each time from an MXD.  This process is fairly involved.  You have to create a service definition draft, analyze it, generate a service definition, upload the service definition to ArcGIS Online, republish the service from the service definition, and reapply the service item info and item data to the overwritten service.  Creating the service definition draft involves arcpy.mapping and modifying XML.  To make the primary REST API requests, you have to make many other requests to look up the service and service definition item ids, item info, item data, item metadata, item folder id, and item folder name based on the service name.  Uploading the service definition is a multipart asynchronous process.  Publishing the service definition is also an asynchronous process that multiple REST calls.  Finally, when you overwrite the service definition and service items, you lose most of the item info, item data, and metadata in the process.  This requires more REST calls to reapply that information to the new service definition item and the updated service item.  This is necessary to retain your popup configurations, item descriptions, and any item properties you usually set in AGOL. Also, the AGOL Assistant probably uses the same REST endpoint (applyEdits) to update item data, so it makes sense you would get the same issue. Thanks, Nathan ... View more

Hi Ahmad, Because of the issue with the geoprocessing tool, we abandoned the idea of using GUIDs for relationship classes.  We ended up using integer IDs that were maintained by ArcObjects customizations.  The big issue was we could not rely on OBJECTIDs to be maintained during replication, so we were concerned our relationships would get broken.  So, we looked at GlobalIDs, but the issue with the geoprocessing tool made it hard to meet a requirement to drop and recreate the relationship classes on a weekly basis.  Later on, I believe we also noticed that feature-linked annotation requires you to use OBJECTIDs.  My memory may be wrong, but I believe that is correct.  You really have to test everything on a small scale before deciding to move forward with any approach.  I tried replication and editing to see how the software behaved in each case.  I noticed your comment below about GlobalIDs acting like OBJECTIDs.  We were also concerned about loading in data.  Custom integer IDs avoids that problem. Thanks, Nathan ... View more

Hi Cindy, I actually wrote our app using a color field which stores hexadecimal color values.  I did this because of the way the rest of our customizations are designed.  The solution I proposed to you is what I would do if I only was doing that one customization.  Since I hadn't tested my recommendation and you are on a deadline, I took the time to actually build a story map from scratch using three points and I downloaded the latest source code and modified it.  The hardest part was actually updating the data.  I realized that all of the following fields need to be set appropriately for each feature on each tab when you copy the data to the All tab. number - Typically, you would start counting at 1 on each tab. shortlist_id - Unique ID for shortlist feature.  Just copy __OBJECTID. tab_id - Tab number starting at 0. color_id - Tab number whose color you want to use to color the point. Once the data was set up properly, I made an All tab.  Finally, I downloaded the source code and modified it.  If you search for the file MainView.js in the source code, on line 884, you should see the following: _this.buildLayer(        theme.features.sort(SortByNumber),        color ); I replaced this with: $.each(theme.features.sort(SortByNumber), function(j, feature) {        _this.buildLayer([feature], themes[feature.attributes.color_id].color); }); The final result was: So, at least we know this approach works on version 2.5.0. Thanks, Nathan ... View more

Hi Cindy, From my experience, the easiest way to do this is to make a new tab called All in the story map builder and give it a neutral color.  Then, you need to add a field to the source data called color_id.  This field will store the index of the tab you want to use to set the color of the point.  Tabs are numbered starting at 0.  For the category tabs, color_id would be the same as tab_id .  Then, for the All tab you would make a copy of all of the points from the other tabs and set the tab_id to the index of the All tab, leaving the color_id field alone set to the source tab_id.  From this point on, I think the JavaScript changes are one line.  Instead of pulling the color from the current tab, you tell it to use the color from the tab with index color_id. Let me know if you need any help on this.  You would have to customize the source code and host it on your own web server. Nathan ... View more

No, I'm using a Shortlist story map, which also has tabs but only has one map.  I believe the one you are using has one map per tab.  When you switch tabs, it turns the map on the new tab on and the map on the previous tab off. If you want to continue with the approach above, you would need to create one BasemapGallery widget for each map.  You would probably want to add a variable to _mainView that points to an array of the BasemapGallery widgets and they would be indexed the same way as the tabs and maps.  Then, you would add one more block of code to the on selection change callback function.  If the active map index equals the index of the BasemapGallery widget that was just selected, then call the select method on the BasemapGallery widgets of the other maps.  This will trigger the selection-change event on the non-active widgets, but they will just update themselves and not start an infinite loop. It looks like the maps array is called app.maps.  The expression $('.mainMediaContainer.active').index() produces the index of the active tab.  You need to wrap the code in step 2 in a for loop iterating over app.maps.  Then, you need to add the condition I talked about above in the selection-change event handler to make the active widget update the non-active widgets.  You'll need to add divs inside each map div using jQuery to store the widgets.  Explore the DOM using the Developer Tools (F12) in most browsers to see the structure of the DOM.  You can also see how Esri uses jQuery and CSS classes to store some of the application state. As for resizeBasemapGallery, I would probably add a parameter called index and modify the code to only apply to the tab with the given index.  Then, on a basemap selection-change, only resize the BasemapGallery widget for the active map.  I forgot something else.  I am calling resizeBasemapGallery in a few other places in the code so that it resizes when you change the window size, etc.  I can't look up those other places sometime.  The jQuery Pocket Reference from O'Reilly is a good way to pickup the basics of jQuery.  I started with the code from GitHub and set up Node and Grunt to automate the build process. Have a good weekend! Nathan ... View more

Good Morning Brandon, Let me provide all the code changes that I made for you.  It's similar to what you were doing, but I modified the style and made the widget smaller as the window shrinks. 1.  index.html - Here I made the following CSS changes. #basemapGallery {     position: absolute;     bottom: 55px;     right: 10px;     z-index: 50; } .esriBasemapGalleryNode {     border: 1px solid #ccc;     box-shadow: 0px 0px 7px #000;     -moz-box-shadow: 0px 0px 7px #000;     -webkit-box-shadow: 0px 0px 7px #000; } .esriBasemapGalleryLabelContainer {    font-size: 12px;    background-color: #FFFFFF;    height: 1.75em;    border-top: 1px solid #ccc; } .esriBasemapGalleryThumbnail {   border: 0px;   margin: 0px;   width: 100%;   box-shadow: none;   -moz-box-shadow: none;   -webkit-box-shadow: none; } .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {     border: 0px;     margin: 0px; } Then, I added a div called basemapGallery inside the map div. <div id="map">     <div id="basemapGallery"></div> </div> 2.  Core.js - Here I added the following code inside the function initializeUI to create and configure the basemap gallery.  var topoLayer = new BasemapLayer({     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" }); var topoBasemap = new Basemap({        layers: [topoLayer],     title: "Topo",     thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg" }); var imageryLayer = new BasemapLayer({     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }); var hybridReferenceLayer = new BasemapLayer({     styleUrl: "http://yourstyleurl",     type: "VectorTileLayer" }); var imageryBasemap = new Basemap({          layers: [imageryLayer, hybridReferenceLayer],      title: "Satellite",      thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg" }); var basemapGallery = new BasemapGallery({        map: app.map,        basemaps: [imageryBasemap],     showArcGISBasemaps: false }, "basemapGallery"); basemapGallery.on("selection-change", function () {     if (basemapGallery.basemaps[0] === topoBasemap) {              basemapGallery.remove(topoBasemap.id);              basemapGallery.add(imageryBasemap);     } else if (basemapGallery.basemaps[0] === imageryBasemap) {              basemapGallery.remove(imageryBasemap.id);              basemapGallery.add(topoBasemap);         };        _mainView.resizeBasemapGallery(); }); basemapGallery.startup(); 3.  MainView.js - Here I added the following code inside the constructor function for the MainView class.  This resizes the basemap gallery widget based on how big the screen is. this.resizeBasemapGallery = function() {     if ($('.map .logo-sm').length === 1) {         $('.esriBasemapGalleryLabelContainer').css('display', 'none');         $('#basemapGallery').css({             'height': '40px',             'width': '72px',             'bottom': '30px',             'right': '0px'               });         $('.esriBasemapGalleryNode').css({             'height': '35px',             'width': '52px'               });         $('.esriBasemapGalleryThumbnail').css({             'height': '33px',             'width': '50px'               });        }     else {         $('.esriBasemapGalleryLabelContainer').css('display', 'block');         $('#basemapGallery').css({             'height': '95px',             'width': '120px',             'bottom': '55px',             'right': '10px'               });         $('.esriBasemapGalleryNode').css({             'height': '88px',             'width': '98px'               });         $('.esriBasemapGalleryThumbnail').css({             'height': '67px',             'width': '96px'               });        } } ... View more

Hi Brandon, I’ll check my code tomorrow, but I don’t remember that being an issue and it seems strange.  Can you post your code for the button you made?  I really just used a BasemapGallery widget and used an event handler on the basemap change to toggle between two maps.  It might be the way you’re setting the basemap.  It doesn’t sound like it withstands a map refresh. ... View more

For what it is worth, I was also experiencing this issue at ArcGIS Desktop 10.1 SP1.  I was having issues with some large property boundaries and some large dissolved features, but not point and smaller line features.  This issue is fixed at least at version 10.4.1, so I upgraded and the problem went away without modifying the data at all. ... View more

Hi Brandon, The BasemapToggle seems to be simpler than the BasemapGallery widget.  It may not support your basemap.  I think that is why I ended up using the BasemapGallery widget and tried to make it behave like a BasemapToggle.  I only have one basemap in the gallery and I use the selection-change event to toggle the basemaps.  One of my basemaps includes the World Imagery service and an Esri vector tile reference service.  Here is a portion of the JavaScript I used.  This doesn't include loading the modules, the HTML, or the CSS.  However, you can see that I created BasemapLayers to make Basemaps, then used the Basemaps in the BasemapGallery widget.  This would probably work for you and is highly flexible about the source services you use.  I don't have any experience with your story map type, so I don't want to make any recommendations about how to handle each map.  I can imagine that each Map object needs this process repeated so that it has its own set of objects. var topoLayer = new BasemapLayer({    url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" }); var topoBasemap = new Basemap({    layers: [topoLayer],    title: "Topo",    thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/topo_map_2.jpg" }); var imageryLayer = new BasemapLayer({    url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }); var hybridReferenceLayer = new BasemapLayer({    styleUrl: "http://lacsdgis.maps.arcgis.com/sharing/rest/content/items/af6063d6906c4eb589dfe03819610660/resources/styles/root.json",    type: "VectorTileLayer" }); var imageryBasemap = new Basemap({    layers: [imageryLayer, hybridReferenceLayer],    title: "Satellite",    thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/imagery_labels.jpg" });   var basemapGallery = new BasemapGallery({     map: app.map,     basemaps: [imageryBasemap],     showArcGISBasemaps: false }, "basemapGallery");   basemapGallery.on("selection-change", function () {     if (basemapGallery.basemaps[0] === topoBasemap) {         basemapGallery.remove(topoBasemap.id);         basemapGallery.add(imageryBasemap);     } else if (basemapGallery.basemaps[0] === imageryBasemap) {         basemapGallery.remove(imageryBasemap.id);         basemapGallery.add(topoBasemap);     }; }); basemapGallery.startup(); Sorry for the code formatting, but I can't find the tools for formatting it properly.  I just see really basic tools. Nathan ... View more

Hi Brandon, You need to start by reading the JavaScript API documentation and become familiar with adding widgets to applications.  There are two options for basemap widgets, the BasemapGallery widget and the BasemapToggle widget.  The basic pattern is to add a div element as a child to the map div.  This will hold the layout of the widget.  Next, you need to create an instance of the widget in the JavaScript code, setup any event handlers, and start the widget up.  Finally, you need to modify the CSS if you don't like the styling of the widget. I chose the BasemapGallery widget and made it look like the BasemapToggle by using only one basemap at a time and wiring an event handler that changes the basemap everytime the widget is clicked.  I built my own basemap that combines the World Imagery service with a vector tile service for reference labels.  I put the JavaScript code in the initializeUI function in the Core.js file and added the appropriate module imports to the top of the file.  I tweaked the CSS to give it a different look and feel.  Finally, I added some code to resize the widget so that it is smaller on a mobile device. You may have to use jQuery's .append method to add the widget div to the map div.  I just edited index.html because the map div was defined there already.  If you have multiple maps in your story map, the map divs may get injected at run time.  Also, you may need one widget for each map in the story.  So, you need to understand the particular code base you are working with and how to create widgets using the API.  I had never done this before, but I figured out the concept and applied it.  The JavaScript API is doing most of the work.  You are just specifying where the widget will go, configuring the widget, and starting it up. Nathan ... View more

Hi Feng, I updated my original post after doing some testing.  My code also had a CSS rule to make the header background color transparent.  You need to add that.  Also, the CSS rule for making the nav-bar transparent was not accurate.  The JavaScript code sets a CSS rule on the nav-bar background color to !important, which overrides the CSS rule I told you to add.  If you add !important to yours too, it will override the one from the JavaScript.  I didn't actually use !important in my code.  I ended up modifying the JavaScript, which would be harder for you to understand up front. I had never touched CSS before this app.  I just used the developer tools (F11) to navigate the DOM and see which CSS classes and element ids were being used.  I looked at the CSS rules to see how they related to what's on screen.  In the developer tools, you can modify the web page styles in memory to test things out before you make the change in index.html.  Furthermore, I didn't touch the JavaScript until I had accomplished everything I could in CSS.  Once you get into the JavaScript, you have to follow the execution of the JavaScript code starting in index.html.  After a little filtering of information, you realize that almost everything is in six files.  There is a file for config, the MainView, the NavBar, the TilePanel, the DetailPanel, etc.  There are a lot of files you don't need to understand.  I added a Search widget in the map with custom behavior, a basemap toggle, layers that turn on and off with individual tabs, layers that turn on and off with individual points, tab specific zoom extents, and a county specific zoom button.  Some of these things Esri had already started in the code or have implemented since. Have fun, Nathan ... View more

Hi Feng, Here are the answers to your questions: 1.   First, you have to make the background of the header and the navigation bar transparent.  To do that, you could add the following CSS rules to index.html: <style>         /* CUSTOM CSS RULES */         #header {                 background-color: transparent;         }         #nav-bar {                 background-color: transparent !important;         } </style> Then you need to set the background image on the entire area including both the navigation bar and the header.  This area is called the headerNavBarPanel.  To do this, you can change the CSS I provided earlier to the following: <style>         /* CUSTOM CSS RULES */         #headerNavBarPanel {                 background-image: url("resources/banner.jpg");                 background-size: 100% 100%;         }         #header {                 background-color: transparent;         }         #nav-bar {                 background-color: transparent !important;         } </style> There is actually code in the application setting the header and nav-bar colors using jQuery.  This CSS overrides the styles set in the code and is easier for you to add and remove later. 2.   You will have to download the source code to change the tab colors and tab text colors.  It is stored in an object on line 897 of the MainView.js file.  The location of the MainView.js file in the source code hierarchy is shown on the linked GitHub page.  You can easily do a file search for MainView.js as well. var colors = {         header: app.data.getWebAppData().getThemeOptions().headerColor,         tabText: '#d8d8d8',         tab: '#666',         tabTextActive: '#fff',         tabActive: '#999',         tabTextHover: '#fff',         tabHover: '#666' }; If you replace the line:        header: app.data.getWebAppData().getThemeOptions().headerColor, with:        header: 'transparent', it has the same effect as:         #nav-bar {                 background-color: transparent !important;         } although it may have some other side effects I haven't researched. 3.   The version of the code I am using uses a feature collection stored in the web map.  Early in the process I realized that I did not want to edit the data as features in the web map.  Also, I knew I wanted the description field to have HTML so that I could make the detail panel have a paragraph, a table of information, and a link to a more detailed facility web page.  So, I created a feature class in a geodatabase with all of the natural data fields that I wanted to store and present.  Then, I wrote a Python script that would read the features and their 19 fields, generate the HTML for the description field, and update the web map in ArcGIS Online.  I had written my own library of tools for working with AGOL items, but you could do the same with the new ArcGIS API for Python,with urllib and urllib2 in Python 2.7, or manually using the ArcGIS Online Assistant.  I can make changes in ArcMap to the data and republish the web map in 20 seconds and never touch any HTML. Now, I am a little rusty on CSV files and feature collections.  You should be able to delete the point layer in the web map and readd it using a CSV file with the correct fields.  That would make it easier for you to type in the HTML in the CSV file.  Otherwise, the Map Viewer and the App Builder, I believe, will take any HTML code you write and escape the <, >, and & characters when it stores it in the feature collection.  When it displays it on the page, it will look like the code you entered, not the web page elements it represents, like images or hyperlinks.  With the CSV file approach, the feature collection will store HTML and the web map and web app will render the HTML elements correctly. Also, the latest version of the shortlist story map supports feature services, so it becomes a little easier to understand what's going on. You can also add other supporting layers to the web map.  Just add them after the story points layer. Enjoy, Nathan ... View more