Solved: Simple XML Dashboard Examples: How to add a new ic...

_dave_b · ‎01-20-2016

Hi folks,
The simplexml examples provided great help when I was creating a dashboard with icons. Now, I want to do something a little different - add a fourth icon for a fourth range. I've downloaded my fourth icon, but how do I tell Splunk I want to use it? I see in the table_icons_inline.js file where the 'alert-circle', 'alert', and 'check' icons are assigned, but I don't see where Splunk knows how to retrieve those icons from the filesystem and associate them with those names. If I knew how it did that, then I could use my fourth icon in the the .js file.

Can anyone help?

Thanks!!

jeffland · ‎01-21-2016

Actually, if you want the technical answer, the javascript code doesn't do anything on the file system. All it does is assign a class to a td element, 'icon-inline numeric', in line 27 in the original code, and in the same line change the content of the table cell to a composition of the original content together with an <i> element that is also assigned a class depending on your class, for example 'alert' (if you think it is strange to use an <i> tag here instead of a span, see here for a discussion about that). Nothing more happens in the js code. There's also the table_decorations.css file. It changes the coloring of some classes - these are the same classes which were set in js.

From here on, some detective work is required to figure everything out. If you're not interested, you can jump straight to the link at the end, but if you want to understand what's happening, read on.

If you like, you can place the following code on an otherwise empty dashboard:

<row>
  <html>
    <div>
      <td class="icon-inline numeric">
        <i class="icon-alert"></i>
      </td>
    </div>
  </html>
</row>

You'll see the same icon on there, without any javascript or css applied. As you already noticed, the interesting question is where the checkmark and other "icons" actually come from, because apparently, they appear out of thin air if you give something a certain class.
When you inspect one such icon with your browser, you'll see a reference to bootstrap.css, and that this icon is actually a font named "Splunk Icons". In bootstrap.css, you'll find the following definition for icon-check:

.icon - check : before {
    content : "\2713"
}

\2713 is the unicode character 'CHECK MARK', which is what you're seeing in your dashboard tables.
So now you know where your "icons" come from. If you want to use other ones, you can either check which icons are already defined, or employ your own .css on your dashboard which reacts to classes like the bootstrap.css does (you do not change that file, obviously!) by defining custom content for your custom classes.
If you don't want to use text based icons and prefer file based icons (as you suggested in your question), you can also reference a file for your class. The procedure basically stays the same though, you assign a class to your element in javascript and handle the actual appearance with css.
Here is blog post which uses files and explains how to do it step by step. Hope I could be of help, and feel free to ask if you have any other questions.

View solution in original post

marcoscala · ‎03-23-2017

Hi!
You can anso find the list of predefined icons available here:
http://<your_splunk_ip>:<web_port>/en-GB/static/docs/style/style-guide.html#icons

You can use any icon listed here you want: just remove the "icon-" from the name when you mention them in the .js file.

Marco

jeffland · ‎01-21-2016

Actually, if you want the technical answer, the javascript code doesn't do anything on the file system. All it does is assign a class to a td element, 'icon-inline numeric', in line 27 in the original code, and in the same line change the content of the table cell to a composition of the original content together with an <i> element that is also assigned a class depending on your class, for example 'alert' (if you think it is strange to use an <i> tag here instead of a span, see here for a discussion about that). Nothing more happens in the js code. There's also the table_decorations.css file. It changes the coloring of some classes - these are the same classes which were set in js.

From here on, some detective work is required to figure everything out. If you're not interested, you can jump straight to the link at the end, but if you want to understand what's happening, read on.

If you like, you can place the following code on an otherwise empty dashboard:

<row>
  <html>
    <div>
      <td class="icon-inline numeric">
        <i class="icon-alert"></i>
      </td>
    </div>
  </html>
</row>

You'll see the same icon on there, without any javascript or css applied. As you already noticed, the interesting question is where the checkmark and other "icons" actually come from, because apparently, they appear out of thin air if you give something a certain class.
When you inspect one such icon with your browser, you'll see a reference to bootstrap.css, and that this icon is actually a font named "Splunk Icons". In bootstrap.css, you'll find the following definition for icon-check:

.icon - check : before {
    content : "\2713"
}

\2713 is the unicode character 'CHECK MARK', which is what you're seeing in your dashboard tables.
So now you know where your "icons" come from. If you want to use other ones, you can either check which icons are already defined, or employ your own .css on your dashboard which reacts to classes like the bootstrap.css does (you do not change that file, obviously!) by defining custom content for your custom classes.
If you don't want to use text based icons and prefer file based icons (as you suggested in your question), you can also reference a file for your class. The procedure basically stays the same though, you assign a class to your element in javascript and handle the actual appearance with css.
Here is blog post which uses files and explains how to do it step by step. Hope I could be of help, and feel free to ask if you have any other questions.

MuS · ‎01-20-2016

Hi _dave_b,

those are the Splunk internal icons and you can find a complete list of them here http[s]://YourSplunkServer:[Yourport]/en-GB/static/docs/style/style-guide.html#icons.

If you want to use your own icon, add it into $SPLUNK_HOME/etc/apps/YourApp/appserver/static and you can call it like this http[s]://YourSplunkServer:[Yourport]/en-GB/static/app/YourApp/youricon.png form the js or any other HTML code.

Don't forget to either restart Splunkweb or use the _bump command after the changes http://docs.splunk.com/Documentation/Splunk/6.3.2/AdvancedDev/CustomizationOptions#Clear_client_and_...

Hope this helps ...

cheers, MuS

Simple XML Dashboard Examples: How to add a new icon to inline rangemap

Get Inspired! We’ve Got Validation that Your Hard Work is Paying Off

What's New in Splunk Enterprise 9.4: Features to Power Your Digital Resilience

Take Your Breath Away with Splunk Risk-Based Alerting (RBA)