Panel does not render anything when I javascript code to source code

g-money — Wed, 15 Jul 2020 22:52:02 GMT

I am trying to make my own COVID-19 dashboard. I was wondering if I could use the code provided on the CDC website.
You can find this code by visiting https://www.cdc.gov/coronavirus/2019-ncov/cases-updates/cases-in-us.html and scroll down to "Deaths by Jurisdiction" and click on "Add US Map to your website"

What is wrong with this piece of code I added to my dashboard? There are no errors but I don't see any panel on the dashboard.

<row> <panel> <html> <title>Deaths by Jurisdiction </title> <div data-post-id="50079" data-site-id="499" data-site-root-folder="coronavirus" class="mb-3" data-host="www.cdc.gov" data-theme="theme-cyan" data-cdc-widget="cdcMaps" data-config-url="/coronavirus/2019-ncov/cases-updates/us-case-count-maps-charts/map-cases-us-DeathOnly_Desktop.json"> </div> <script src="//tools.cdc.gov/TemplatePackage/contrib/widgets/tp-widget-external-loader.js"></script> </html> </panel> </row>

Re: Panel does not render anything when I javascript code to source code

niketn — Fri, 17 Jul 2020 21:42:57 GMT

@g-money ideally you should not add Javascript (rather any static resources) from external website without knowing the complete code. This will open up your app/web page to cross site insecure contents and XSS attack.

Splunk4Good provides you with several insightful Covid dashboards along with github repo for you to build your based on your data source, please see if that would suit your needs. https://covid-19.splunkforgood.com/hub

Having said that, there are two ways you can use internet based static JS file reference.

1. Convert an Empty Simple XML Dashboard to HTML Dashboard and past the HTML content as is in the html section of the HTML dashboard.

2. For Simple XML JS extension, add a dummy JS file to your Splunk Apps's appserver/static folder and reference web based JS file in that dummy JS file.

Please find below Example of Simple XML JS Extension approach as HTML Dashboard would be straight forward. PS: Use at your own caution as stated earlier.

Following is the Simple XML Dashboard code (notice <script> section is not added to the <html> panel):

<dashboard script="cdc_covid_dummy.js"> <label>CDC Covid Dashboard</label> <row> <panel> <html> <div data-post-id="50079" data-site-id="499" data-site-root-folder="coronavirus" class="mb-3" data-host="www.cdc.gov" data-theme="theme-cyan" data-cdc-widget="cdcMaps" data-config-url="/coronavirus/2019-ncov/cases-updates/us-case-count-maps-charts/map-cases-us-CaseOnly_Desktop.json"> </div> </html> </panel> </row> </dashboard>

Following is the required JS file cdc_covid_dummy.js to be placed under your Splunk app's appserver/static folder (may require refresh, bump or restart of Splunk instance and also clearing of web browser history):

require(['//tools.cdc.gov/TemplatePackage/contrib/widgets/tp-widget-external-loader.js', 'splunkjs/mvc/simplexml/ready!' ], function () { // Dummy JS to link CDC JS over Web });

Please try out and confirm! Recommended approach would be to use Splunk4Good code and plug in your data source.

Do UPVOTE if this reply helps 🙂

topic Panel does not render anything when I javascript code to source code in Dashboards & Visualizations

Panel does not render anything when I javascript code to source code

Re: Panel does not render anything when I javascript code to source code