{"id":1702702,"date":"2022-09-07T10:32:34","date_gmt":"2022-09-07T17:32:34","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1702702"},"modified":"2024-11-01T00:15:21","modified_gmt":"2024-11-01T07:15:21","slug":"how-to-create-a-custom-arcade-profile","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile","title":{"rendered":"How to create a custom Arcade profile"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,738191,22941],"tags":[32551,30111,736191,759822],"industry":[],"product":[761642,36831,36601],"class_list":["post-1702702","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-developers","category-mapping","tag-arcade","tag-data-visualization","tag-measurement","tag-sketch","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.","flexible_content":[{"acf_fc_layout":"content","content":"<p>In June 2022, the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API) added support for <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/4.24\/#execute-arcade-expressions\">evaluating Arcade expressions<\/a> on your terms. That means you can write and execute Arcade expressions in the context of your own custom Arcade profiles.<\/p>\n<p><a href=\"https:\/\/developers.arcgis.com\/arcade\/\">Arcade<\/a> is an expression language that allows you to calculate values and create custom content in ArcGIS applications. It is designed to run exclusively in <a href=\"#profiles\">profiles<\/a>, which define the execution context for expressions.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1703862,"id":1703862,"title":"custom-profile","filename":"custom-profile-1.png","filesize":116967,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/custom-profile-2","alt":"The ArcadeExecutor API now allows you to create custom profiles. For example, you can create a profile that provides the location of a map click to the expression.","author":"6561","description":"","caption":"The ArcadeExecutor API now allows you to create custom profiles. For example, you can create a profile that provides the location of a map click to the expression.","name":"custom-profile-2","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 21:27:19","modified":"2022-09-01 21:27:35","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":945,"height":580,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","medium-width":425,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","medium_large-width":768,"medium_large-height":471,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","large-width":945,"large-height":580,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","1536x1536-width":945,"1536x1536-height":580,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","2048x2048-width":945,"2048x2048-height":580,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1-758x465.png","card_image-width":758,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/custom-profile-1.png","wide_image-width":945,"wide_image-height":580}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This post will demonstrate how you can create custom Arcade profiles in various scenarios.<\/p>\n<h2>First things first<\/h2>\n<p>This article is intended for developer audiences with prior knowledge of Arcade. If you are unfamiliar with Arcade and how it\u2019s used, I strongly encourage you to read the following articles that establish a foundation for the principles demonstrated in this post.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/im-a-developer-do-i-really-need-arcade\/\">I\u2019m a developer. Do I really need Arcade?<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/execute-arcade-expressions-on-your-terms\/\">Execute Arcade expressions on your terms<\/a><\/li>\n<\/ul>\n<p><a name=\"profiles\"><\/a><\/p>\n<h2>Arcade profiles<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/profiles\/\">Arcade documentation<\/a> refers to an expression&#8217;s execution context as its <strong>profile<\/strong>. A profile specifies:<\/p>\n<ul>\n<li><strong>where<\/strong> you can use Arcade,<\/li>\n<li>the <strong>profile variables<\/strong> (aka globals) that can be used as input data values to the expression,<\/li>\n<li>the language <strong><a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/\">functions<\/a><\/strong> you may use, and<\/li>\n<li>the valid <strong>data types<\/strong> that may be returned from an expression.<\/li>\n<\/ul>\n<p>Another way to think of a profile is the <em>environment<\/em> that controls Arcade&#8217;s execution. There are <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/profiles\/\">more than 20 Arcade profiles<\/a> implemented in various apps throughout the ArcGIS system, including <a href=\"https:\/\/pro.arcgis.com\/en\/pro-app\/latest\/get-started\/get-started.htm\">ArcGIS Pro<\/a>, <a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-online\/resources\">ArcGIS Online<\/a>, and the <a href=\"https:\/\/developers.arcgis.com\/documentation\/\">ArcGIS Developer SDKs<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1683762,"id":1683762,"title":"Screen Shot 2022-08-11 at 4.29.30 PM","filename":"Screen-Shot-2022-08-11-at-4.29.30-PM-scaled.png","filesize":926741,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/im-a-developer-do-i-really-need-arcade\/screen-shot-2022-08-11-at-4-29-30-pm","alt":"Arcade profiles supported by the ArcGIS API for JavaScript. Profiles define the context, variables, valid return types, and functions that may be used in expressions.","author":"6561","description":"","caption":"Arcade profiles implemented in the ArcGIS API for JavaScript. Profiles define the context, variables, valid return types, and functions that may be used in expressions.","name":"screen-shot-2022-08-11-at-4-29-30-pm","status":"inherit","uploaded_to":1683632,"date":"2022-08-11 23:30:05","modified":"2022-08-12 16:36:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1355,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-scaled.png","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-scaled.png","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-scaled.png","large-width":1920,"large-height":1016,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-1536x813.png","1536x1536-width":1536,"1536x1536-height":813,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-2048x1084.png","2048x2048-width":2048,"2048x2048-height":1084,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-826x437.png","card_image-width":826,"card_image-height":437,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/Screen-Shot-2022-08-11-at-4.29.30-PM-1920x1016.png","wide_image-width":1920,"wide_image-height":1016}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>When you may need a custom profile<\/h2>\n<p>The Arcade profiles already implemented in ArcGIS apps and developer products are sufficient for enabling users to customize apps in a vast majority of cases. However, there are a few scenarios where you may need to display the result of an expression in a custom element or use it as input for some other task. The following are common workflows that would require you to execute Arcade outside an existing Arcade profile.<\/p>\n<ul>\n<li>When you need to use the result of an expression defined in a web map <strong>outside the context of the map<\/strong>. The <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/execute-arcade-expressions-on-your-terms\/\">Execute Arcade expressions on your terms<\/a> blog post demonstrates how to do this.<\/li>\n<li>When users need to <strong>customize content within the context of a custom-built configurable app<\/strong> similar to ArcGIS Online or ArcGIS Pro. This requires the developer to define their own profiles and provide the user with a text editor to author expressions.<\/li>\n<li>Developers may want to take advantage of <strong>Arcade&#8217;s simplified language syntax or leverage convenient Arcade functions<\/strong> not available in ArcGIS Developer APIs and SDKs.<\/li>\n<\/ul>\n<p>This post will demonstrate the final scenario in this list using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html\">esri\/arcade<\/a> module added in version 4.24 of the ArcGIS API for JavaScript. We\u2019ll follow these steps in each example:<\/p>\n<ol>\n<li>Define the profile variables<\/li>\n<li>Write the Arcade expression<\/li>\n<li>Create an Arcade executor<\/li>\n<li>Execute the script<\/li>\n<li>Display the output<\/li>\n<\/ol>\n<p>I&#8217;ll follow these steps to demonstrate how to create custom Arcade profiles for each of the following examples.<\/p>\n<ol>\n<li><a href=\"#time-range\">Time range<\/a><\/li>\n<li><a href=\"#label-line-segments\">Label line segments<\/a><\/li>\n<li><a href=\"#summary-statistics\">Summary statistics<\/a><\/li>\n<\/ol>\n<p><a name=\"time-range\"><\/a><\/p>\n<h2>Time range<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/date_functions\/#datediff\">DateDiff<\/a> function in the Arcade language provides a quick and easy way to calculate the difference between two date objects.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">var<\/span> age = DateDiff(endDate, startDate, <span style=\"color: #d14;\">'years'<\/span>);\r\n<\/code><\/pre>\n<p>An equivalent function doesn&#8217;t exist in JavaScript. Of course, you can <a href=\"https:\/\/www.geeksforgeeks.org\/how-to-calculate-the-number-of-days-between-two-dates-in-javascript\/\">write your own JS function to do this<\/a>. However, if a function exists, then I&#8217;m more likely to use it.<\/p>\n<p>In this example, I\u2019ll demonstrate how you can create a profile that displays the duration of a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-TimeExtent.html\">time extent<\/a> from a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-TimeSlider.html\">TimeSlider<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1704102,"id":1704102,"title":"timeslider-animation","filename":"timeslider-animation.gif","filesize":143286,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/timeslider-animation-2","alt":"The TimeSlider doesn't display the duration (or time interval) of the time extent selected by the user. You can use Arcade to quickly calculate the difference between two dates and display it interactively to the user.","author":"6561","description":"","caption":"The TimeSlider doesn't display the duration (or time interval) of the time extent selected by the user by default. You can use Arcade to calculate the difference between two dates and display it immediately to the user.","name":"timeslider-animation-2","status":"inherit","uploaded_to":1702702,"date":"2022-09-02 00:19:00","modified":"2022-09-07 17:10:53","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":390,"height":154,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation-213x154.gif","thumbnail-width":213,"thumbnail-height":154,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","medium-width":390,"medium-height":154,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","medium_large-width":390,"medium_large-height":154,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","large-width":390,"large-height":154,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","1536x1536-width":390,"1536x1536-height":154,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","2048x2048-width":390,"2048x2048-height":154,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","card_image-width":390,"card_image-height":154,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/timeslider-animation.gif","wide_image-width":390,"wide_image-height":154}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Define the profile<\/h3>\n<p>Arcade requires a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#Profile\">profile<\/a>, or a context, in which to execute. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#ArcadeExecutor\">ArcadeExecutor<\/a> creates this context based on <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#Profile\">profile variables<\/a> provided by you. This allows the Arcade compiler to validate whether an expression is written for the right context.<\/p>\n<p>When defining a custom profile, you can give the profile variables whatever names you want. Profile variables should always start with a <code>$<\/code> character to avoid conflict with other variables declared in the script.<\/p>\n<p>In the ArcGIS JS API, profile variables are defined as plain objects specifying the name of each variable along with its <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#ProfileVariableInstanceType\">Arcade data type<\/a>.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> timeRangeProfile = {\r\n  variables: [\r\n    {\r\n      name: <span style=\"color: #d14;\">\"$timeExtent\"<\/span>,\r\n      type: <span style=\"color: #d14;\">\"dictionary\"<\/span>,\r\n      properties: [\r\n        {\r\n          name: <span style=\"color: #d14;\">\"start\"<\/span>,\r\n          type: <span style=\"color: #d14;\">\"date\"<\/span>\r\n        },\r\n        {\r\n          name: <span style=\"color: #d14;\">\"end\"<\/span>,\r\n          type: <span style=\"color: #d14;\">\"date\"<\/span>\r\n        }\r\n      ]\r\n    }, {\r\n      name: <span style=\"color: #d14;\">\"$unit\"<\/span>,\r\n      type: <span style=\"color: #d14;\">\"text\"<\/span>\r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>\n<h3>Write the Arcade expression<\/h3>\n<p>The Arcade expression in this scenario simply takes the inputs from the profile variables and provides them to the <code>DateDiff<\/code> function.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> timeExpression = <span style=\"color: #d14;\">`\r\n  Text(\r\n    DateDiff($timeExtent.end, $timeExtent.start, $unit),\r\n    \"#,###\"\r\n  ) + \" \" + $unit\r\n`<\/span>;\r\n<\/code><\/pre>\n<h3>Create an Arcade executor<\/h3>\n<p>Before executing the expression, it must first be compiled. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#createArcadeExecutor\">createArcadeExecutor<\/a> method in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html\">esri\/arcade<\/a> module compiles the script and validates it. If the script validates without compilation errors, the method will return an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#ArcadeExecutor\">ArcadeExecutor<\/a> object, which provides metadata about the expression and methods for executing it.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #998; font-style: italic;\">\/\/ Compile the expression and create an executor<\/span>\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> arcadeExecutor = <span style=\"color: #333; font-weight: bold;\">await<\/span> arcade.createArcadeExecutor(\r\n  timeExpression,\r\n  timeRangeProfile\r\n);\r\n<\/code><\/pre>\n<h3>Execute the script<\/h3>\n<p>Once the script compiles successfully, you may execute it as many times as you need using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-arcade.html#ExecuteFunction\">execute<\/a> function in the ArcadeExecutor.<\/p>\n<p>To execute the script, you must hydrate the profile variables with valid inputs. This expression will return a new value each time the user changes the values of the slider thumbs.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">function<\/span> <span style=\"color: #900; font-weight: bold;\">calculateTimeExtent<\/span> ({ start, end }) {\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> timeLength = arcadeExecutor.execute({\r\n    $timeExtent: { start, end },\r\n    $unit: <span style=\"color: #d14;\">\"days\"<\/span>\r\n  });\r\n\r\n  intervalValue.innerText = timeLength;\r\n}\r\n\r\ntimeSlider.watch(<span style=\"color: #d14;\">\"timeExtent\"<\/span>, calculateTimeExtent);\r\n<\/code><\/pre>\n<h3>5. Display the output<\/h3>\n<p>Once the expression executes successfully, you can then use the result however you need it.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #998; font-style: italic;\">\/\/ DOM element to display the time duration<\/span>\r\nintervalValue.innerText = timeLength;\r\n<\/code><\/pre>\n<p><strong><a href=\"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/time-range.html\">View the app<\/a><\/strong><br \/>\n<strong><a href=\"https:\/\/codepen.io\/kekenes\/pen\/vYjYpya?editors=1000\">View the code<\/a><\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1703052,"id":1703052,"title":"timeslider-preview","filename":"timeslider-preview.png","filesize":81920,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/timeslider-preview","alt":"You can calculate the time interval in a time extent using the DateDiff Arcade function.","author":"6561","description":"","caption":"You can calculate the time interval in a time extent using the DateDiff Arcade function.","name":"timeslider-preview","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:27:40","modified":"2022-09-01 00:28:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":773,"height":418,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","medium-width":464,"medium-height":251,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","medium_large-width":768,"medium_large-height":415,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","large-width":773,"large-height":418,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","1536x1536-width":773,"1536x1536-height":418,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","2048x2048-width":773,"2048x2048-height":418,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","card_image-width":773,"card_image-height":418,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/timeslider-preview.png","wide_image-width":773,"wide_image-height":418}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/time-range.html"},{"acf_fc_layout":"content","content":"<p><a name=\"label-line-segments\"><\/a><\/p>\n<h2>Label line segments<\/h2>\n<p>In this scenario, I\u2019ll demonstrate how to use Arcade to create an experience for labeling line segments with various measurements while sketching geometries. This is something you could implement purely with JavaScript, but Arcade can help simplify the measurement calculations.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1703022,"id":1703022,"title":"measure segments preview","filename":"measure-segments-preview.png","filesize":28266,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/measure-segments-preview","alt":"This app uses Arcade to calculate the bearing, angle, and geodesic distance for each line segment in one polyline geometry.","author":"6561","description":"","caption":"This app uses Arcade to calculate the bearing, angle, and geodesic distance for each line segment in one polyline geometry. This capability is currently not available in the ArcGIS JS API editing and measurement tools.","name":"measure-segments-preview","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:27:15","modified":"2022-09-01 00:33:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":968,"height":352,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","medium-width":464,"medium-height":169,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","medium_large-width":768,"medium_large-height":279,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","large-width":968,"large-height":352,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","1536x1536-width":968,"1536x1536-height":352,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","2048x2048-width":968,"2048x2048-height":352,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview-826x300.png","card_image-width":826,"card_image-height":300,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/measure-segments-preview.png","wide_image-width":968,"wide_image-height":352}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/label-segments.html"},{"acf_fc_layout":"content","content":"<p>Arcade has a few geometry functions not available in the ArcGIS JS API\u2019s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-geometryEngine.html\">geometry engine<\/a>. These include <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#angle\">angle<\/a>, <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#bearing\">bearing<\/a>, and <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#distancegeodetic\">distanceGeodetic<\/a>, among others.<\/p>\n<p>I&#8217;ll explain what each of these functions does and how I&#8217;ll use them for the segment labels.<\/p>\n<h4>Angle<\/h4>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#angle\">angle<\/a> function calculates the arithmetic angle between two points, where a line pointing due east is zero degrees and a line pointing due north is 90 degrees.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1702972,"id":1702972,"title":"angle-ab","filename":"angle-ab.jpg","filesize":5279,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/angle-ab","alt":"Graphic showing how angles are interpreted.","author":"6561","description":"","caption":"In this graphic, the y-axis points due north and the x-axis points due east. The angle starts at zero on the x-axis and increases as the angle moves counter-clockwise.","name":"angle-ab","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:26:44","modified":"2022-09-02 17:23:34","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":995,"height":331,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","medium-width":464,"medium-height":154,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","medium_large-width":768,"medium_large-height":255,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","large-width":995,"large-height":331,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","1536x1536-width":995,"1536x1536-height":331,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","2048x2048-width":995,"2048x2048-height":331,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab-826x275.jpg","card_image-width":826,"card_image-height":275,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/angle-ab.jpg","wide_image-width":995,"wide_image-height":331}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#angle"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">var<\/span> pointA = Point({\r\n  x: <span style=\"color: #008080;\">976259<\/span>,\r\n  y: <span style=\"color: #008080;\">8066511<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">var<\/span> pointB = Point({\r\n  x: <span style=\"color: #008080;\">654435<\/span>,\r\n  y: <span style=\"color: #008080;\">3056000<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\nAngle(pointA, pointB);\r\n<span style=\"color: #998; font-style: italic;\">\/\/ returns 266.325<\/span>\r\n<\/code><\/pre>\n<p>I will use Angle to calculate the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-TextSymbol.html#angle\">angle<\/a> of the label&#8217;s text symbol so it always runs parallel to the corresponding line segment.<\/p>\n<h4>Bearing<\/h4>\n<p><a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#bearing\">Bearing<\/a> calculates direction in angular degrees clockwise from due north.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1702982,"id":1702982,"title":"bearing-ab","filename":"bearing-ab.jpg","filesize":5804,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/bearing-ab","alt":"Graphic showing how bearing is interpreted.","author":"6561","description":"","caption":"Bearing calculates the compass bearing where due north is zero degrees (the y-axis in the graphic above); east is 90 degrees; south is 180 degrees; and west is 270 degrees.","name":"bearing-ab","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:26:47","modified":"2022-09-02 17:25:55","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":995,"height":332,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","medium-width":464,"medium-height":155,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","medium_large-width":768,"medium_large-height":256,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","large-width":995,"large-height":332,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","1536x1536-width":995,"1536x1536-height":332,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","2048x2048-width":995,"2048x2048-height":332,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab-826x276.jpg","card_image-width":826,"card_image-height":276,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/bearing-ab.jpg","wide_image-width":995,"wide_image-height":332}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#bearing"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">var<\/span> pointA = Point({\r\n  x: <span style=\"color: #008080;\">976259<\/span>,\r\n  y: <span style=\"color: #008080;\">8066511<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">var<\/span> pointB = Point({\r\n  x: <span style=\"color: #008080;\">654435<\/span>,\r\n  y: <span style=\"color: #008080;\">3056000<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\nBearing(pointA, pointB);\r\n<span style=\"color: #998; font-style: italic;\">\/\/ returns 183.675 (i.e. South)<\/span>\r\n<\/code><\/pre>\n<p>I will display the bearing of a line in the label text to indicate its orientation.<\/p>\n<h4>DistanceGeodetic<\/h4>\n<p><a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#distancegeodetic\">DistanceGeodetic<\/a> calculates the geodesic distance between two points. The JS API <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-geometryEngine.html\">geometry engine<\/a> has a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-geometryEngine.html#distance\">distance<\/a> function that calculates the planar distance between two points, but not a geodesic equivalent. To calculate geodesic distance using geometry engine, you first need to create a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-Polyline.html\">Polyline<\/a> geometry from a set of two vertices and provide the line as input to <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-geometryEngine.html#geodesicLength\">geodesicLength<\/a>.<\/p>\n<p>Alternatively, you could take advantage of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-support-geodesicUtils.html#geodesicDistance\">geodesicDistance<\/a> function in <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-support-geodesicUtils.html\">geodesicUtils<\/a>.<\/p>\n<p>DistanceGeodetic in Arcade simplifies the workflow by accepting two points without the need for creating a new geometry or importing functions from different modules.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1703002,"id":1703002,"title":"geodesic","filename":"geodesic.png","filesize":19065,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/geodesic","alt":"The geodesic distance represents the distance between two points along a great circle or geodesic curve (the white line). The planar distance, represented with the red line, measures the distance between two points using Cartesian coordinates.","author":"6561","description":"","caption":"The geodetic distance represents the distance between two points along a great circle or geodesic curve (the white line). The planar distance, represented with the red line, measures the distance between two points using Cartesian coordinates. Because the earth is an ellipsoid, the geodesic distance represents the shortest path between two points. Using a standard distance formula is problematic because cylindrical projections, like Mercator, don't preserve true distance and area measurements.","name":"geodesic","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:26:55","modified":"2022-09-02 17:31:28","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":807,"height":259,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","medium-width":464,"medium-height":149,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","medium_large-width":768,"medium_large-height":246,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","large-width":807,"large-height":259,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","1536x1536-width":807,"1536x1536-height":259,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","2048x2048-width":807,"2048x2048-height":259,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","card_image-width":807,"card_image-height":259,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/geodesic.png","wide_image-width":807,"wide_image-height":259}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#distancegeodetic"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">var<\/span> pointA = Point({\r\n  x: <span style=\"color: #008080;\">976259<\/span>,\r\n  y: <span style=\"color: #008080;\">8066511<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">var<\/span> pointB = Point({\r\n  x: <span style=\"color: #008080;\">654435<\/span>,\r\n  y: <span style=\"color: #008080;\">3056000<\/span>,\r\n  spatialReference: { wkid: <span style=\"color: #008080;\">3857<\/span> }\r\n});\r\n\r\nDistanceGeodetic(pointA, pointB);\r\n<span style=\"color: #998; font-style: italic;\">\/\/ returns 3563<\/span>\r\n<\/code><\/pre>\n<h3>Create the profile<\/h3>\n<p>Since the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html\">MapView<\/a> (2D) doesn&#8217;t support segment measurements as you draw, I will use the Arcade functions described above to implement this experience myself.<\/p>\n"},{"acf_fc_layout":"content","content":"<p>In this case, I only need to define one profile variable that accepts the line feature being sketched in the view.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> labelSegmentProfile = {\r\n  variables: [\r\n    {\r\n      name: <span style=\"color: #d14;\">\"$feature\"<\/span>,\r\n      type: <span style=\"color: #d14;\">\"feature\"<\/span>\r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>\n<p>I want the expression to return a <a href=\"https:\/\/developers.arcgis.com\/arcade\/guide\/types\/#dictionary\">dictionary<\/a> with two properties: a <code>label<\/code>, which is a dictionary of <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-TextSymbol.html\">TextSymbol<\/a> properties; and a <code>location<\/code>, which represents a point geometry marking the location of the label.<\/p>\n<p>The returned dictionary in each expression should follow this specification.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> outputTypes = {\r\n  label: {\r\n    text: <span style=\"color: #d14;\">\"Text\"<\/span>,  <span style=\"color: #998; font-style: italic;\">\/\/ the label text<\/span>\r\n    angle: <span style=\"color: #d14;\">\"Number\"<\/span>,  <span style=\"color: #998; font-style: italic;\">\/\/ orientation of the label<\/span>\r\n    color: <span style=\"color: #d14;\">\"Text\"<\/span>,  <span style=\"color: #998; font-style: italic;\">\/\/ i.e. hex code or rgba string<\/span>\r\n    font: {\r\n      family: <span style=\"color: #d14;\">\"Text\"<\/span>,\r\n      style: <span style=\"color: #d14;\">\"Text\"<\/span>,\r\n      weight: <span style=\"color: #d14;\">\"Text\"<\/span>,\r\n      size: <span style=\"color: #d14;\">\"Number\"<\/span>\r\n    },\r\n    haloColor: <span style=\"color: #d14;\">\"Text\"<\/span>,\r\n    haloSize: <span style=\"color: #d14;\">\"Number\"<\/span>,\r\n    yoffset: <span style=\"color: #d14;\">\"Number\"<\/span>,\r\n    xoffset: <span style=\"color: #d14;\">\"Number\"<\/span>,\r\n    horizontalAlignment: <span style=\"color: #d14;\">\"Text\"<\/span>,\r\n    verticalAlignment: <span style=\"color: #d14;\">\"Text\"<\/span>\r\n  },\r\n  location: <span style=\"color: #d14;\">\"Point\"<\/span>  <span style=\"color: #998; font-style: italic;\">\/\/ point location of the label<\/span>\r\n}\r\n<\/code><\/pre>\n<h3>Write and compile the Arcade expression<\/h3>\n<p>The expression will perform three calculations between each vertex in the line. It will use <strong>geodesic distance<\/strong> and the <strong>bearing<\/strong> in the segment label text. <strong>Angle<\/strong> will provide the value used to orient the label so it is parallel with the segment. I will also use the <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#centroid\">centroid<\/a> function to find the midpoint of a line segment used to position the label.<\/p>\n<p>The following expression returns the text symbol properties and the location to render the label.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #998; font-style: italic;\">\/\/ Expression for calculating measurements for active line segment<\/span>\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> labelSegmentExpression = <span style=\"color: #d14;\">`\r\n  var paths = Geometry($feature).paths;\r\n  var finalPath = Back(paths);\r\n  var finalPoint = Back(finalPath);\r\n  var previousPoint = finalPath[Count(finalPath)-2];\r\n\r\n  var a = Angle(previousPoint, finalPoint);\r\n  var b = Bearing(previousPoint, finalPoint);\r\n  var c = When(\r\n    (b &lt; 22.5 &amp;&amp; b &gt;= 0) || b &gt; 337.5, 'N',\r\n    b &gt;= 22.5 &amp;&amp; b &lt; 67.5, 'NE',\r\n    b &gt;= 67.5 &amp;&amp; b &lt; 112.5, 'E',\r\n    b &gt;= 112.5 &amp;&amp; b &lt; 157.5, 'SE',\r\n    b &gt;= 157.5 &amp;&amp; b &lt; 202.5, 'S',\r\n    b &gt;= 202.5 &amp;&amp; b &lt; 247.5, 'SW',\r\n    b &gt;= 247.5 &amp;&amp; b &lt; 292.5, 'W',\r\n    b &gt;= 292.5 &amp;&amp; b &lt; 337.5, 'NW',\r\n    ''\r\n  );\r\n\r\n  var d = DistanceGeodetic(previousPoint, finalPoint, \"meters\");\r\n\r\n  return {\r\n    label: {\r\n      text: Text(d, \"#,###.#\") + \"m\\\\nBearing: \" + Text(b, \"#.#\u00b0\") + \" (\" + c + \")\",\r\n      \/\/ symbol angle direction is opposite of Angle function\r\n      angle: iif(b &lt; 180, a * -1, a * -1 + 180),\r\n      color: \"black\",\r\n      font: {\r\n        family: \"Orbitron\",\r\n        style: \"normal\",\r\n        weight: \"bold\",\r\n        size: 9\r\n      },\r\n      haloColor: \"white\",\r\n      haloSize: 1.5,\r\n      yoffset: 4,\r\n      xoffset: iif((b &lt;= 180 &amp;&amp; b &gt; 90) || b &gt;= 270, 4, -4),\r\n      horizontalAlignment: \"center\",\r\n      verticalAlignment: \"bottom\"\r\n    },\r\n    location: Centroid([previousPoint, finalPoint])\r\n  };\r\n`<\/span>;\r\n\r\n<span style=\"color: #998; font-style: italic;\">\/\/ Compile the expression and create an executor<\/span>\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> arcadeExecutor = <span style=\"color: #333; font-weight: bold;\">await<\/span> arcade.createArcadeExecutor(\r\n  labelSegmentExpression,\r\n  labelSegmentProfile\r\n);\r\n\r\n<\/code><\/pre>\n<p>Notice how Arcade overloads functions, like <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/geometry_functions\/#centroid\">Centroid<\/a>, for convenience. In the ArcGIS JS API, I would either be required to write my own centroid function, or convert the two points to an extent object to get the centroid.<\/p>\n<h3>Create the labels and add them to the view<\/h3>\n<p>Once the expression compiles, I execute it for each mouse movement while the user constructs a line. The outputs are converted to their proper JS API classes so I can add the label to the view.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #998; font-style: italic;\">\/\/ create label symbol and position<\/span>\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> { label, location } = arcadeExecutor.execute({\r\n  $feature: graphic\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">let<\/span> activeLabel = <span style=\"color: #333; font-weight: bold;\">new<\/span> Graphic({\r\n  symbol: <span style=\"color: #333; font-weight: bold;\">new<\/span> TextSymbol(label),\r\n  geometry: location\r\n});\r\n\r\nlabelLayer.graphics.add(activeLabel);\r\n<\/code><\/pre>\n<p><strong><a href=\"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/label-segments.html\">View the app<\/a><\/strong><br \/>\n<strong><a href=\"https:\/\/codepen.io\/kekenes\/pen\/dyeydYL?editors=1000\">View the code<\/a><\/strong><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1704072,"id":1704072,"title":"create line - full res","filename":"create-line-full-res.gif","filesize":960371,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/create-line-full-res","alt":"The angle function is used to ensure the orientation of the line label is always parallel with the line. Centroid helps place the label at the center of the segment. The expression executes every time the mouse moves while creating a line.","author":"6561","description":"","caption":"The angle function is used to ensure the orientation of the label is always parallel with the line. Centroid helps place the label at the center of the segment. The expression executes every time the mouse moves while creating a line.","name":"create-line-full-res","status":"inherit","uploaded_to":1702702,"date":"2022-09-02 00:13:53","modified":"2022-09-02 19:05:22","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/create-line-full-res.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/label-segments.html"},{"acf_fc_layout":"image","image":{"ID":1704082,"id":1704082,"title":"stretch2","filename":"stretch2.gif","filesize":2520512,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/stretch2","alt":"You can also execute a similar expression when the user updates the line to keep measurements in sync with edits.","author":"6561","description":"","caption":"You can also execute a similar expression when the user updates the line to keep measurements in sync with edits.","name":"stretch2","status":"inherit","uploaded_to":1702702,"date":"2022-09-02 00:14:03","modified":"2022-09-02 18:03:50","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/stretch2.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/label-segments.html"},{"acf_fc_layout":"image","image":{"ID":1704062,"id":1704062,"title":"add vertex - full res","filename":"add-vertex-full-res.gif","filesize":681621,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/add-vertex-full-res","alt":"add vertex full resolution","author":"6561","description":"","caption":"","name":"add-vertex-full-res","status":"inherit","uploaded_to":1702702,"date":"2022-09-02 00:13:44","modified":"2022-09-06 18:54:11","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/add-vertex-full-res.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/label-segments.html"},{"acf_fc_layout":"content","content":"<p><a name=\"summary-statistics\"><\/a><\/p>\n<h2>Summary statistics<\/h2>\n<p>This final scenario will demonstrate how to use Arcade to calculate summary statistics queried from a feature service and displayed in an element outside the popup.<\/p>\n<p>I created <a href=\"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/summary-statistics.html\">this app<\/a> that allows the user to click a location in the San Diego area, and view statistics for the top five crimes apprehended within a distance of that point.<\/p>\n<h3>Create the profile<\/h3>\n<p>This profile&#8217;s variable definitions look like the following:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> dataProfile = {\r\n  variables: [\r\n    {\r\n      name: <span style=\"color: #d14;\">\"$mapClick\"<\/span>,\r\n      type: <span style=\"color: #d14;\">\"geometry\"<\/span>\r\n    },\r\n    {\r\n      name: <span style=\"color: #d14;\">\"$bufferProps\"<\/span>,\r\n      type: <span style=\"color: #d14;\">\"dictionary\"<\/span>,\r\n      properties: [\r\n        {\r\n          name: <span style=\"color: #d14;\">\"distance\"<\/span>,\r\n          type: <span style=\"color: #d14;\">\"number\"<\/span>\r\n        },\r\n        {\r\n          name: <span style=\"color: #d14;\">\"units\"<\/span>,\r\n          type: <span style=\"color: #d14;\">\"text\"<\/span>\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>\n<p>The expression will take the click location, and create a buffer based off the input distance. Once the expression evaluates, the summary statistics will be returned as an HTML table alongside the buffer geometry.<\/p>\n<h3>Write and compile the Arcade expression<\/h3>\n<p>While it executes, the expression creates a <a href=\"https:\/\/developers.arcgis.com\/arcade\/function-reference\/data_functions\/#featuresetbyportalitem\">FeatureSet from a portal item<\/a> containing data for crimes committed in San Diego. It then queries the top five crimes reported within the buffer using a series of chained functions.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> arcadeExpression = <span style=\"color: #d14;\">`\r\n  var p = Portal('https:\/\/www.arcgis.com');\r\n  var features = FeatureSetByPortalItem(\r\n    p, '03c5236e3d7f496baca4c992f3c2e89c', 0, [\"is_night\", \"type\"], true\r\n  );\r\n\r\n  var bufferGeometry = BufferGeodetic(\r\n    $mapClick,\r\n    $bufferProps.distance,\r\n    $bufferProps.units\r\n  );\r\n\r\n  var topCrimes = Top(\r\n    OrderBy(\r\n      GroupBy(\r\n        Intersects( features, bufferGeometry ),\r\n        \"type\",\r\n        [\r\n          { name: \"total\", expression: \"1\", statistic: \"count\" },\r\n          { name: \"nightPercent\", expression: \"is_night\", statistic: \"avg\" }\r\n        ]\r\n      ),\r\n      \"total desc\"),\r\n    5\r\n  );\r\n\r\n  \/\/ Rest of the expression builds an HTML table\r\n  \/\/ ...removing to conserve space\r\n\r\n  return {\r\n    table: table,\r\n    buffer: bufferGeometry\r\n  };\r\n`<\/span>;\r\n\r\n<span style=\"color: #998; font-style: italic;\">\/\/ Compile the color variable expression and create an executor<\/span>\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> dataArcadeExecutor = <span style=\"color: #333; font-weight: bold;\">await<\/span> arcade.createArcadeExecutor(\r\n  arcadeExpression,\r\n  dataProfile\r\n);\r\n<\/code><\/pre>\n<p><strong><a href=\"https:\/\/github.com\/ekenes\/arcade-experiments\/blob\/main\/custom-profiles\/summary-statistics.html#L119-L181\">View the full expression<\/a><\/strong><\/p>\n<h3>Execute the expression and display the results<\/h3>\n<p>The result is returned as an HTML table that can then be added as content to a DOM element or web component in your app.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">view.on(<span style=\"color: #d14;\">\"click\"<\/span>, <span style=\"color: #333; font-weight: bold;\">async<\/span> ({ mapPoint }) =&gt; {\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> distance = distanceSlider.values[<span style=\"color: #008080;\">0<\/span>];\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> { table, buffer } = <span style=\"color: #333; font-weight: bold;\">await<\/span> dataArcadeExecutor.executeAsync({\r\n    $mapClick: mapPoint,\r\n    $bufferProps: {\r\n      distance,\r\n      units: <span style=\"color: #d14;\">\"miles\"<\/span>\r\n    }\r\n  }, {\r\n    spatialReference: view.spatialReference\r\n  });\r\n\r\n  displayDiv.innerHTML = table;\r\n  addBufferToView(buffer);\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":1702992,"id":1702992,"title":"buffer","filename":"buffer.png","filesize":56418,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\/buffer-4","alt":"This app calculates the top five crimes reported within the distance of a point clicked in the map.","author":"6561","description":"","caption":"This app calculates the top five crimes reported within the distance of a point clicked in the map.","name":"buffer-4","status":"inherit","uploaded_to":1702702,"date":"2022-09-01 00:26:50","modified":"2022-09-01 00:34:43","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":706,"height":494,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","medium-width":373,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","medium_large-width":706,"medium_large-height":494,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","large-width":706,"large-height":494,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","1536x1536-width":706,"1536x1536-height":494,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","2048x2048-width":706,"2048x2048-height":494,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer-665x465.png","card_image-width":665,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/buffer.png","wide_image-width":706,"wide_image-height":494}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/summary-statistics.html"},{"acf_fc_layout":"content","content":"<p><strong><a href=\"https:\/\/ekenes.github.io\/arcade-experiments\/custom-profiles\/summary-statistics.html\">View the app<\/a><\/strong><br \/>\n<strong><a href=\"https:\/\/codepen.io\/kekenes\/pen\/jOxOZjx?editors=1000\">View the code<\/a><\/strong><\/p>\n<p>You may reasonably ask, &#8220;Why would I do this when the ArcGIS JS API already allows me to <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurelayerview-query-distance\/\">query statistics with better performance<\/a>?&#8221; This is true. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-layers-FeatureLayerView.html#queryFeatures\">layer view query functions<\/a> available in the ArcGIS JS API provide a smoother experience for querying data.<\/p>\n<p>However, Arcade can be a good solution since it abstracts a lot of the quirks that exist for querying data between server versions, database types, and layer types when it comes to querying statistics. Some functions are made available for newer services but aren\u2019t in older ones. Arcade also paginates queries in your behalf, whereas you would need to do this <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurelayer-query-pagination\/\">on your own<\/a> in JavaScript.<\/p>\n<p>In summary, Arcade allows you to use a consistent syntax to query data from all kinds of sources. In other words, you can use the same expression for a variety of sources without needing to check version numbers, make exceptions, or worry about pagination.<\/p>\n<h2>Conclusion<\/h2>\n<p>Defining a custom profile is more meaningful when you provide an experience allowing users in an app builder to configure their own experience with Arcade. Examples of this scenario include apps like ArcGIS Online Map Viewer, ArcGIS Dashboards, ArcGIS Velocity, ArcGIS Pro.<\/p>\n<p>However, as demonstrated in the examples above, you can certainly use the Arcade executor to create profiles for any purpose you want. If you have a custom profile in mind, let me know about it! I&#8217;d love to see how you create custom Arcade profiles in your web apps.<\/p>\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":[{"ID":1683632,"post_author":"6561","post_date":"2022-08-16 09:00:52","post_date_gmt":"2022-08-16 16:00:52","post_content":"","post_title":"I\u2019m a developer. Do I really need Arcade?","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"im-a-developer-do-i-really-need-arcade","to_ping":"","pinged":"","post_modified":"2024-10-31 23:59:49","post_modified_gmt":"2024-11-01 06:59:49","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1683632","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1688362,"post_author":"6561","post_date":"2022-08-22 09:30:37","post_date_gmt":"2022-08-22 16:30:37","post_content":"","post_title":"Execute Arcade expressions on your terms","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"execute-arcade-expressions-on-your-terms","to_ping":"","pinged":"","post_modified":"2024-10-31 23:59:37","post_modified_gmt":"2024-11-01 06:59:37","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1688362","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":878991,"post_author":"6461","post_date":"2020-06-10 11:11:30","post_date_gmt":"2020-06-10 18:11:30","post_content":"","post_title":"Your Arcade Questions Answered","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"your-arcade-questions-answered","to_ping":"","pinged":"","post_modified":"2024-11-01 00:17:42","post_modified_gmt":"2024-11-01 07:17:42","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=878991","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/card-arcade-2.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/banner-4.jpg"},"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>How to create a custom Arcade profile<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.\" \/>\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\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a custom Arcade profile\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\" \/>\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-01T07:15:21+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\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"How to create a custom Arcade profile\",\"datePublished\":\"2022-09-07T17:32:34+00:00\",\"dateModified\":\"2024-11-01T07:15:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\"},\"wordCount\":7,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"arcade\",\"data visualization\",\"Measurement\",\"sketch\"],\"articleSection\":[\"Arcade\",\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\",\"name\":\"How to create a custom Arcade profile\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-09-07T17:32:34+00:00\",\"dateModified\":\"2024-11-01T07:15:21+00:00\",\"description\":\"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a custom Arcade profile\"}]},{\"@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":"How to create a custom Arcade profile","description":"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.","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\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile","og_locale":"en_US","og_type":"article","og_title":"How to create a custom Arcade profile","og_description":"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-01T07:15:21+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\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"How to create a custom Arcade profile","datePublished":"2022-09-07T17:32:34+00:00","dateModified":"2024-11-01T07:15:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile"},"wordCount":7,"commentCount":3,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["arcade","data visualization","Measurement","sketch"],"articleSection":["Arcade","Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile","name":"How to create a custom Arcade profile","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-09-07T17:32:34+00:00","dateModified":"2024-11-01T07:15:21+00:00","description":"Learn how to create a custom Arcade profile and execute expressions in the context of a web app.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-create-a-custom-arcade-profile#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How to create a custom Arcade profile"}]},{"@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":"September 7, 2022","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/08\/banner-4.jpg","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":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":736191,"name":"Measurement","slug":"measurement","term_group":0,"term_taxonomy_id":736191,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":759822,"name":"sketch","slug":"sketch","term_group":0,"term_taxonomy_id":759822,"taxonomy":"post_tag","description":"","parent":0,"count":13,"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":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/1702702","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=1702702"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1702702\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1702702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1702702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1702702"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1702702"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1702702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}