PortalItem (ArcGIS Dashboards) JSON to HTML

Question

Hello Everyone,

I have searched a lot within the documentation but could not get an answer or a guid.

I have a Vue.js app which is suppose to take a public ArcGIS Dashboard ID as an input and fetch its data and display the dashboard to the user. I know this can be done easily through embedding the URL of the dashboard in an iframe tag but is there a way to do this programmatically by only taking the ID of the dashboard?

For now I'm using the following code to fetch the data of the dashboard:

new PortalItem({
   id: "409af567637846e3b5d4182fcd779bea"
 }).load().then(function (item) {
  item.fetchData().then(function(itemData) {
     console.log(itemData);
 })
});

That code gets the JSON representation of the dashboard, so is there any way to render the dashboard to the user using that JSON data?

Thanks so much!!

jcarlson · Answer

I don't know if there's no way, but an embedded frame would be a lot easier, otherwise you'll have to copy out the HTML, CSS, and JS resources that make the dashboard actually work.

MahmudHamid · Answer

So you're saying that there is no way to display the dashboard other than calling the dashboard URL? In other words using embedded iframe?

jcarlson · Answer

All the display stuff is coming from the dashboard app itself. For our portal, that's

https://maps.co.kendall.il.us/portal/apps/opsdashboard/index.html#someitemid

So the assets needed to render the dashboard are at that path, and it reads the JSON based on the itemID.