Latest Contributions by JoelBennett

We too have had a need to host the font files locally. The images below show our folder structure, where the "Website" folder is the root directory of our website, and then you see further subdirectories "jsapi" and "fonts". It is this "fonts" folder in which we've organized the font files in the same manner as seen on Esri's site. In the code, we just add the following, and it works: esriConfig.fontsUrl = "/jsapi/fonts"; If your application is on a different server than the fonts, you'd have to use an absolute URL, e.g.: esriConfig.fontsUrl = "https://myServer/jsapi/fonts";

‎12-09-2025

Hmm...well, not sure what's going on, but here's a few things to look into: 1) Determine the format of date values passed between your server and the client, so you can determine the value to post back during edits. To do so, use your browser's developer tools to look at the contents of a query to the same layer, and look at the date value for a returned record. Make sure your edit request uses the same type of value (here we see this example using the numeric format I mentioned earlier): 2) Make sure you're using the correct field name. Note that field names are case sensitive. 3) Make sure it's not a read-only field. For example, if you look at the information for this service used by one of the editing samples, you'll see many of the entries in the "Fields" section have an "editable" value of false. 4) If you have access to ArcGIS Server Manager, log in and check the logs for the service and time frame of your edits for any error messages.

‎12-09-2025

I'm not sure if it's the best way, but I've done similar things through the use of MutationObservers. For example, I have a workflow to make some adjustments to a Popover, and MutationObservers solve the problem of when the elements are available. After the object is instantiated (and referred to via "this._popover"), I have something like this: this._popoverObserver = new MutationObserver(this._onPopoverChange.bind(this)); this._popoverObserver.observe(this._popover, {childList:true,subtree:true}); And then an event handler elsewhere in my module: _onPopoverChange: function() { if (this._popover.shadowRoot) { this._popoverObserver.disconnect(); this._popoverObserver = null; var popoverObserver = new MutationObserver(function() { var headingElement = this._popover.shadowRoot.querySelector("div.heading"); if (headingElement) { headingElement.style.fontSize = "var(--calcite-font-size--2)"; var shadowRoot = headingElement.parentNode.querySelector("calcite-action")?.shadowRoot; if (shadowRoot) { popoverObserver.disconnect(); popoverObserver = new MutationObserver(function() { var buttonElement = shadowRoot.querySelector("button"); if (buttonElement) { popoverObserver.disconnect(); popoverObserver = null; buttonElement.style.outline = "none"; buttonElement.style.border = "none"; } }); popoverObserver.observe(shadowRoot, {childList:true,subtree:true}); } } }.bind(this)); popoverObserver.observe(this._popover.shadowRoot, {childList:true,subtree:true}); } } Once I get a reference to the element I need, I disconnect the existing observer, and then use additional observers to work my way down the tree and make the necessary adjustments.

‎12-05-2025

This could depend on the underlying data type defined for that column in the database table. If it's a string/text field, then I don't see any problem with what you have. Otherwise, I'm most familiar with Oracle databases, which also support DATE and TIMESTAMP data types. In these cases, the correct thing to do is pass the numeric value of the date, for which you would instead have something like this: editBEAPProps.LastConfirmedUpdate = document.getElementById('BEAP_Details-LastConfirmedUpdate').valueAsNumber;

‎12-04-2025

Here's the code updated for 4.34, which works. The main difference was that Esri updated the sample to use "$arcgis.import" instead of "require", but everything else is largely the same. For my part, added/updated lines are 21, 27, 41-57, and 119. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Custom popup actions per feature attribute | Sample | ArcGIS Maps SDK for JavaScript</title> <style> html, body, #viewDiv { height: 100%; margin: 0; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.34/"></script> <script type="module"> const [Map, MapView, FeatureLayer, reactiveUtils, TextContent, Spinner] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/views/MapView.js", "@arcgis/core/layers/FeatureLayer.js", "@arcgis/core/core/reactiveUtils.js", "@arcgis/core/popup/content/TextContent.js", "@arcgis/core/widgets/Spinner.js" ]); const map = new Map({ basemap: "streets-navigation-vector", }); const view = new MapView({ container: "viewDiv", map: map, center: [-101.94981250000075, 41.20977753557709], zoom: 5, }); const spinner = new Spinner({view:view}); view.ui.add(spinner, {key:"a-unique-key-you-make-up", position:"manual"}); view.on("click", function(evt) { if (spinner.location) hideSpinner(); else showSpinner(evt.mapPoint); }); function hideSpinner() { spinner.location = null; spinner.hide(); } function showSpinner(point) { spinner.show({location:point}); } /******************** * Add feature layer ********************/ // sampling of breweries const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/OpenBeerDB/FeatureServer/0", popupTemplate: { title: "{name}", outFields: ["*"], lastEditInfoEnabled: false, fieldInfos: [ { fieldName: "name", }, { fieldName: "address1", label: "address", }, { fieldName: "city", }, { fieldName: "state", }, { fieldName: "phone", }, { fieldName: "website", }, ], actions: [ { id: "find-brewery", image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png", title: "Brewery Info", }, ], content: formatContent, }, }); // Use a function to format the content of the popup function formatContent(event) { const attributes = event.graphic.attributes; let text = ""; // Only display the attributes if they exist text += attributes.website ? `Brewery: <a href="${attributes.website}">${attributes.name}</a><br>` : `Brewery: ${attributes.name}<br>`; text += attributes.address1 ? `Address:<br>${attributes.address1}<br>` : `Located in: `; text += attributes.city && attributes.state ? `${attributes.city},${attributes.state}<br>` : ``; text += attributes.phone !== null ? `Phone:${attributes.phone}` : ``; let textElement = new TextContent({ text: text, }); return [textElement]; } // map.add(featureLayer); view.when(() => { // Watch for when features are selected reactiveUtils.watch( () => view.popup.selectedFeature, (graphic) => { if (graphic) { // Set the action's visible property to true if the 'website' field value is not null, otherwise set it to false const graphicTemplate = graphic.getEffectivePopupTemplate(); graphicTemplate.actions.items[0].visible = graphic.attributes.website ? true : false; } }, ); // Watch for the trigger-action event on the popup reactiveUtils.on( () => view.popup, "trigger-action", (event) => { if (event.action.id === "find-brewery") { const attributes = view.popup.selectedFeature.attributes; // Get the 'website' field attribute const info = attributes.website; // Make sure the 'website' field value is not null if (info) { // Open up a new browser using the URL value in the 'website' field window.open(info.trim()); } } }, ); }); </script> </head> <body class="light"> <div id="viewDiv" class="esri-widget"></div> </body> </html> Reminder: Spinner is an undocumented widget, so use at your own risk.

‎12-04-2025

The Non-MapImageLayer fonts section of the Labeling page released with 4.34 shows there are 16 new fonts beginning with the name "Barlow", but it appears none of these fonts are available, and attempting to use them generates HTTP 404 errors in the developer tools console. Assuming I'm not missing something, are these new fonts going to be made available, or were they added to the list in error?

‎11-26-2025

Unfortunately, you won't be able to use the import statement to retrieve text (i.e. html) files; it currently only works with js and css files. Instead, I've worked around this by using the native fetch method. Otherwise, you're on the right track 👍

‎11-26-2025

I don't know for certain how long Esri will continue to support AMD, but I do think you're right to be thinking along the lines of it coming to an end. For my part, the main product I support currently consists of 445 JS modules, and has been maintained and kept up to date since the very early days of 3.x. Between the 4.33 and 4.34 releases, I have undertaken migrating these modules from AMD to ESM, (a module format native to modern browsers, so no additional frameworks necessary), and it's actually gone very well. I would recommend you making that transition first before moving on to web components. This article doesn't address every single detail I've run into along the way, but I found it to be a great starting point (and a good read). The $arcgis.import function introduced with 4.33 also played a key role in my migration efforts as well.

‎11-13-2025

Since your request was for a downloadable version, you can still get one by following the instructions in this post.

‎10-16-2025

It appears the where clause is parsed and applied client-side, and if it doesn't support functions like UPPER and LOWER, then it doesn't appear the SDK can natively do what you want. However, it is possible to apply this kind of filtering by adding your own functionality to add conditions for every combination. It's not pretty but it works, although I'm not sure what performance would be like as search values get longer and longer, since there would 2-to-the-power-of-x conditions where x is the number of characters in the input string. The following set of functions gets the job done: function addWordCombinations(word, index, partial, wordCombinations) { if (index < word.length) { addWordCombinations(word, index + 1, partial + word[index].toUpperCase(), wordCombinations); addWordCombinations(word, index + 1, partial + word[index].toLowerCase(), wordCombinations); } else wordCombinations.push(partial); } function getWordCombinations(word) { var wordCombinations = []; if ((typeof word == "string") && (word.length !== 0)) addWordCombinations(word, 0, "", wordCombinations); return wordCombinations; } function getCaseInsensitiveQueryConditions(fieldName, userValue) { var wordCombinations = getWordCombinations(userValue); if (wordCombinations.length === 0) return "1=0"; //query with this where clause would return no records else return "(" + fieldName + " LIKE '%" + wordCombinations.join("%' OR " + fieldName + " LIKE '%") + "%')"; } With those in place, and assuming the user-specified search value was stored in a variable called "userValue" and the attribute field name was "name", you'd have something like: featureFilter.where = getCaseInsensitiveQueryConditions("name", userValue); Note: this implementation assumes the user-specified search value doesn't contain apostrophes (i.e. single quotes). Also, looking back after already typing up everything above, I notice you say you tried: (name LIKE UPPER('%hel%')) but have you tried: (LOWER(name) LIKE '%hel%') If that works it would be so much simpler...

‎10-15-2025

Glad to help out where possible. Note that it is possible to mark more than one post as a solution. It's up to you, but Joshua's post might qualify as well since he brought up the SQL methodology, which is the best way to handle case-sensitivity issues.

‎10-14-2025

Yes, extending what @JoshuaBixby has already said, if you had the user-specified value stored in a variable called "userValue", then you'd have something like this: layer.definitionExpression = "LOWER(DESCRIPTION) LIKE '%" + userValue.toLowerCase() + "%'"; You might also need to add some additional logic to accommodate for the user value containing an apostrophe (i..e. single quotation) mark as well.

‎10-14-2025

The JSON provided does not match the definition of a UniqueValueRenderer object, and therefore cannot be read. Instead, it provides the definition for a renderer of type "CIMUniqueValueRenderer" for which the SDK doesn't appear to have any support.

‎10-14-2025

I see...I thought you were using the widget, but you're actually using the map component. I'm afraid I don't presently have any further advice in that case.

‎10-09-2025

Yes, you can use the undocumented method "_zoomToClicked" to simulate a click on the "Zoom to" button: floorFilter._zomToClicked(); Note that because this is an undocumented feature, it may be changed or removed in a future version of the SDK without notice.

My Ideas

Latest Contributions by JoelBennett

Re: Use Fonts locally or from portal (CORS error)

Re: Adding a row to a table using JS 4.x

Re: Timeslider web component ShadowDom not fully rendered even though component is "ready"

Re: Adding a row to a table using JS 4.x

Re: How to show/hide spinner feature programmatically?

Missing new fonts in 4.34

Re: dojoConfig (loader) replacement strategy for large JavaScript app with many files?

Re: dojoConfig (loader) replacement strategy for large JavaScript app with many files?

Re: ArcGIS Javascript API 3.x documentation

Re: Case insensitive, partial match on string field using feature effect.

Re: Different Definition Expression Case Sensitivity Depending on Data Source

Re: Different Definition Expression Case Sensitivity Depending on Data Source

Re: UniqueValueRenderer.fromJSON not working when loading JSON from a lyrx file.

Re: FloorFilter: press "zoom to" button programmaticaly

Re: FloorFilter: press "zoom to" button programmaticaly

Re: Adding a row to a table using JS 4.x

Re: Timeslider web component ShadowDom not fully r...

Re: dojoConfig (loader) replacement strategy for l...

Re: dojoConfig (loader) replacement strategy for l...

Re: Using graphic with featureForm