{"id":1272212,"date":"2021-07-01T01:01:53","date_gmt":"2021-07-01T08:01:53","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1272212"},"modified":"2021-07-02T11:14:20","modified_gmt":"2021-07-02T18:14:20","slug":"utility-network-is-now-on-arcgis-javascript-api-4-20","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20","title":{"rendered":"Utility Network is now on ArcGIS JavaScript API 4.20"},"author":7511,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23851],"tags":[760922,760932,35461],"industry":[],"product":[36831,515312,36601],"class_list":["post-1272212","blog","type-blog","status-publish","format-standard","hentry","category-data-management","tag-javascript-api-utility-network","tag-trace-javascript-utility-network","tag-utility-network","product-js-api-arcgis","product-utility-network","product-developers"],"acf":{"short_description":"Utility Network JavaScript API is now available on the Esri ArcGIS JavaScript 4.20 release","flexible_content":[{"acf_fc_layout":"content","content":"

Just like we did with ArcGIS Runtime 100.6 in late 2019, we have been working ever since to bring the capabilities of the utility network to the JavaScript API. We are pleased to announce that the first cut of the utility network API is now available on ArcGIS JavaScript API 4.20.<\/a> In this blog post we discuss what\u2019s new in ArcGIS Utility Network for JavaScript, illustrate few code samples and finally discuss what\u2019s coming in future releases.<\/p>\n

This blog assumes you know the basics of the utility network, to learn more visit our core help page here<\/a>.<\/p>\n

The utility network JavaScript\u00a0API on 4.20 require the named trace configuration capability which is available in Enterprise 10.9. You will need ArcGIS Enterprise 10.9 and a Utility Network version 5 created with ArcGIS Pro 2.7 or 2.8 to take advantage of the new API.<\/em><\/p><\/blockquote>\n"},{"acf_fc_layout":"content","content":"

What’s new for utility network in ArcGIS JavaScript 4.20<\/h1>\n

This release is focused on delivering the tracing functionality through the new named trace configuration shipped in 10.9. Trace configurations can be created and persisted on a UN 5.0 with Pro 2.7 and later. The persisted trace configuration has all the properties, filters and output required to execute a particular trace. Trace configurations can be shared through webmaps and consumed by simply referencing the trace configuration id (GUID). Read more about trace configurations here<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"

Opening a WebMap with utility network<\/h2>\n

Given a webmap created with Pro 2.7 or later with shared trace configuration, the JavaScript API can open the webmap and list all the shared named trace configurations.<\/p>\n

Here is an example of how you can load a webmap and any utility network objects shared within it.<\/p>\n"},{"acf_fc_layout":"content","content":"

<\/p>\n

\n\n\n\n
\n
 1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30<\/pre>\n<\/td>\n
\n
async function<\/span> init(){ \r\n    \/\/A webmap with utility network layer and shared trace configurations<\/span>\r\n    const<\/span> webmapId =<\/span> \"aafe41463e32497ab56cbac0acf16339\"<\/span>\r\n    const<\/span> portalUrl =<\/span> \"https:\/\/utilitynetwork.esri.com\/portal\"<\/span>\r\n\r\n    \/\/create a webmap object<\/span>\r\n    const<\/span> webmap =<\/span> new<\/span> WebMap({\r\n                portalItem:<\/span> {\r\n                    id:<\/span> webmapId,\r\n                    portal:<\/span> { url:<\/span> portalUrl }\r\n                }\r\n            });\r\n    \r\n    \/\/create a webmap view and load it into div with id `viewDiv`<\/span>\r\n    const<\/span> view =<\/span> new<\/span> MapView({\r\n            map:<\/span> webmap,\r\n            container:<\/span> \"viewDiv\"<\/span>\r\n            });\r\n    \r\n    \/\/load the webmap definition<\/span>\r\n    await view.when();\r\n    \r\n    \/\/retrieve the first utility network object found in the webmap<\/span>\r\n    \/\/this array is empty if no utility network layers are shared in the webmap<\/span>\r\n    const<\/span> utilityNetwork =<\/span> webmap.utilityNetworks.getItemAt(0<\/span>)\r\n    \r\n    \/\/load the utility network definition and all shared trace configurations etc..<\/span>\r\n    await utilityNetwork.load();\r\n     \r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
.<\/div>\n"},{"acf_fc_layout":"content","content":"
Reading UN Metadata and shared named trace configuration<\/h2>\n
Once the utility network is loaded successfully, you can query for its meta-data. Let’s consider few examples of properties that can be read from the utility network object.<\/p>\n"},{"acf_fc_layout":"content","content":"
Reading basic utility network meta-data<\/h3>\n
While most properties require fully loading the utility network definition via the load method to be accessed, some properties can be accessed without loading the un. Example are layerId, id and title.<\/p>\n"},{"acf_fc_layout":"content","content":"
<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8<\/pre>\n<\/td>\n
\n
   \/\/make sure to load the utility network<\/span>\r\n   \/\/prints the id of the utility network (UUID)<\/span>\r\n   console.log (utilityNetwork.id)\r\n   \/\/prints the physical datasetname<\/span>\r\n   console.log (utilityNetwork.datasetName)\r\n   \/\/prints the layer id of the utility network<\/span>\r\n   console.log (utilityNetwork.layerId)\r\n   \r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1272252,"id":1272252,"title":"Loading a webmap with a utility network and reading its basic properties","filename":"js1.gif","filesize":997645,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\/js1","alt":"Loading a webmap with a utility network and reading its basic properties","author":"7511","description":"Loading a webmap with a utility network and reading its basic properties","caption":"Loading a webmap with a utility network and reading its basic properties","name":"js1","status":"inherit","uploaded_to":1272212,"date":"2021-06-23 23:47:02","modified":"2021-06-24 00:01: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":916,"height":642,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","medium-width":372,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","medium_large-width":768,"medium_large-height":538,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","large-width":916,"large-height":642,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","1536x1536-width":916,"1536x1536-height":642,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","2048x2048-width":916,"2048x2048-height":642,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1-663x465.gif","card_image-width":663,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js1.gif","wide_image-width":916,"wide_image-height":642}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Reading the named trace configurations<\/h3>\n
During publishing, a webmap containing a utility network can be shared with a list of named trace configurations. These named trace configurations can be accessed through the utiltynetwork object.<\/p>\n"},{"acf_fc_layout":"content","content":"
<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5<\/pre>\n<\/td>\n
\n
\/\/get a reference to the utility network object from the webmap<\/span>\r\n\/\/prints all active named trace configurations, <\/span>\r\n\/\/the title and the globalId of the shared named trace configurations can<\/span>\r\n\/\/be accessed without fully loading the utility network<\/span>\r\nutilityNetwork.sharedNamedTraceConfigurations.forEach(tc=><\/span>console.log(tc.title))\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1272302,"id":1272302,"title":"Reading the named trace configurations","filename":"js2.gif","filesize":633619,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\/js2","alt":"Reading the named trace configurations","author":"7511","description":"Reading the named trace configurations","caption":"Reading the named trace configurations","name":"js2","status":"inherit","uploaded_to":1272212,"date":"2021-06-24 00:24:17","modified":"2021-06-24 00:24:58","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":926,"height":558,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","medium-width":433,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","medium_large-width":768,"medium_large-height":463,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","large-width":926,"large-height":558,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","1536x1536-width":926,"1536x1536-height":558,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","2048x2048-width":926,"2048x2048-height":558,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2-772x465.gif","card_image-width":772,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js2.gif","wide_image-width":926,"wide_image-height":558}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Reading the full named trace configurations<\/h3>\n
While the title and the globalId properties can be accessed without loading the utility network, access to the full trace configuration require loading the utility network. Here is how to access the result types of a particular named trace configuration.<\/p>\n"},{"acf_fc_layout":"content","content":"
<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5<\/pre>\n<\/td>\n
\n
\/\/get a reference to the utility network object<\/span>\r\n\/\/find the named trace configuration named Connected_Elements. <\/span>\r\nconst<\/span> connectedTraceElements =<\/span> utilityNetwork.sharedNamedTraceConfigurations.find(tc=><\/span>tc.title ===<\/span> \"Connected_Elements\"<\/span>)\r\n\/\/print all result types expected from this trace configuration<\/span>\r\nconnectedTraceElements.resultTypes.forEach(r =><\/span> console.log(r.type))\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1272312,"id":1272312,"title":"Reading the full trace configuration object properties","filename":"js3.gif","filesize":822479,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\/js3","alt":"Reading the full trace configuration object properties","author":"7511","description":"Reading the full trace configuration object properties","caption":"Reading the full trace configuration object properties","name":"js3","status":"inherit","uploaded_to":1272212,"date":"2021-06-24 00:32:19","modified":"2021-06-24 00:32:55","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":922,"height":670,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","medium-width":359,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","medium_large-width":768,"medium_large-height":558,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","large-width":922,"large-height":670,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","1536x1536-width":922,"1536x1536-height":670,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","2048x2048-width":922,"2048x2048-height":670,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3-640x465.gif","card_image-width":640,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js3.gif","wide_image-width":922,"wide_image-height":670}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Performing a trace using a named trace configuration<\/h2>\n
You can perform a trace by providing the globalId of the trace configuration and optional starting locations. You can even provide the version and moment to trace to support tracing in a version or a pervious historical moment.<\/p>\n"},{"acf_fc_layout":"content","content":"
<\/p>\n
\n\n\n\n
\n
 1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n10\r\n11\r\n12<\/pre>\n<\/td>\n
\n
\/\/get a reference to the utility network object<\/span>\r\n\/\/find the named trace configuration Subnetwork_RMT003. This trace doesn't require any starting locations<\/span>\r\nconst<\/span> subnetworkRMT003 =<\/span> utilityNetwork.sharedNamedTraceConfigurations.find(tc=><\/span>tc.title ===<\/span> \"Subnetwork_RMT003\"<\/span>)\r\n\/\/create a trace parameter object and provide<\/span>\r\nconst<\/span> traceParameters =<\/span> new<\/span> TraceParameters (\r\n    { \"traceLocations\"<\/span>:<\/span> [],\r\n       \"namedTraceConfigurationGlobalId\"<\/span>:<\/span> subnetworkRMT003.globalId   } )\r\n\r\n\/\/execute trace providing the utility network server url and trace parameters<\/span>\r\nconst<\/span> traceResult =<\/span> await Tracer.trace(utilityNetwork.networkServiceUrl, traceParameters);\r\n\/\/print the result count<\/span>\r\nconsole.log(traceResult.elements.length)\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1272332,"id":1272332,"title":"Running a utility network trace","filename":"js4.gif","filesize":1263112,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\/js4","alt":"Running a utility network trace","author":"7511","description":"Running a utility network trace","caption":"Running a utility network trace","name":"js4","status":"inherit","uploaded_to":1272212,"date":"2021-06-24 00:38:21","modified":"2021-06-24 00:39:01","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":1034,"height":672,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","medium-width":402,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","medium_large-width":768,"medium_large-height":499,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","large-width":1034,"large-height":672,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","1536x1536-width":1034,"1536x1536-height":672,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","2048x2048-width":1034,"2048x2048-height":672,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4-715x465.gif","card_image-width":715,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js4.gif","wide_image-width":1034,"wide_image-height":672}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
View Associations<\/h2>\n
In 4.20 we also introduced the ability to view associations located in a given extent. Control exists to filter what type of associations you would like to render and to limit the number of rows to pull.<\/p>\n"},{"acf_fc_layout":"content","content":"
<\/p>\n
\n\n\n\n
\n
 1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20<\/pre>\n<\/td>\n
\n
\/\/get the current extent<\/span>\r\nconst<\/span> extent =<\/span> view.extent;\r\n\/\/create the list of parameters to view associations<\/span>\r\n\/\/we want to return a max of a 100 structural attachment and connectivity associations only <\/span>\r\nconst<\/span> params =<\/span> new<\/span> SynthetizeAssociationGeometriesParameters({\r\n    \"extent\"<\/span>:<\/span> extent,\r\n    \"returnAttachmentAssociations\"<\/span>:<\/span> true<\/span>,\r\n    \"returnConnectivityAssociations\"<\/span>:<\/span> true<\/span>,\r\n    \"returnContainerAssociations\"<\/span>:<\/span> false<\/span>,\r\n    \"outSR\"<\/span>:<\/span> utilityNetwork.spatialReference,\r\n    \"maxGeometryCount\"<\/span>:<\/span> 100<\/span>\r\n})\r\n\/\/call the synthesizeAssociationGeometries to synthesize assocaitions and return them<\/span>\r\n\r\nconst<\/span> result =<\/span> await SynthetizeAssociationGeometries.synthesizeAssociationGeometries\r\n                                (utilityNetwork.networkServiceUrl, params)\r\n\/\/add associations geometries to the view (remove any existing)<\/span>\r\nview.graphics.removeMany(view.graphics.filter(a=><\/span>a.name ===<\/span> \"associations\"<\/span>))\r\nview.graphics.addMany(result.associations.filter(a =><\/span> a.associationType ===<\/span> \"connectivity\"<\/span>).map(g=><\/span>getGraphic(\"line\"<\/span>, g.geometry, CONNECTIVITY_ASSOCIATION_COLOR, \"associations\"<\/span> )));\r\nview.graphics.addMany(result.associations.filter(a =><\/span> a.associationType ===<\/span> \"attachment\"<\/span>).map(g=><\/span>getGraphic(\"line\"<\/span>, g.geometry, ATTACHMENT_ASSOCIATION_COLOR , \"associations\"<\/span>)));\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1272352,"id":1272352,"title":"View Associations","filename":"js5.gif","filesize":542949,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\/js5","alt":"View Associations","author":"7511","description":"View Associations","caption":"View Associations","name":"js5","status":"inherit","uploaded_to":1272212,"date":"2021-06-24 00:41:26","modified":"2021-06-24 00:41:47","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":940,"height":666,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","medium-width":368,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","medium_large-width":768,"medium_large-height":544,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","large-width":940,"large-height":666,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","1536x1536-width":940,"1536x1536-height":666,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","2048x2048-width":940,"2048x2048-height":666,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5-656x465.gif","card_image-width":656,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/js5.gif","wide_image-width":940,"wide_image-height":666}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Full demo with source code<\/h2>\n
Enjoy this full demo of the utility network API for JavaScript, you can find the source code here<\/a>. At any point you can head to the Esri JavaScript core doc on the API<\/a> to learn more.<\/p>\n"},{"acf_fc_layout":"content","content":"
What’s Next?<\/h1>\n
We are very excited for this first release but of course we are just getting started. Here are few more things brewing in our incubator for the upcoming releases<\/p>\n
Override trace configuration<\/strong><\/p>\n
In the 4.20 release, you can execute traces by referencing a persisted named trace configuration global Id. In the coming releases you will be able read and override existing named trace configurations as well as build your own to pass into the trace. This will allow for example the ability to modify a named trace configuration that only returns elements to instead return aggregated geometries without the need to create a new named trace configuration.<\/p>\n
Query Network Topology Moments<\/strong><\/p>\n
Additional functionality to read the state of the network topology, such as when it was last validated, when the last schema change was applied and more.<\/p>\n
Rule-based Editing, Validate, Subnetwork Management<\/strong><\/p>\n
The ability to run utility network functions such as validate network topology and update subnetwork to maintain network consistency while also exposing network rules for use to derive editing snapping.<\/p>\n"},{"acf_fc_layout":"content","content":"
Useful Resources<\/h1>\n
Here are few links that will help you get started.<\/p>\n
Overview on the Utility Network\u00a0<\/a><\/p>\n
Named Trace Configurations<\/a><\/p>\n
Utility Network JavaScript API Doc<\/a><\/p>\n
Utility Network Demo JavaScript API demo<\/a><\/p>\n"}],"authors":[{"ID":7511,"user_firstname":"Hussein","user_lastname":"Nasser","nickname":"Hussein Nasser","user_nicename":"hussein-nasser","display_name":"Hussein Nasser","user_email":"HNasser@esri.com","user_url":"http:\/\/www.husseinnasser.com","user_registered":"2018-03-21 18:21:21","user_description":"Product Engineer at Esri, Author of several GIS books and Software Engineering Content Creator on YouTube and a podcast host.","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/Copy-of-un-.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/Copy-of-un3.jpg"},"yoast_head":"\nUtility Network is now on ArcGIS JavaScript API 4.20<\/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\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utility Network is now on ArcGIS JavaScript API 4.20\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\" \/>\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=\"2021-07-02T18:14:20+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\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\"},\"author\":{\"name\":\"Hussein Nasser\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/78b7647b1db598b3c791d039593e5b2b\"},\"headline\":\"Utility Network is now on ArcGIS JavaScript API 4.20\",\"datePublished\":\"2021-07-01T08:01:53+00:00\",\"dateModified\":\"2021-07-02T18:14:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\"},\"wordCount\":8,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"javascript api utility network\",\"trace javascript utility network\",\"utility network\"],\"articleSection\":[\"Data Management\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\",\"name\":\"Utility Network is now on ArcGIS JavaScript API 4.20\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-07-01T08:01:53+00:00\",\"dateModified\":\"2021-07-02T18:14:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utility Network is now on ArcGIS JavaScript API 4.20\"}]},{\"@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\/78b7647b1db598b3c791d039593e5b2b\",\"name\":\"Hussein Nasser\",\"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\/2018\/06\/profile.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/profile.png\",\"caption\":\"Hussein Nasser\"},\"description\":\"Product Engineer at Esri, Author of several GIS books and Software Engineering Content Creator on YouTube and a podcast host.\",\"sameAs\":[\"http:\/\/www.husseinnasser.com\",\"https:\/\/www.linkedin.com\/in\/hnaser\/\",\"https:\/\/x.com\/hnasr\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/hussein-nasser\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Utility Network is now on ArcGIS JavaScript API 4.20","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\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20","og_locale":"en_US","og_type":"article","og_title":"Utility Network is now on ArcGIS JavaScript API 4.20","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2021-07-02T18:14:20+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\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20"},"author":{"name":"Hussein Nasser","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/78b7647b1db598b3c791d039593e5b2b"},"headline":"Utility Network is now on ArcGIS JavaScript API 4.20","datePublished":"2021-07-01T08:01:53+00:00","dateModified":"2021-07-02T18:14:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["javascript api utility network","trace javascript utility network","utility network"],"articleSection":["Data Management"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20","name":"Utility Network is now on ArcGIS JavaScript API 4.20","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-07-01T08:01:53+00:00","dateModified":"2021-07-02T18:14:20+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/utility-network\/data-management\/utility-network-is-now-on-arcgis-javascript-api-4-20#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Utility Network is now on ArcGIS JavaScript API 4.20"}]},{"@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\/78b7647b1db598b3c791d039593e5b2b","name":"Hussein Nasser","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\/2018\/06\/profile.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/06\/profile.png","caption":"Hussein Nasser"},"description":"Product Engineer at Esri, Author of several GIS books and Software Engineering Content Creator on YouTube and a podcast host.","sameAs":["http:\/\/www.husseinnasser.com","https:\/\/www.linkedin.com\/in\/hnaser\/","https:\/\/x.com\/hnasr"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/hussein-nasser"}]}},"text_date":"July 1, 2021","author_name":"Hussein Nasser","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/hussein-nasser","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/06\/Copy-of-un3.jpg","primary_product":"ArcGIS Utility Network","tag_data":[{"term_id":760922,"name":"javascript api utility network","slug":"javascript-api-utility-network","term_group":0,"term_taxonomy_id":760922,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":760932,"name":"trace javascript utility network","slug":"trace-javascript-utility-network","term_group":0,"term_taxonomy_id":760932,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":35461,"name":"utility network","slug":"utility-network","term_group":0,"term_taxonomy_id":35461,"taxonomy":"post_tag","description":"","parent":0,"count":61,"filter":"raw"}],"category_data":[{"term_id":23851,"name":"Data Management","slug":"data-management","term_group":0,"term_taxonomy_id":23851,"taxonomy":"category","description":"","parent":0,"count":921,"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":363,"filter":"raw"},{"term_id":515312,"name":"ArcGIS Utility Network","slug":"utility-network","term_group":0,"term_taxonomy_id":515312,"taxonomy":"product","description":"","parent":36981,"count":141,"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=utility-network","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1272212","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\/7511"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1272212"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1272212\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1272212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1272212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1272212"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1272212"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1272212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}