nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Embed HTML/JavaScript into ArcGIS Hub Webpage

NathanRice

I am trying to embed an HTML/JavaScript page that I wrote using the JavaScript 4.13 API into an ArcGIS Hub webpage. The code also requires the use of several csv files in order to access the data it needs. Is there a way to just insert HTML/JavaScript directly into a page on a Hub website as well as upload the csv files? If so, any help would be greatly appreciated. Thank you!

Find more posts tagged with

Accepted answers

All comments

AbeCoughlin

I support the notion of some form of JS, or make it Arcade if you need, but some method of pulling external data/text into the page. From our perspective, we're aiming to share data and text from our other enterprise environments, and, to not require our staff to duplicate their efforts and copy/paste or rewrite content. I would like the ability to pull data from both our GIS other enterprise applications dynamically.✔️

DataOfficer

JavaScript would be useful to allow use of 'read more' buttons, rather than having to rely on accordions all the time.
E.g. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more

Anonymous User

For security reasons and to prevent collisions with the javascript hub site runtime we do not currently allow scripts. The iframe method you mentioned is the way to do this. We do have a table data visualization on our backlog!

StephaneLefebvre

Hi, just a quick one showing what we want to do, basicly injecting content from the ArcGIS REST API:

<div class="container">
   <div class="table-responsive">
   <br />
      <table class="table table-bordered table-striped" id="appels_srao_7jours">
      <tr>
      <th>Région</th>
      <th>Nb Appels</th>
      </tr>
   </table>
</div>

</div>

Of course, we can build a Web site and use an iFrame, but it's extra data to load and to put in place.

It does work in Preview mode, but as stated, the script part is remove at save.

Anonymous User

Hi Shad - for download tracking the best solution we have today is to include a Google Analytics key on your Site. There you will get metrics on each dataset downloaded and a whole lot more!

I'll look into the bug that's been logged in FGDB downloads. Thanks for raising

ShadCampbell

Graham Hudgins - Here are a few examples of why we would like to have custom JavaScript in Hub.

We would like to track the number of downloads (or at least attempted downloads) and type of data people are downloading from our Hub site. As far as I know, Esri does not offer a way to track download metrics. In the old "Open Data" site we could include custom JavaScript that would bind to the download button click event and send an AJAX request to a webhook capturing the download metric.

Were also having issues downloading File Geodatabases from our Hub site - the button is present, but nothing happens when you click on it. We have a support case and bug logged for this with Esri. However in the meantime we are considering creating custom download code which would call the "CreateReplica" REST call from our ArcGIS Server (which is working great). We would need to override the download button event in Hub to call our download code instead... until the bug is fixed.

Hoping that this functionality will be included/fixed at some point and we won't have a need to write our own JavaScript fixes or create our own "Hub" like app.

NFlourish

Yes - this is really the only option for including custom JS based functionality... and currently there is not a way for IFramed content to interact with the rest of the site.

It would be kind of neat as an extensibility option for Hub to provide some minimal avenue for a 3rd party site to interact with the Hub... like if there was a documented shared cookie that Hub checked for updates every 30 seconds for something... and was only used as a way to send data to and from an IFramed element.

As Graham Hudgins‌ mentioned - you can use custom Style tags. Many traditional Javascript developers would be surprised by the sort of interactive and input driven content you can build with modern CSS. If you have a CSS wiz on staff, getting their ideas for interactive elements in Hub is worth the time.

NathanRice

I created a page using HTML and the 4.13 JavaScript API. I was hoping to be able to embed that code directly into a Hub site, but I found a workaround by hosting a static site through AWS and using an Iframe box connecting to the static site.

Anonymous User

You can use your own \<style> tags and custom HTML by dragging a text card. As the other person mentions...javascript is not currently allowed due to possible collisions with the Hub's javascript runtime. Would be interested in hearing what you are trying to achieve as that is always a good source of inspiration for layout options in the site editor

NFlourish

Hi!

You cannot add javascript to any of the elements in a Hub page layout directly.

You can create an app using the JSAPI, host it separately, and embed it using an iFrame.

If you try to put JS into, say, the code view of a text element, you'll see on save that the JS gets stripped and transformed into something unusable.

I believe this by design and related to the general Esri policy of not being responsible for hosting/running custom client JS code in the Esri-owned AGO cloud infrastructure. That is, it is the same reason you can't create a custom widget for a Web App Builder that is actually hosted at AGO. To use a custom a widget, you have to run the site somewhere other than AGO.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.