Replacing a Data Source in Ops Dashboard using JSON

john.diaz April 29, 2020

Have you ever built a really neat dashboard with tons of elements only to realize the data source needed to be changed?  This can be frustrating, especially if multiple elements are configured and are pulling from one source.  Instead of reconfiguring everything all over again, there is a pretty neat trick to accomplish this by manipulating the dashboard’s JSON,  See below:

1. Important note:  always test this on a copy of the dashboard first!
2. Open the webmap feeding the dashboard
3. Add the new layer (new data source) to the webmap being consumed by the dashboard
   1. Uncheck layer to make it invisible
4. Save webmap
5. Go to https://ago-assistant.esri.com/ and log in using your AGOL credentials.
6. At the top of the page, click ‘I want to…’ and choose ‘View an Item’s JSON’
7. Search for the webmap (same webmap from step 1) by either navigating the content pane, or enter search criteria in the ‘Search My Content’ box
8. Click on the webmap information once webmap is located, and code will appear on the right:
9. Scroll down until the Data section is visible and click on the Copy JSON button:
10. Paste the code in a new NotePad++ and save this code! Remember to name it so you remember it is the original code (e.g. Transpo Original Webmap JSON).  This is a safety measure!
11. Paste the code again in a new NotePad++ and save the file (New Webmap JSON).
12. Repeat this process with the dashboard item. Capture the dashboard’s JSON (data portion) from https://ago-assistant.esri.com/ and paste the code into Notepad++.  Save code as is and save another copy for editing.
13. Display both of the New code files side by side in Notepad++
14. In the Webmap JSON, locate the ‘id’ of the layer to be replaced (this will be the layer you will be removing later). Copy this id.   For example, you would copy the following text highlighted in the following line of code: “id”: “Coronavirus_2019_nCoV_Cases_9998″
15. Click on the dashboard JSON side and see how many times this instance appears using the find command (CTRL-F). It should appear for each time the data source is referenced in an element, or map within the dashboard.
16. Click back on the webmap JSON side, and locate the id of the new layer that was added (this will be the new layer that will stay once the old one is deleted).
17. On the dashboard side of the JSON code, find and replace the old id with the new id.
18. Select the entire dashboard JSON text (CTRL-A) and copy the new dashboard code from Notepad++
19. Go back to ago-assistant and be sure you are still viewing the dashboard’s JSON.
20. In the Data portion, click on the edit JSON button:
21. Select all of the data in this section (CTRL-A) and delete it. Note: the original dashboard JSON that was saved can be placed back in this section if anything breaks or does not look correct.
22. Paste the new dashboard JSON code here and click Save. If there is an error in the code, you will not be able to save the code here.
23. Open the dashboard in edit mode and check the elements are all configured properly and check the data sources. They should point the data source.
24. If all looks okay, configure the new layer’s symbology, popups, and labels in the webmap and remove the old layer.
25. Save webmap and reload the dashboard.
26. If all looks okay, the new data source has been properly replaced and configured.

Although it might seem like a lot of steps, this can be done in just a few minutes with a little practice.

If you need more information or have any questions, please contact John Diaz at jdiaz2@parks.lacounty.gov.