{"id":74871,"date":"2017-01-10T05:00:33","date_gmt":"2017-01-10T05:00:33","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/using-arcade-expressions-in-web-apps\/"},"modified":"2024-11-11T12:40:25","modified_gmt":"2024-11-11T20:40:25","slug":"using-arcade-expressions-in-web-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps","title":{"rendered":"Using Arcade expressions in web apps"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[32551,32521,24921,27491,26521],"industry":[],"product":[36831,36601],"class_list":["post-74871","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-arcade","tag-arcade-expressions","tag-javascript","tag-jsapi4","tag-visualization","product-js-api-arcgis","product-developers"],"acf":{"short_description":"At the end of 2016 Esri released Arcade, a light-weight scripting language designed to evaluate expressions in labeling and rendering con...","flexible_content":[{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/blogs.esri.com\/esri\/arcgis\/2016\/12\/19\/introducing-arcade\/\">At the end of 2016<\/a> Esri released <a href=\"https:\/\/developers.arcgis.com\/arcade\/\">Arcade<\/a>, a light-weight scripting language designed to evaluate expressions in labeling and rendering contexts with apps built on the ArcGIS platform. Arcade is similar to other scripting and expression languages, such as SQL, Python, VBScript and spreadsheet formulas. These languages have been supported and used in ArcGIS to perform various tasks, but they aren&#8217;t portable and your scripts cannot be shared everywhere. Arcade will provide that portability going forward. It has syntax similar to JavaScript, including its own library of functions that allow you to perform calculations and format text. <\/p>\n<p>This post is intended to be an introductory guide demonstrating how and why you may want to use Arcade expressions in custom web apps built with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a>.<\/p>\n<ul>\n<li><a href=\"#basic-syntax\">Basic syntax<\/a><\/li>\n<li><a href=\"#visualization\">Visualizations driven by Arcade<\/a><\/li>\n<li><a href=\"#benefits\">Benefits of Arcade<\/a><\/li>\n<li><a href=\"#sharing\">Sharing expressions<\/a><\/li>\n<li><a href=\"#resources\">Other resources<\/a><\/li>\n<\/ul>\n<p><a name=\"basic-syntax\"><\/a><\/p>\n<h2>Basic syntax<\/h2>\n<p>As stated in the <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/\">Getting Started<\/a> page in the Arcade guide, Arcade expressions may either be single-line or multi-line expressions. An expression has access to field values for the layer in which the expression is used. Each field value is a global variable that may be accessed with the following syntax:<\/p>\n<pre><code>$feature.FIELD_NAME<\/code><\/pre>\n<p>This makes it handy to manipulate field values for readability, conversion, or reclassification purposes.<\/p>\n<pre><code><span style=\"color: #998;font-style: italic\">\/\/ converts values from miles per hour (mph) <\/span>\r\n<span style=\"color: #998;font-style: italic\">\/\/ to kilometers per hour (kph)<\/span>\r\n$feature.SPEED_LIMIT * <span style=\"color: #008080\">1.60934<\/span>\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ Normalizes values and converts them to percentages<\/span>\r\nRound(($feature.POP_GRADUATED \/ $feature.ADULT_POP ) * <span style=\"color: #008080\">100<\/span>, <span style=\"color: #008080\">2<\/span>)\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ If the field is already normalized...<\/span>\r\nRound($feature.COMPLETED * <span style=\"color: #008080\">100<\/span>, <span style=\"color: #008080\">2<\/span>)\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ Or simple if\/else statements for<\/span>\r\n<span style=\"color: #998;font-style: italic\">\/\/ classifying data into categories<\/span>\r\nIIF($feature.COUNT &gt;= <span style=\"color: #008080\">1000<\/span>, <span style=\"color: #d14\">\"quota met\"<\/span>, <span style=\"color: #d14\">\"needs improvement\"<\/span>)\r\n<\/code><\/pre>\n<p>Be sure to read more about <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/logic\/\">Arcade&#8217;s syntax<\/a> and the full <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/\">function documentation<\/a> to learn how to use field values for visualization and labeling purposes.<\/p>\n<p><a name=\"visualization\"><\/a><\/p>\n<h2>Visualizations driven by Arcade expressions<\/h2>\n<p>I&#8217;ll use the <a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/arcade\/apparent-temp-4.html\">following sample<\/a> to demonstrate how to use Arcade in a data-driven visualization within a custom app built with <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/index.html\">version 4.2<\/a> of the JavaScript API. This sample visualizes the apparent temperature (the estimated temperature people actually feel depending on factors such as wind chill and humidity) measured at weather stations worldwide. In the sample, I use Arcade to calculate <a href=\"http:\/\/www.nws.noaa.gov\/om\/cold\/wind_chill.shtml\">wind chill<\/a> and the <a href=\"http:\/\/www.nws.noaa.gov\/os\/heat\/heat_index.shtml\">heat index<\/a> based on wind speed, air temperature, and relative humidity numbers provided as attributes in the service. The expression then determines which variable (heat index or wind chill) to use as the apparent temperature.<\/p>\n<p>Once written, the expression is set on the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html#valueExpression\">valueExpression<\/a> property of the renderer or visual variable used for the visualization.<\/p>\n<p>Using Arcade eliminates the need to add new fields to a service layer and perform a series of field calculations to return these same results.<\/p>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/arcade\/apparent-temp-4.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/apparenttemp.png\" alt=\"\" width=\"914\" height=\"621\" class=\"alignnone size-full wp-image-72352\" \/><\/a><\/p>\n<p>Arcade expressions are always referenced in JavaScript apps as string values. For simple one-line expressions like those listed in the <a href=\"#basic-syntax\">Basic syntax<\/a> section of this post, you can just wrap the expression in double or single quotes. <\/p>\n<p>For multi-line Arcade expressions used in web apps, you can place the expression inside a <strong><code>script<\/code><\/strong> HTML tag. Be sure to set the MIME type to <strong><code>text\/plain<\/code><\/strong> so the browser knows to not attempt to execute the script as JavaScript. <a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/apparent-temp-3.html#L88-L137\">The snippet below<\/a> contains the expression that determines apparent temperature.<\/p>\n<pre><code><span style=\"color: #000080;font-weight: normal\">&lt;<span style=\"color: #000080;font-weight: normal\">script<\/span> <span style=\"color: #008080\">type<\/span>=<span style=\"color: #d14\">\"text\/plain\"<\/span> <span style=\"color: #008080\">id<\/span>=<span style=\"color: #d14\">\"apparent-temp\"<\/span>&gt;<\/span><span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ if no temp, rh, or ws is available don't render feature<\/span>\r\n  <span style=\"color: #333;font-weight: bold\">if<\/span>(  IsEmpty($feature.TEMP) \r\n    || IsEmpty($feature.R_HUMIDITY)\r\n    || IsEmpty($feature.WIND_SPEED)\r\n  ){\r\n    <span style=\"color: #333;font-weight: bold\">return<\/span> <span style=\"color: #333;font-weight: 500\">null<\/span>;\r\n  }\r\n\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> t = $feature.TEMP;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> ws = $feature.WIND_SPEED * <span style=\"color: #008080\">0.621371<\/span>;  <span style=\"color: #998;font-style: italic\">\/\/ convert to mph<\/span>\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> r = $feature.R_HUMIDITY;\r\n\r\n  <span style=\"color: #998;font-style: italic\">\/\/\/\/ WIND CHILL \/\/\/\/<\/span>\r\n\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> wc = <span style=\"color: #008080\">35.74<\/span> + (<span style=\"color: #008080\">0.6215<\/span> * t) \r\n    - (<span style=\"color: #008080\">35.75<\/span> * Pow(ws, <span style=\"color: #008080\">0.16<\/span>)) \r\n    + (<span style=\"color: #008080\">0.4275<\/span> * t * Pow(ws, <span style=\"color: #008080\">0.16<\/span>));\r\n\r\n  <span style=\"color: #998;font-style: italic\">\/\/\/\/ HEAT INDEX \/\/\/\/<\/span>\r\n\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c1 = -<span style=\"color: #008080\">42.379<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c2 = <span style=\"color: #008080\">2.04901523<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c3 = <span style=\"color: #008080\">10.14333127<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c4 = -<span style=\"color: #008080\">0.22475541<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c5 = -<span style=\"color: #008080\">0.00683783<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c6 = -<span style=\"color: #008080\">0.05481717<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c7 = <span style=\"color: #008080\">0.00122874<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c8 = <span style=\"color: #008080\">0.00085282<\/span>;\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> c9 = -<span style=\"color: #008080\">0.00000199<\/span>;\r\n\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> hi = c1 + (c2 * t) + (c3 * r) \r\n    + (c4 * t * r) + (c5 * t * t) \r\n    + (c6 * r * r) + (c7 * t * t * r) \r\n    + (c8 * t * r * r) + (c9 * t * t * r * r);\r\n\r\n  <span style=\"color: #998;font-style: italic\">\/\/ apparent temperature<\/span>\r\n  <span style=\"color: #333;font-weight: bold\">var<\/span> apTemp = WHEN(  \r\n      <span style=\"color: #998;font-style: italic\">\/\/ Only for temps below 50F and WS &gt; 3mph<\/span>\r\n      <span style=\"color: #998;font-style: italic\">\/\/ wind chill must be lower than the temperature<\/span>\r\n    t &lt;= <span style=\"color: #008080\">50<\/span> &amp;&amp; ws &gt;= <span style=\"color: #008080\">3<\/span> &amp;&amp; wc &lt; t, wc,\r\n      <span style=\"color: #998;font-style: italic\">\/\/ Only for temps above 80F and RH above 40%<\/span>\r\n    t &gt;= <span style=\"color: #008080\">80<\/span> &amp;&amp; r &gt;= <span style=\"color: #008080\">40<\/span>, hi, \r\n      <span style=\"color: #998;font-style: italic\">\/\/ all other points will display air temperature<\/span>\r\n    t\r\n  );\r\n  <span style=\"color: #333;font-weight: bold\">return<\/span> apTemp;\r\n<\/span><span style=\"color: #000080;font-weight: normal\">&lt;\/<span style=\"color: #000080;font-weight: normal\">script<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Since browsers won&#8217;t recognize the contents of a <strong><code>text\/plain<\/code><\/strong> script as JavaScript, they will not attempt to execute it outside of its intended environment. Instead, we give the script a unique ID to identify it for later use in JavaScript.<\/p>\n<p>Now that the script is written, we can reference it as a string value using the <strong><code>document.getElementById()<\/code><\/strong> method to get the content of the tag as text.<\/p>\n<pre><code><span style=\"color: #333;font-weight: bold\">var<\/span> apparentTempArcade = document.getElementById(<span style=\"color: #d14\">\"apparent-temp\"<\/span>).text;\r\n<\/code><\/pre>\n<p>Now the expression is a string value referenced by the <strong><code>apparentTempArcade<\/code><\/strong> variable. All I have to do is reference this variable in the appropriate <strong><code>valueExpression<\/code><\/strong> property in the desired renderer or visual variable.<\/p>\n<pre><code><span style=\"color: #333;font-weight: bold\">var<\/span> apparentTempRenderer = <span style=\"color: #333;font-weight: bold\">new<\/span> SimpleRenderer({\r\n  symbol: createSymbol(),\r\n  label: <span style=\"color: #d14\">\"Weather station\"<\/span>,\r\n  visualVariables: [{\r\n    type: <span style=\"color: #d14\">\"color\"<\/span>,\r\n    valueExpression: apparentTempArcade,\r\n    valueExpressionTitle: <span style=\"color: #d14\">\"Apparent temperature (\u00b0F)\"<\/span>,\r\n    stops: [\r\n      { value: -<span style=\"color: #008080\">15<\/span>, color: <span style=\"color: #d14\">\"#00C5FF\"<\/span> },\r\n      { value: <span style=\"color: #008080\">12<\/span>, color: <span style=\"color: #d14\">\"#BEE8FF\"<\/span> },\r\n      { value: <span style=\"color: #008080\">32<\/span>, color: <span style=\"color: #d14\">\"#fdf4d2\"<\/span> },\r\n      { value: <span style=\"color: #008080\">64<\/span>, color: <span style=\"color: #d14\">\"#FF7F7F\"<\/span> },\r\n      { value: <span style=\"color: #008080\">82<\/span>, color: <span style=\"color: #d14\">\"#E60000\"<\/span> }\r\n    ]\r\n  }]\r\n});\r\n<\/code><\/pre>\n<p>This expression will execute for each feature in the layer within the context of the renderer and return the apparent temperature for each given point. In the renderer&#8217;s color visual variable, we map specific temperatures to colors for visualization purposes.<\/p>\n<p>Take a look at the rest of the <a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/apparent-temp-4.html\">code<\/a> in the sample. I wrote <a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/apparent-temp-4.html#L28-L267\">five Arcade expressions<\/a>, each used in a different renderer within the app. <\/p>\n<p><a name=\"benefits\"><\/a><\/p>\n<h2>Benefits of Arcade<\/h2>\n<p>After seeing these examples, you may ask, &#8220;Can&#8217;t I already do all of this by passing JavaScript functions to renderers and visual variables?&#8221; The answer is yes, you can. But Arcade provides a number of advantages other expression languages, including JavaScript, do not. <\/p>\n<p>For example, Arcade is secure &#8211; it cannot be injected with executable code outside of its intended context. It is also portable and sharable; expressions can be authored in an app using one <a href=\"https:\/\/developers.arcgis.com\/\">ArcGIS API<\/a>, and understood by another without syntax differences. That means you can author an expression for labeling features in <a href=\"https:\/\/arcgis.com\">ArcGIS Online<\/a> and that same expression will render labels the same way in ArcGIS Pro or any app written with the ArcGIS API for JavaScript or any of the Runtime APIs consuming the same layer. And Arcade is extendable. The Arcade team at Esri can add functions specific to GIS applications, such as geometry calculations, to Arcade&#8217;s function library as use cases and demand drive the need for them.<\/p>\n<p><a name=\"sharing\"><\/a><\/p>\n<h2>Sharing expressions<\/h2>\n<p>Driving visualizations with client-side calculations has been supported in the ArcGIS API for JavaScript via custom JavaScript functions for some time now. However, these visualizations could only be used in custom web apps and <strong>not<\/strong> saved to web maps nor shared to other applications. Arcade Expressions now bridge that gap and allow you to base visualizations off values returned from custom calculations, save them in web map items, and share those custom visualizations to be consumed by other web, desktop, and mobile applications. <\/p>\n<p>To demonstrate how visualizations driven by Arcade may be shared between applications, <a href=\"https:\/\/www.arcgis.com\/home\/webmap\/viewer.html?webmap=46223ad53505412e86cb3a621d89831f\">open this web map<\/a> which displays the same weather stations layer. This layer uses Arcade to visualize the difference between my wind chill calculation and the wind chill value stored in the service. Now <a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/arcade\/load-webmap.html\">open this app<\/a>, which demonstrates how to load the web map into a custom JavaScript application. This example is based off the <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/jssamples\/ags_createwebmapid.html\">Web map by ID sample<\/a> in the 3.19 documentation. You will see the same layer visualized the same way as it is in the ArcGIS Online map viewer. Save the layer to a new web map in your organization and try loading it into ArcGIS Pro. Even though the Arcade expression was written and stored in the ArcGIS Online web map, it can now be loaded and understood in custom web apps and ArcGIS Pro.<\/p>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/arcade\/load-webmap.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/wc-diff.png\" alt=\"\" width=\"1107\" height=\"629\" class=\"alignnone size-full wp-image-72415\" \/><\/a><\/p>\n<p>Rather than use a web map, you can alternately save the visualization directly to the layer within the map viewer, or by using the <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=05b6108388d14204a61cf1fc410bf5f4#visualize\">Visualization tab<\/a> in ArcGIS Online. In the example below, I created a bivariate visualization using two Arcade expressions. Color is driven by the <a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/apparent-temp-4.html#L83-L133\">apparent temperature expression<\/a> and size is driven by the <a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/apparent-temp-4.html#L135-L183\">difference<\/a> between apparent temperature and the measured air temperature.<\/p>\n<p><a href=\"http:\/\/www.arcgis.com\/home\/item.html?id=05b6108388d14204a61cf1fc410bf5f4#visualize\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/viz-tab.png\" alt=\"\" width=\"1336\" height=\"675\" class=\"alignnone size-full wp-image-72416\" \/><\/a><\/p>\n<p>Then you can <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/layers-portal\/index.html\">load the layer<\/a> with the saved visualization using the item id of the layer. This is the same id used in the URL of the item.<\/p>\n<p><a href=\"http:\/\/ekenes.github.io\/esri-js-samples\/arcade\/load-layer-item.html\"><strong>View the app<\/strong><\/a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"https:\/\/github.com\/ekenes\/esri-js-samples\/blob\/master\/arcade\/load-layer-item.html\"><strong>View the code<\/strong><\/a><\/p>\n<pre><code>Layer.fromPortalItem({\r\n  portalItem: { <span style=\"color: #998;font-style: italic\">\/\/ autocast as esri\/portal\/PortalItem<\/span>\r\n    id: <span style=\"color: #d14\">\"05b6108388d14204a61cf1fc410bf5f4\"<\/span>\r\n  }\r\n}).then(addLayer);\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ Adds the layer to the map once it loads<\/span>\r\n<span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">addLayer<\/span>(<span>lyr<\/span>) <\/span>{\r\n  map.add(lyr);\r\n}\r\n<\/code><\/pre>\n<p>I encourage you to read <a href=\"https:\/\/blogs.esri.com\/esri\/arcgis\/2016\/12\/15\/use-arcade-expressions-to-map-your-ideas\/\">this post<\/a> about writing Arcade expressions for visualizations in ArcGIS Online. It demonstrates how to leverage the Arcade live editor, which provides a mechanism for writing, testing, and debugging Arcade scripts. In fact, that came in handy a couple of times while writing the scripts referenced in this post.<\/p>\n<p>Now try it out on your own data! Write a new Arcade expression in ArcGIS Online, save the layer as a new item, and load the layer or web map item to a custom app and see how this workflow can significantly simplify the development experience.<\/p>\n<p><a name=\"resources\"><\/a><\/p>\n<h2>Other resources<\/h2>\n<p>Arcade is supported in both versions <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/index.html\">4.2<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/\">3.19<\/a> of the ArcGIS API for JavaScript, although with some differences. Version 4.2 supports Arcade for visualization only. Version 3.19 fully supports Arcade in labeling and visualization contexts, including functions for generating renderers via the <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/jsapi\/esri.renderers.smartmapping-amd.html\">smartMapping<\/a> module. <\/p>\n<p>Check out the following resources when learning how to use Arcade in the JavaScript API:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/\">Getting started with Arcade<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/arcade\/playground\/\">Arcade playground<\/a><\/li>\n<li><a href=\"http:\/\/odoe.net\/blog\/hello-arcade\/\">odoenet: Hello Arcade<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/jshelp\/arcade.html\">3.x Arcade guide<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/jssamples\/labels_arcade.html\">3.x Arcade labeling sample<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/jssamples\/renderer_arcade.html\">3.x Arcade visualization sample<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/index.html\">4.x Arcade guide<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-arcade\/index.html\">4.x Arcade visualization sample<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/\">Arcade function reference<\/a><\/li>\n<\/ul>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/aracade-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/arcade-banner.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Arcade expressions in web apps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Arcade expressions in web apps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-11T20:40:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Using Arcade expressions in web apps\",\"datePublished\":\"2017-01-10T05:00:33+00:00\",\"dateModified\":\"2024-11-11T20:40:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"arcade\",\"arcade expressions\",\"JavaScript\",\"jsapi4\",\"Visualization\"],\"articleSection\":[\"Arcade\",\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\",\"name\":\"Using Arcade expressions in web apps\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2017-01-10T05:00:33+00:00\",\"dateModified\":\"2024-11-11T20:40:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Arcade expressions in web apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Arcade expressions in web apps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps","og_locale":"en_US","og_type":"article","og_title":"Using Arcade expressions in web apps","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-11T20:40:25+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Using Arcade expressions in web apps","datePublished":"2017-01-10T05:00:33+00:00","dateModified":"2024-11-11T20:40:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps"},"wordCount":6,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["arcade","arcade expressions","JavaScript","jsapi4","Visualization"],"articleSection":["Arcade","Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps","name":"Using Arcade expressions in web apps","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2017-01-10T05:00:33+00:00","dateModified":"2024-11-11T20:40:25+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcade\/mapping\/using-arcade-expressions-in-web-apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Using Arcade expressions in web apps"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"January 10, 2017","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2017\/01\/arcade-banner.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":32551,"name":"arcade","slug":"arcade","term_group":0,"term_taxonomy_id":32551,"taxonomy":"post_tag","description":"","parent":0,"count":113,"filter":"raw"},{"term_id":32521,"name":"arcade expressions","slug":"arcade-expressions","term_group":0,"term_taxonomy_id":32521,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":26521,"name":"Visualization","slug":"visualization","term_group":0,"term_taxonomy_id":26521,"taxonomy":"post_tag","description":"","parent":0,"count":45,"filter":"raw"}],"category_data":[{"term_id":777102,"name":"Arcade","slug":"arcade","term_group":0,"term_taxonomy_id":777102,"taxonomy":"category","description":"","parent":0,"count":98,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2688,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/74871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=74871"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/74871\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=74871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=74871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=74871"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=74871"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=74871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}