web app example to manage network diagram using JS/ArcGIS Rest API/ArcGIS Network Diagram Services

[giuseppeprocino]

Hi,

in this video "Discovering Network Diagrams and their Configurations"

https://www.youtube.com/watch?v=_ayNmPNves4

close to 55' I saw a simple javascript web app to view and to manage network diagram. Where I can found an example code? Are there other web app example to manage network diagram using JS/ArcGIS Rest API/ArcGIS Network Diagram Services? Where I could found it?

Best regards

gp

[AnneYvonneBlin]

Hi @giuseppeprocino
Please find as an attached file this sample web app code. This is provided as an example for you to help in your own network diagram web app developments.
Best regards
Anne-Yvonne

[gpgisandsky]

Hi Anne,

sorry for the delay in getting back to you. Your files are very precious for our studied.

Thank you

Giuseppe P.

[GIS_Solutions]

Hi @AnneYvonneBlin 

This app does it display a diagram created with ArcGIS Pro version 3.1?  I can see published services and generated diagrams in the dropdown list. But it does not display the diagram in the right panel.

[AnneYvonneBlin]

@GIS_Solutions,
It should display as you expect whatever your Utility Network version and whatever the version used to create the diagrams. I've just tested and it works. Any 3.1 diagram I create with the webapp or create/store using ArcGIS Pro then load using the web app correctly displays.
The only limitation I can think about concerns the layer definition you set up on the related diagram template. As explained below, it doesn't work properly when subtype group layers are used for diagram layer definition, but even with subtype group layers, you should at least partially see diagram parts.
NOTE: once you clicked the Display Diagram button, you may have to wait a few seconds before the diagram loads. This is particularly true the 1st time you open a diagram based on a given template for which the template layer definition is not already loaded on the server .
Thanks

Anne-Yvonne

[gpgisandsky]

Hi @AnneYvonneBlin , do you know if there is a way to show the diagram with a custom simbology? Using your sample web app I saw the diagram with default simbology. Otherwise the maps display the correct custom simbology that i had on my ArcGIS Pro.

[AnneYvonneBlin]

Hi @gpgisandsky 
This sample web app only works with "standard" layers for network diagrams. It doesn't work properly when subtype group layers are used for diagram layer definition.
However, if you set up custom diagram layer definition on your diagram template and this custom layer definition is based on standard layers, you should see your symbols and labels for any diagrams based on this template whether you open them within ArcGIS Pro or using this sample web app.
See the same diagram open below through this web app (left side)  vs. within ArcGIS Pro (right side)


If you need some guidance about diagram layer definition, see https://pro.arcgis.com/en/pro-app/latest/help/data/network-diagrams/manage-diagram-layer-definitions...

[gpgisandsky]

Hi @AnneYvonneBlin

thank you for your support. My diagram work online fine now. In my opinion the way to apply the custom simbology is a bit strange because I need use the map symbology to apply diagram symbology insted of using that of a previously built existing diagram. Also a diagram symbology is ofen a bit different respect same map feature (like for the scale factor). Ragarding the app NetworkDiagamsSampleWebApp.zip I would like know:

- Is there a new version to share?

- How is this app built (ArcGIS Maps SDK for JavaScript xx, module
Dojo..)? Is there a source code project? I would like know the best way to extend it adding for example identify and visibility layers control for diagram and map features.

Thank you

Giuseppe

[AnneYvonneBlin]

Hi @gpgisandsky 

It looks like you use the Create Diagram Layer Definition tool to initialize the diagram layer definition from network feature layers in a map. But as you expect, you can also refine any existing diagram layer definition you already have for an existing diagram and import it as default on your diagram template. To do so, read the Refine the diagram layer definition on a template help topic.

About the other questions:

•  We do not have any new version of this sample webapp to share.
• Network Diagrams is not part of the Maps SDK for JavaScript nor Maps SDK for Native Apps (Runtime) at the moment. This is part of our future plans but not in the short term.

Thank you
Anne-Yvonne