All Apps and Add-ons

How to enable Javascript for Splunk App

thinhdinh
Path Finder

Hi Splunkers,

I am developing a custom app and I am using React to build an user interface for it. I have tested on my local and it works well. But when I copy all files to /opt/splunk/etc/apps/flowdock/default/data/ui/alerts this directory, I got error like below picture:

Screenshot 2020-07-29 at 13.56.06.png

How can we solve this issue? Thanks in advance.

Labels (1)
0 Karma

isoutamo
SplunkTrust
SplunkTrust

Hi

There are quite many similar questions already e.g. below

https://community.splunk.com/t5/Dashboards-Visualizations/Where-should-I-put-my-JavaScript-and-CSS-f...

The correct place to JS and CSS is 

$SPLUNK_HOME/etc/apps/<appname>/appserver/static/

r. Ismo 

thinhdinh
Path Finder

Hi @isoutamo Thank you for your answer. if inside html file we still have javascript code, do we need to move them as well? Cause I have been moved those files under appserver/static but it is still not working.

0 Karma

isoutamo
SplunkTrust
SplunkTrust

Hi

are you using simpleXML or pure html files (converted from simpleXML)?

I think that the solution could  be more simple if all JS files are in one place and you then include those to the dashboards.

r. Ismo

https://community.splunk.com/t5/Dashboards-Visualizations/How-to-load-Javascript-CSS-in-Splunk-to-bu...

https://community.splunk.com/t5/Dashboards-Visualizations/How-do-you-add-JS-in-xml/td-p/373307

 

0 Karma

thinhdinh
Path Finder

Hi,

I am not using simpleXML. I just coded the GUI using React and then I build the project to html and js files. If you looked at the warning, it comes from the noscript tag inside my HTML file. It seems we need to enable javascript somewhere under splunk app?! Bytheway I only have a basic form like this:

Screenshot 2020-07-29 at 15.49.34.png

 

0 Karma

thinhdinh
Path Finder

@isoutamo Sorry, I have to disable your question as a solution. Because I just realised we were missing understanding about my issue. Actually I want to run javascript inside the HTML file from this directory:

 

$SPLUNK_HOME/etc/apps/app_name/default/data/ui/alerts

 

Basically this file is the form, where we get inputs from users, when they are creating alerts. For the dashboards, sure we are able to run js and I am building a custom dashboard using React and it works.

0 Karma

thinhdinh
Path Finder

Here's the content of my HTML file:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>Flowdock App</title>
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/index.js"></script>
    <script src="/static/js/2.a630fc11.chunk.js"></script>
    <script src="/static/js/main.5040630f.chunk.js"></script>
</body>

</html>

 

 

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Detection Engineering Office Hours: Real-World Troubleshooting & Q&A

[REGISTER HERE] This thread is for the Community Office Hours session on Detection Engineering Office Hours: ...

Developer Spotlight with Mika Borner

From Hackathon Winner to Enterprise Leader    Mika Borner, CEO and Founder of Datapunctum AG, has been ...

Continue Your Federation Journey: Join Session 3 of the Bootcamp Series

To help practitioners build a stronger foundation, we launched the Data Management & Federation ...