Latest Contributions by KeithGerhartz1

‎09-17-2018

Kevin, why does this only work with Chrome?

‎05-21-2018

Hi Chris. That would be great. Love the popup panel but really need the related support. Thanks much.

‎05-17-2018

The standard popup obscures underling information. It would be really useful if display position could be set within the popup configuration as one of: 1. Absolute position on screen 2. Position offset from feature 3. In a sidebar Robert Scheitlin's Popup Panel Widget is great and is well received which indicates a lot of of interest. However, it does not support related tables and exhibits some unpredictable behavior. This functionality is suitable for inclusion in the standard product offering in my opinion. Any others want to chime in?

‎05-17-2018

Hello Robert. I would like to implement the use of your Popup Panel Widget but am unable to get related records to display. The webmap popup is set to display related records. They display correctly in the map viewer and they also appear correctly in a simple WAB app using default popups. However, when I try using the Popup Panel the related records are not displayed. If I add the table widget, then the show related records link appears but when I select it it only opens a new tab for the related table and no records display. Any idea why it is not working?

‎05-03-2018

The ability to totally eliminate the possibility of the standard pop displaying would also be a nice option.

‎05-03-2018

Would like to offer the following for consideration. Usability would be enhanced my making the widget active and visible any time a feature is selected in my opinion. Testing for the editor and smart editor widgets being active might be required as we do not want info window display to take precendent in these cases.

‎04-19-2018

Now available in WAB Developer's Edition Beta 2.8.

‎10-23-2017

My app uses the editor and attribute inspector widgets. I would like to force attributes to be present (and validated) before the user is allowed to click off of the feature or otherwise select another feature by clicking on an associated data grid. I know that I can replace the applyEdits method with my own custom method that is called from a save button. However, I have not been able to figure out a way to prevent the user from simply clicking off and creating a feature that does not carry the required attributes. Any ideas would be most appreciated.

‎10-12-2017

Is it possible to style the Choose File button in the JSAPI attachmenteditor? I want to make it look consistent with the other dojo claro buttons in my app.

‎10-04-2016

Will the Smart Editor be updated to support related tables? Alternatively, will the Editor widget be modified to support display of attribute form in the sidebar. Thanks.

‎05-05-2016

WebApp builder apps automatically provide the option of using the camera for attachments on the iPad. This does not appear to be the case when using these apps on the Microsoft Surface. This functionality is, however, provided in the Collector app for Windows 10. Are there any tweaks that would enable me to use the camera for WebApp Builder apps on the Surface? Would prefer not to attempt to resolve using WebApp Builder Developer Edition. I suppose we could take the pic and then attach if there is no other option.

‎01-04-2016

Not getting an error here.

‎01-04-2016

Here is the code. Thanks for the quick reply. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">  <meta name="mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/brand.png"> <link rel="shortcut icon" href="images/favicon.ico"> <title>Bootstrap Map JS - Get Started</title>  <link href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <link rel="stylesheet" href="https://community.esri.com//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">  <style type="text/css"> #mapDiv { min-height: 100%; max-height: 100%; } #search { display: block; } </style> </head> <body> <div class="panel panel-primary panel-fixed"> <div class="panel-body"> <div id="editorDiv"></div> <div id="attributeDiv"></div> </div> </div> <div id="mapDiv"> <img src='images/crosshairs-gray.png' id="findMe" class='find_me' /> </div> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active dropdown" id="basemapList"> <a href="" class="dropdown-toggle" data-toggle="dropdown">Maps <b class="caret"></b></a> <ul class="dropdown-menu" id="myDropdown"> <li><a href="#">Manage Layers</a></li> <li><a href="#">Use Color Basemap</a></li> <li><a href="#">Use Greyscale Basemap</a></li> <li><a href="#">Use Aerial Basemap</a></li> </ul> </li> <li><a id="geosearchNav" href="#">Search</a></li> <li><a id="aboutNav">About</a></li> </ul> </div> </div> </div> <div class="modal fade" id="geosearchModal" style="display: none;" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Search</h4> </div> <div class="modal-body"> <div class="form-group"> <div id="search"></div> </div> <form id="geosearch-form" class="form-inline"> <button id="btnDismiss" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button> </form> </div> </div>  </div>  </div> <div class="modal fade" id="aboutModal" style="display: none;" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">About</h4> </div> <div class="modal-body"> <div class="form-group"> <div id="aboutContent"></div> </div> <form id="Form1" class="form-inline"> <button id="Button2" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button> </form> </div> </div>  </div>  </div> <div class="modal fade" id="layersModal" style="display: none;" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Layers</h4> </div> <div class="modal-body"> <div class="form-group"> <div id="layersContent">vsvvsv</div> </div> <form id="Form2" class="form-inline"> <button id="Button1" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button> </form> </div> </div>  </div>  </div> </body> <script type="text/javascript"> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); var dojoConfig = { //The location.pathname.replace() logic below may look confusing but all its doing is // enabling us to load the api from a CDN and load local modules from the correct location. packages: [{ name: "application", location: package_path + '/src/js' }, { name: "bootstrap", location: "//rawgit.com/xsokev/Dojo-Bootstrap/master" }] }; </script> <script src="//js.arcgis.com/3.15"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> require([ "esri/domUtils", "dijit/registry", "esri/dijit/Popup", "esri/InfoTemplate", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/dijit/Search", "esri/dijit/editing/Editor", "esri/dijit/AttributeInspector", "esri/dijit/editing/TemplatePicker", "esri/layers/GraphicsLayer", "esri/tasks/GeometryService", "esri/SpatialReference", "esri/geometry/Point", "esri/map", "esri/dijit/BasemapGallery", "esri/dijit/BasemapLayer", "esri/dijit/Basemap", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/dijit/Scalebar", "esri/graphic", "esri/Color", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "application/bootstrapmap", "dojo/parser", "dojo/query", "dojo/touch", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/_base/connect", "dojo/dom-construct", "bootstrap/Modal", "bootstrap/Collapse", "bootstrap/Dropdown", "dojo/domReady!"], function ( domUtils, registry, Popup, InfoTemplate, IdentifyTask, IdentifyParameters, Search, Editor, AttributeInspector, TemplatePicker, GraphicsLayer, GeometryService, SpatialReference, Point, Map, BasemapGallery, BasemapLayer, Basemap, FeatureLayer, ArcGISTiledMapServiceLayer, Scalebar, Graphic, Color, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, PictureMarkerSymbol, BootstrapMap, parser, query, touch, dom, on, arrayUtils, connect, domConstruct) { parser.parse(); var graphic; var identifyTask; var identifyParams; var gsvc = new GeometryService("http://wpk-gis01/arcgis/rest/services/Utilities/Geometry/GeometryServer"); basemapColor = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/BaseMapColor/MapServer"); basemapGreyscale = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/BaseMapGreyscale/MapServer"); basemapAerial = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/Aerials/MapServer"); var myLocationLayer = new GraphicsLayer({ id: "location" }); var map = BootstrapMap.create("mapDiv", { zoom: 0 }); var currentBasemap = [] currentBasemap.push(basemapColor); map.addLayer(basemapColor); map.reorderLayer(basemapColor, 0); var scalebar = new Scalebar({ map: map, scalebarUnit: "dual" }); //query("#layersContent").replaceWith("test"); //query("#layersModal").modal("show"); map.addLayer(myLocationLayer); map.on("layers-add-result", initEditor); var incidentLayer = new FeatureLayer("http://wpk-gis01/arcgis/rest/services/InfoShare_DataEditing/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], id: "incidentLayer" }); //incidentLayer.setSelectionSymbol(new SimpleMarkerSymbol().setColor(new Color("red"))); map.addLayers([incidentLayer]); var incidentCommentsLayer = new FeatureLayer("http://wpk-gis01/arcgis/rest/services/InfoShare_DataEditing/FeatureServer/1", { outFields: ["*"], id: "incidentCommentsLayer" }); function initEditor(evt) { var layers = arrayUtils.map(evt.layers, function (result) { return { featureLayer: result.layer }; }); var attributeInspector = new AttributeInspector({ layerInfos: layers }, "attributeDiv"); var settings = { attributeInspector: attributeInspector, map: map, layerInfos: layers, toolbarVisible: false }; var params = { settings: settings }; var myEditor = new Editor(params, 'editorDiv'); myEditor.startup(); } //map.on("load", mapReady); //var parcelsURL = "http://wpk-gis01/arcgis/rest/services/BaseMapGreyscale/MapServer"; //function mapReady() //{ // map.on("click", executeIdentifyTask); // identifyTask = new IdentifyTask(parcelsURL); // identifyParams = new IdentifyParameters(); // identifyParams.tolerance = 3; // identifyParams.returnGeometry = true; // identifyParams.layerIds = [3, 20]; // identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE; // identifyParams.width = map.width; // identifyParams.height = map.height; //}; //function executeIdentifyTask(event) //{ // identifyParams.geometry = event.mapPoint; // identifyParams.mapExtent = map.extent; // var deferred = identifyTask // .execute(identifyParams) // .addCallback(function (response) // { // return arrayUtils.map(response, function (result) // { // var feature = result.feature; // var layerName = result.layerName; // feature.attributes.layerName = layerName; // if (layerName === 'Parcels - Orange') // { // var infoTemplateParcel = new InfoTemplate("Parcel", // "${PARCEL}"); // feature.setInfoTemplate(infoTemplateParcel); // } // else if (layerName === 'Cities - Orange') // { // var infoTemplateCities = new InfoTemplate("Cities", // "${CITY_NAME}"); // feature.setInfoTemplate(infoTemplateCities); // } // return feature; // }); // }); // map.infoWindow.setFeatures([deferred]); // map.infoWindow.show(event.mapPoint); //} function changeLayer(layerName) { map.removeLayer(currentBasemap[0]) currentBasemap.length = 0; currentBasemap.push(layerName) map.addLayer(layerName) map.reorderLayer(layerName, 0); } function findMe() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { var pointin = new Point(position.coords.longitude, position.coords.latitude, new SpatialReference({ wkid: 4326 })); gsvc.project([pointin], new SpatialReference({ wkid: 2236 }), function (projectedPoints) { var pt = projectedPoints[0]; var graphic = new Graphic(pt, new PictureMarkerSymbol('images/i_target.png', 38, 38)); myLocationLayer.add(graphic); map.centerAndZoom(pt, 5); }); var interval = setInterval(function () { clearInterval(interval); map.getLayer('location').clear(); }, 5000); }, function (err) { console.warn('ERROR(' + err.code + '): ' + err.message); }, options); } else { alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API."); } } //UI EVENTS var s = new Search({ map: map, enableHighlight: false }, "search"); s.startup(); on(s, 'select-result', function (e) { query("#geosearchModal").modal("hide"); }); query("#basemapList li").on(touch.press, function (e) { e.preventDefault(); switch (e.target.text) { case "Use Color Basemap": changeLayer(basemapColor); break; case "Use Greyscale Basemap": changeLayer(basemapGreyscale); break; case "Use Aerial Basemap": changeLayer(basemapAerial); break; case "Manage Layers": query("#layersModal").modal("show"); collapseNavbarAfterSelection(e); break; } collapseNavbarAfterSelection(e); }); query("#findMe").on(touch.press, function (e) { e.preventDefault(); findMe(); }); query("#geosearchNav").on('click', function (e) { query("#geosearchModal").modal("show"); collapseNavbarAfterSelection(e); }); query("#aboutNav").on('click', function (e) { query("#aboutModal").modal("show"); collapseNavbarAfterSelection(e); }); function collapseNavbarAfterSelection(e) { if (query(".navbar-collapse.in").length > 0) { e.stopPropagation(); query(".navbar-toggle")[0].click(); } else { e.stopPropagation(); } } }); </script> </html>

‎01-04-2016

I am attempting to include the AttributeInspector widget in a Bootstrap app but can't seem to get it to style as expected. Date picker does not appear in a popup, drop downs do not work and the associated fields display as three stacked text boxes, etc. I know I should not use Claro in combination. Tyring it causes the display to change and improve a bit but still not good and not what should be done in any case. Any guidance for a Bootstrap newbie? <Head> listed below. Thanks. Keith <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">  <meta name="mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="images/brand.png"> <link rel="shortcut icon" href="images/favicon.ico"> <title>Bootstrap Map JS - Get Started</title>  <link href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <link rel="stylesheet" href="https://community.esri.com//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">  <style type="text/css"> #mapDiv { min-height: 100%; max-height: 100%; } #search { display: block; } </style> </head>

‎12-31-2015

Hi Kelly. I know this is old but had reason to revisit this for another project I am working on. I would like to suggest that this be updated and shared as a sample on the Javascript API samples web page as it is very valuable in my opinion. I am certain others would feel the same way. Would also love to see a version that uses Dojo Bootstrap to display attribute data (without using jQuery). Belated thanks.

Online Status	Offline
Date Last Visited	‎09-25-2024 06:12 PM

My Ideas

Latest Contributions by KeithGerhartz1

Re: Google Earth Widget

Re: Popup Panel Widget Version 2.17 - 9/1/2020

Add option to display popups in sidebar in Web AppBuilder

Re: Popup Panel Widget Version 2.17 - 9/1/2020

Re: Popup Panel Widget Version 2.17 - 9/1/2020

Re: Popup Panel Widget Version 2.17 - 9/1/2020

Re: Related Tables in Smart Editor Widget

Require Attribute Entry/Validation Before Save or Deselect

Styling AttachmentEditor "Choose File" Button

Related Tables in Smart Editor Widget

WebApp Builder and Camera on MS Surface

Re: Styling Attribute Inspector in Bootstrap

Re: Styling Attribute Inspector in Bootstrap

Styling Attribute Inspector in Bootstrap

Re: Use editor widget, but have default attribute inspector in div rather than infowindow

Change Text Box Size in Edit Widget

Re: Attachments in Edit Widget

Re: What's Coming in February 2023

Re: What's Coming in February 2023

Re: Survey123 autocomplete search option