Embed HTML/JavaScript into ArcGIS Hub Webpage

2804
9
11-26-2019 09:52 AM
NathanRice
New Contributor II

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!

0 Kudos
9 Replies
NFlourish
Occasional Contributor

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.

0 Kudos
GrahamHudgins
Esri Regular Contributor

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

0 Kudos
NathanRice
New Contributor II

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. 

NFlourish
Occasional Contributor

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.

0 Kudos
StephaneLefebvre
New Contributor III

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>


<script>
$(document).ready(function() {
$.getJSON(
`https://local_arcgis_enterprise/arcgis/rest/services/Hosted/REST_endpoint/FeatureServer/0/query?where=longquery with loads of params.. f=pjson`,
function(data) {
   var tableData = '';
   $.each(data.features, function(key, value) {
      tableData += '<tr>';
      tableData += '<td>' + value.attributes.nom_reg + '</td>';
      tableData += '<td>' + value.attributes.nb_appel_srao + '</td>';
      tableData += '<tr>';
});
$('#appels_srao_7jours').append(tableData);
});
});
</script>

</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.

0 Kudos
GrahamHudgins
Esri Regular Contributor

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!

0 Kudos
ShadCampbell
New Contributor III

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.  

0 Kudos
GrahamHudgins
Esri Regular Contributor

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

0 Kudos
DataOfficer
Regular Contributor

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