topic How to implement/ to assimilate my list to html? in Dashboards & Visualizations

How to implement/ to assimilate my list to html?

yaghobieh — Tue, 13 Jun 2017 21:28:22 GMT

Hi I came from Angular, NodeJs And PHP code. so, plz forgive me about the foolish questions.

I want take my info from Dashboard on my localhost, and like ng-reapet in angular or for loop
Create a Front page.

This is the code for example:

<div></div>

I want create this div by the info from the splunk and duplication like the number of loops in the DB (Dashboard).

Thank you all 🙂

Re: How to implement/ to assimilate my list to html?

woodcock — Wed, 14 Jun 2017 00:31:32 GMT

Please give much more detail and if possible, have somebody else proofread your translation. I don't see how your question could be understood as it is now.

Re: How to implement/ to assimilate my list to html?

yaghobieh — Wed, 14 Jun 2017 06:52:51 GMT

If I have dashboard like this:
http://imgur.com/a/18nxE

And I want implement to my Front page i built
How can I do it?

Re: How to implement/ to assimilate my list to html?

yaghobieh — Wed, 14 Jun 2017 06:53:10 GMT

If I have dashboard like this:
http://imgur.com/a/18nxE

And I want implement to my Front page i built
How can I do it?

Re: How to implement/ to assimilate my list to html?

niketn — Tue, 29 Sep 2020 14:29:56 GMT

You will have to do this in HTML Dashboard since Angular Controller does not seem to work in Simple XML dashboard. (Refer to documented steps with output: https://wiki.splunk.com/User_talk:Niketnilay#Topic_4:_Using_Angular_JS_in_Splunk_HTML_dashboard)

Step 1:
Create HTML panel in Splunk Simple XML dashboard (note it will not work right away):

 <row>
   <panel>
     <html>
        <!-- ng-controller will work only in HTML Dashboard-->
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1 ng-repeat="x in records">{{x}}</h1>
        </div>
     </html>
   </panel>
</row>

Step 2:
Create a script for Angular code say angular_dashboard_names.js:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "Dashboard1",
        "Dashboard2",
        "Dashboard3",
        "Dashboard4"
    ]
});

Step 3:
Get local copy of angular.min.js and save to your appserver/static folder(you might have to create one if it does not exist).
Depending on your Splunk App name, path may be something like the following:

$SPLUNK_HOME/etc/app/<YourAppName>/appserver/static

Add JS script files to root node of your dashboard (depending on whether the view is dashboard or form)

<dashboard script="angular.min.js,angular_dashboard_names.js">

Step 4:
Convert the dashboard from Simple XML to HTML using Convert to HTML option

PS: If it does not work you might have to bump Splunk and try ( i.e. restart Splunk and refresh browser history and check.)

Re: How to implement/ to assimilate my list to html?

woodcock — Fri, 16 Jun 2017 15:30:00 GMT

What do you mean "implement to my Front page I built"? Do you mean "make this the landing page of Splunk when I login"? If so, you can put your stuff in an app and then edit your user settings and make this new app your Default app. Also check out this app:
https://splunkbase.splunk.com/app/2991/